如何正确获取DOM元素的位置偏移量？

Question

我正在尝试使用element.getBoundingClientRect（）获取元素的偏移量，但是问题是如果网页的高度很长并且涉及滚动，则函数返回元素的偏移量。窗口。如何在页面顶部获得偏移量？

Answer 1

documentation for getBoundingClientRect()在一个简短的例子中涵盖了您的用例：

  

在计算边界矩形时，会考虑视口区域（或任何其他可滚动元素）的滚动量。这意味着每次滚动位置更改时，矩形的边界边（顶部，左侧，底部和右侧）都会更改它们的值（因为它们的值相对于视口而不是绝对值）。 如果您需要相对于文档左上角的边界矩形，只需将当前滚动位置添加到顶部和左侧属性（可以使用window.scrollX和{{ 1}}）获得一个独立于当前滚动位置的边界矩形。