如何获取指定元素于document顶部的距离

Question

能想到的有不停的找parent累加offsetTop, 但是感觉是不是有点笨.
特殊原因, 所以也没办法用scrollTop+rect.top这种
请教有没有其他更简便的办法

Answer 1

可以看看这个API：

https://developer.mozilla.org...

如果是你做滚动侦测：

除了 getBoundingClientRect 也可以使用 IntersectionObserver .

Answer 2

不笨，印象里jquery的offset方法也是这么干的。

DOM树是一个嵌套，你从最深处向外找，也不会有几层的，除非你的切图极其不合理，所以写一个while循环即可：

while(node.parentNode) {
    top += ...
    node = node.parentNode
}

JQUERY源码

Answer 3

function toTop (target, parent) {
  let top = 0;
  
  while (target && target != parent) {
      top += target.offsetTop;
    target = target.offsetParent
  }
  return top
}

toTop(target)

Answer 4

用循环向上找

function getPositionTop(node) {
        var top = node.offsetTop;
        var parent = node.offsetParent;
        while(parent != null) {
            top += parent.offsetTop;
            parent = parent.offsetParent;
        }
        return top;
    };

Answer 5

//先生命一个变量 scrollTop = 0；
//然后
componentDidUpdate(){
    scrollTop = document.body.scrollTop;
}