Javascript 获取元素相对于溢出页面的位置

我想得到一个元素相对于整个页面的位置，但是该元素位于一个可滚动的容器中，这使得通常使用的方法毫无用处。（谈论

getBoundingClientRect（）

，

offsetTop

等）

作为我的意思的一个例子：

在“基本拖放”部分，如果在不滚动页面的情况下获得元素的Y位置，则

element.getBoundingClientRect（）.top将获得626


现在，如果你向下滚动，使元素几乎接触到窗口的顶部，同样的元素得到70


但是我想要的是相对于整个页面的完全相同的值，所以在我滚动之后，该值不应该改变。我知道默认的滚动行为是这样的，但在这种情况下，主体不滚动，而是滚动其元素。
我可能在你的问题中遗漏了一些东西，因为我可以看到Offsetop的工作方式正是你想要的。
请参阅

它会根据其在可滚动容器中的新位置更新其偏移量。
如果您可以识别元素所在的可滚动容器，只需将其垂直滚动偏移量（
scrollTop
）添加到
getBoundingClientRect（）.top
的结果中即可

另一方面，如果您不知道元素父级树中的哪个容器是可滚动的，或者如果您的元素有多个可滚动的父级，则可以将元素树检查到顶部节点，即
元素，即
document.documentElement

function getPageOffset(elem) {
  let topOffset = elem.getBoundingClientRect().top;

  while (elem != document.documentElement) {
    elem = elem.parentElement;
    topOffset += elem.scrollTop;
  }
  return topOffset;
}

下面是一个嵌套在三个可滚动容器树中的段落的简单示例，它利用了上述功能（您可能需要调整浏览器视口的大小以显示滚动条）：


var myElem=document.getElementById（“myElem”）；
函数getPageOffset（元素）{
让topOffset=elem.getBoundingClientRect（）.top；
while（elem！=document.documentElement）{
elem=elem.parentElement；
topOffset+=元素滚动顶部；
}
返回拓扑偏移；
}
document.getElementById（“myBtn”）.addEventListener（“单击”，函数（）{
log（getPageOffset（myElem））；
});
.parent1，
.2，
.父母3{
高度：100vh；
溢出y：自动；
}
.parent1{
高度：400px；
}
钮扣{
位置：固定；
顶部：20px；
左：20px；
}











































这是我想要获取其顶部偏移量的元素
获取顶部偏移量
这个答案对您有用吗@很遗憾，Steve没有这样做-在角度拖放的情况下，将元素拖动到另一个位置后，偏移量保持不变。如果该元素是可拖动的，如链接页面中的示例所示，它将不起作用。仅限那些可拖动的元素。我不太确定什么不起作用，我可能遗漏了什么。您能帮助我更好地理解它吗？当链接页面中的元素被拖动时，其
转换
属性会发生更改
offsetTop
不受
transform
中这些更改的影响。回答得好。让我困惑的是：偏移量不总是整数吗？那么怎么会有加法误差呢？公平点@chriswesselling。