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

Question

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

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

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

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

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

Answer 1

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

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

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

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

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

 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>

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

Answer 2

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

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

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

问题描述

2 个解决方案

解决方案1
1 2021-04-04 06:38:00

解决方案2
0 2021-04-04 01:54:38

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

问题描述

2 个解决方案

解决方案1 1 2021-04-04 06:38:00

解决方案2 0 2021-04-04 01:54:38

解决方案1
1 2021-04-04 06:38:00

解决方案2
0 2021-04-04 01:54:38