如何获取滚动div内React ref元素在视口的绝对Y轴位置？

你可以用getBoundingClientRect()方法解决这个问题，它能直接返回元素相对于浏览器视口的位置信息，不受父滚动容器的影响。

改造后的代码示例： #

<InnerElement
  ref={myRef}
  onClick={() => {
    const rect = myRef.current?.getBoundingClientRect();
    console.log(rect?.top); // 这就是元素顶部在视口中的Y轴位置
  }}
/>

关键说明： #

• getBoundingClientRect().top：返回元素上边缘到视口顶部的距离，单位是像素。如果元素部分/完全在视口上方，这个值会是负数；如果在视口下方，会是正数且大于视口高度。
• 对比offsetTop：offsetTop是相对于最近的定位父元素的距离，所以父容器滚动时它不会变化，而getBoundingClientRect()始终基于当前视口计算。

如果需要获取元素相对于整个文档的绝对位置（而非视口），可以把rect.top加上垂直滚动距离window.scrollY：

const absoluteY = rect?.top + window.scrollY;

内容的提问来源于stack exchange，提问作者sir-haver