js获取元素在指定父元素中的位置

11,020 阅读1分钟

示例代码均为vue

一、offsetTop

dom节构如下时:

<div ref="parent">
  <div ref="sub1"></div>
  <div ref="sub2"></div>
  <div ref="sub3"></div>
</div>

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

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

<div ref="parent">
 <div>
   <span></span>
   <div></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是相对于视口的距离,所以当滚动条位置已经发生改变后,此方法返回的位置信息也会发生改变。