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

Question

我想获取一个元素相对于整个页面的位置，但是该元素在一个可滚动的容器中，这使得通常使用的方法毫无用处。 （谈论getBoundingClientRect()、offsetTop等）

作为我的意思的一个例子： https://material.angular.io/cdk/drag-drop/overview

在“基本拖放”部分中，如果您在不滚动页面的情况下获得元素的 Y 位置，则 element.getBoundingClientRect().top 获得 626

现在，如果您向下滚动，使元素几乎接触到窗口的顶部，对于完全相同的元素，您将得到 70

但我想要的是与整个页面完全相同的值，因此滚动后该值不应改变。我知道这是默认滚动行为的情况，但在这种情况下，主体不会滚动，而是它的元素。

Answer 1

我可能在您的问题中遗漏了一些东西，因为我可以看到 offsetTop 完全按照您的意图工作。 请参考https://stackblitz.com/edit/angular-rpaupe?file=src%2Fapp%2Fcdk-drag-drop-sorting-example.html。

它确实根据它在可滚动容器中的新位置更新了它的 offsetTop。

Answer 2

如果您可以识别元素所在的可滚动容器，您可以简单地将其垂直滚动偏移量 (scrollTop) 添加到 getBoundingClientRect().top 的结果中。

另一方面，如果您不知道元素父级树中的哪个容器是可滚动的，或者您的元素有多个可滚动父级，则可以检查元素的树直到顶部节点，即 @ 987654323@元素，即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");

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

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

document.getElementById("myBtn").addEventListener("click", function() {
  console.log(getPageOffset(myElem));
});

.parent1,
.parent2,
.parent3 {
  height: 100vh;
  overflow-y: auto;
}

.parent1 {
  height: 400px;
}

button {
  position: fixed;
  top:  20px;
  left: 20px;
}

<div class="parent1">
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="parent2">
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div class="parent3">
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <p id="myElem">This is the element I want to get the top offset of.</p>
    </div>
  </div>
</div>
<button id="myBtn">Get top offset</button>

测量之间的误差范围可以忽略不计（由于加法不准确），可以通过某种舍入来克服。