可将父元素定位后,采用 $refs.sub1.offsetTop 的方式直接获取在上一个定位过的父元素中的位置

当 dom 节构如下时:(甚至更复杂)

<div ref="parent">
   <span></span>
   <div></div>
       <div ref="sub1"></div>
       <div ref="sub2"></div>
       <div ref="sub3"></div>
   </div>
 </div>
</div>
若中间层dom节点大多被定位过，那么就需要使用递归，不断累加距离上一个定位过的父元素的距离才得出最终位置。
二、getBoundingClientRect
Element.getBoundingClientRect()  方法返回元素的大小及其相对于视口的位置。
个人更推荐此方式
1.获取指定父元素距离浏览器的位置
2.获取子元素距离浏览器的位置
3.子元素的top - 父元素的top 就是子元素相对父元素的位置
function getElementTop(parent, sub) {
  const parentClient = parent.getBoundingClientRect()
  const subClient = sub.getBoundingClientRect()
  return parseInt(subClient.top - parentClient.top)
不过getBoundingClientRect是相对于视口的距离，所以当滚动条位置已经发生改变后,此方法返回的位置信息也会发生改变。
  
分类：
 前端
 
标签：
 
前端
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装