JavaScript 获取元素位置与滚动距离详解

在 Web 开发中，准确获取元素在页面中的位置是常见需求。本节介绍如何通过 JavaScript 获取元素距离可视区的各种距离信息。

const box=document.getElementById('box') // 获取元素
const ct = box.getBoundingClientRect().top // 元素上边距离页面可视区上边的距离
const cr = box.getBoundingClientRect().right // 元素右边距离页面可视区左边的距离
const cb = box.getBoundingClientRect().bottom // 元素下边距离页面可视区上边的距离
const cl = box.getBoundingClientRect().left // 元素左边距离页面可视区左边的距离

要获取浏览器窗口当前的滚动距离，可以通过访问 document.documentElement.scrollTop 或 document.body.scrollTop 属性来实现。通常使用 || 运算符处理兼容性问题，取两者中非零的值作为滚动偏移量。

// 浏览器滚动距离
const dt = document.documentElement.scrollTop || document.body.scrollTop;

获取元素实际距离页面顶部的距离，通常涉及元素在文档流中的绝对位置。这包括了元素自身相对于其 offsetParent 的偏移以及所有祖先元素的滚动距离。

当父级元素中存在定位元素时，offsetTop 返回的是当前元素边缘距离其最近的定位父级元素边缘的距离。这里的定位元素指的是具有 relative、absolute 或 fixed 定位属性的祖先节点。

如果父级元素中不存在任何定位元素，则 offsetTop 返回的是元素相对于 body 元素边缘的距离。此时，offsetParent 默认为 body。

需要注意的是，上述方法在特定场景下存在限制。例如，当滚动父元素的 overflow 属性设置为 scroll 或 hidden 时，某些距离计算可能不生效或产生偏差。

 const box = document.getElementById('box')
 // 元素实际距离页面顶部距离
 const bt = box.offsetTop;
 // 元素实际距离页面左边距离
 const bl = box.offsetLeft;
 // 元素实际距离页面右边距离
 const br = box.offsetRight;
 // 元素实际距离页面底部距离
 const bb = box.offsetBottom;

除了上述复杂计算，获取元素到顶部或左部的距离还有更直接的属性可用。

可以通过 document.querySelector(selectDom).offsetTop 获取元素到其 offsetParent 顶部的距离，通过 document.querySelector(selectDom).offsetLeft 获取元素到其 offsetParent 左边的距离。

offsetTop 属性表示元素到 offsetParent 顶部的距离。理解这一概念的关键在于明确 offsetParent 的定义。

offsetParent 指的是距离当前元素最近的一个具有定位属性的祖宗元素，其定位类型可以是 relative、absolute 或 fixed。若所有祖宗元素均不符合定位条件，则 offsetParent 为 body。如图所示，在图1中获取 child 的 offsetTop，其 offsetParent 为 father；在图2中，若 father 无定位，则 offsetParent 为 body。

需要特别注意，offsetTop 的计算仅在元素完成渲染（即 show）后进行。如果页面中存在异步获取数据的情况，在数据加载完成前计算 offsetTop，可能会导致最终获取的值偏小，因为此时元素尚未完全呈现其最终布局。

综上所述，我们分析了 JavaScript 中获取元素位置及滚动距离的几种主要方法及其注意事项。

至此，关于 JavaScript 获取元素到可视区的距离、浏览器窗口滚动距离及元素距离浏览器顶部距离的介绍已完成。如需了解更多相关内容，建议查阅本站过往文章或继续浏览后续文章。