在前端开发中，我们经常需要计算一个 HTML 元素与浏览器（或窗口）之间的距离。这可以帮助我们实现一些比较复杂的交互效果，比如当用户滚动页面时，动态改变某个元素的位置。
获取元素在文档中的位置
要计算一个元素与浏览器之间的距离，我们需要知道这个元素在页面中的位置。可以通过以下方式获取：
const element = document.querySelector('#target-element');
const rect = element.getBoundingClientRect();getBoundingClientRect() 方法返回一个包含 top, right, bottom, left, width, 和 height 属性的对象，表示元素在视口中的位置和大小信息。
计算元素与浏览器之间的距离
一旦我们获取了元素在文档中的位置，就可以计算它与浏览器之间的距离了。距离可以分为水平距离和垂直距离：
const distanceFromTop = rect.top; const distanceFromLeft = rect.left;
注意，这里计算的是元素顶部和左侧分别与浏览器顶部和左侧之间的距离。如果需要计算底部或右侧的距离，可以用 rect.bottom 和 rect.right。
考虑滚动的影响
上面的计算方式只适用于页面没有滚动的情况。如果页面滚动了，那么元素与浏览器之间的距离就需要加上滚动的距离。
const distanceFromTop = rect.top + window.pageYOffset; const distanceFromLeft = rect.left + window.pageXOffset;
window.pageYOffset 和 window.pageXOffset 分别表示当前文档在垂直和水平方向上已经滚动的像素值。
示例代码
下面是一个完整的示例代码，演示如何计算一个元素与浏览器之间的距离，并动态改变元素的位置：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----------------
-------
--------------- -
--------- ---------
---- ------
----- ------
------ ------
------- ------
----------------- ----
-
--------
-------
------
---- --------------------------
--------
----- ------- - ------------------------------------------
----- ---- - --------------------------------
-------- ---------------- -
----- --------------- - -------- - -------------------
----- ---------------- - --------- - -------------------
-- ---------------------
----------------- - --------------- - -----
------------------ - ---------------- - -----
-
--------------------------------- ----------------
-----------------
---------
-------
-------在这个示例中，我们首先获取了一个 ID 为 target-element 的元素的位置信息。然后，在页面滚动时，通过监听 scroll 事件来重新计算元素的位置，并更新它的样式。
结论
在前端开发中，经常需要计算一个 HTML 元素与浏览器之间的距离。通过获取元素在文档中的位置，并考虑滚动的影响，我们可以准确地计算出距离，并实现一些复杂的交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24664