在前端开发中，我们经常需要获取元素的位置和大小。其中一个常用的方法就是使用 getBoundingClientRect() 函数。但是，在滚动时，getBoundingClientRect() 的结果可能会出现变化。本文将详细介绍这个问题并提供解决方案。
问题描述
getBoundingClientRect() 返回一个包含元素位置和大小信息的矩形对象。它的返回值是相对于视口的坐标。当页面滚动时，元素的位置会发生变化，因为它们相对于视口的位置也会随之改变。然而，有时候即使页面没有滚动，getBoundingClientRect() 的结果也会出现变化。这是因为该函数返回的是相对于元素的父级元素的坐标，并且这些父级元素的位置可能会受到其他因素（如浮动、定位等）的影响而发生变化。
以下示例演示了这个问题：
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>-- -------------------- ---- ------- ------- - --------- --------- ---- ------ - ------ - --------- --------- ---- ----- ----- ----- ------ ------ ------- ------ ----------------- ---- -
const childRect = document.querySelector('#child').getBoundingClientRect();
console.log(`Top: ${childRect.top}, Left: ${childRect.left}`);
window.addEventListener('scroll', () => {
const childRect = document.querySelector('#child').getBoundingClientRect();
console.log(`Top: ${childRect.top}, Left: ${childRect.left}`);
});在这个示例中，#child 的位置是相对于 #parent 的。即使页面没有滚动，当 #parent 的位置发生变化时，#child 的位置也会随之改变。
解决方案
要解决这个问题，我们需要获取元素相对于视口的位置而不是父级元素。可以通过计算父级元素到视口顶部和左侧的距离，以及元素自身到父级元素顶部和左侧的距离来实现。
以下示例演示了如何使用这种方法：
-- -------------------- ---- ------- -------- -------------------------- - ----- ---- - -------------------------------- ----- ---------- - --------------------------------------------- ----- --- - -------- - -------------- - ----------------------------------- ----- ---- - --------- - --------------- - ------------------------------------ ------ - ---- ---- -- - ----- ----------- - ---------------------------------------------------- ----------------- ------------------- ----- ---------------------- --------------------------------- -- -- - ----- ----------- - ---------------------------------------------------- ----------------- ------------------- ----- ---------------------- ---
在这个示例中，getViewportOffset() 函数返回元素相对于视口的位置。我们使用 offsetParent 属性获取元素的父级元素，然后计算其到视口顶部和左侧的距离。最后，我们将元素自身到父级元素顶部和左侧的距离加上这些值，就可以得到相对于视口的位置了。
学习和指导意义
通过本文，你学会了解决 getBoundingClientRect() 在滚动中可能出现的问题，并学会了如何获取元素相对于视口的位置。这个知识点在前端开发中非常实用，因为我们经常需要获取元素的位置和大小来进行布局和交互设计。
此外，本文还提供了示例代码，可以帮助你更好地理解和运用这个知识点。你可以将这些代码应用到自己的项目中，或者根据这些代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26513