JavaScript中获取滚动距离和偏移量需区分场景：页面滚动用window.scrollX/Y（只读），元素内部滚动用element.scrollLeft/scrollTop（可写），元素位置用getBoundingClientRect()或offsetLeft/offsetTop，滚动控制推荐scrollIntoView({behavior:"smooth"})。
JavaScript 中获取页面滚动距离和偏移量，主要靠 BOM 提供的几个关键属性，它们分布在 window 和元素节点上，用途明确但容易混淆。掌握清楚各属性含义和适用场景，就能准确拿到你需要的数值。
获取整个页面的滚动距离（视口相对于文档左上角的偏移）
这是最常用的需求，比如实现吸顶导航、懒加载或滚动监听。核心是读取 window 对象的两个只读属性：
-
window.scrollX：水平方向滚动距离（单位像素），等价于window.pageXOffset -
window.scrollY：垂直方向滚动距离（单位像素），等价于window.pageYOffset
✅ 推荐直接使用 scrollX/scrollY，语义清晰、兼容性好（IE9+ 支持）。例如：
console.log("纵向滚动了", window.scrollY, "px");
获取某个元素自身的滚动偏移（元素内部内容滚动了多少）
当一个元素设置了 overflow: scroll/auto，它自己就成了可滚动容器。这时要查的是该元素内容被卷走的部分：
立即学习“Java免费学习笔记（深入）”；
-
element.scrollLeft：元素内容向左滚动的距离 -
element.scrollTop：元素内容向上滚动的距离
⚠️ 注意：这两个值是可写的，赋值能触发滚动；而 window.scrollX/Y 是只读的。例如获取一个 id 为 list 的滚动区域当前位置：
console.log("列表垂直滚动了", list.scrollTop, "px");
获取元素相对于视口或文档的位置（用于计算是否进入可视区）
滚动距离常配合元素位置使用。BOM 提供了三组关键方法/属性：
-
element.getBoundingClientRect()：返回元素相对于**视口左上角**的坐标（top,left,width,height等），结果随滚动实时变化 -
element.offsetLeft/element.offsetTop：返回元素相对于其最近的定位祖先（position 不为 static）的左/上偏移，不随滚动变化 -
element.getClientRects()：适用于内联元素，返回多个矩形（如换行文本），一般用不到
? 小技巧：判断元素是否出现在视口中，常用 getBoundingClientRect().top < window.innerHeight；判断是否已滚动过某元素，可用 element.offsetTop - window.scrollY <= 0。
设置滚动位置（主动控制滚动）
除了获取，BOM 还提供多种滚动控制方式：
-
window.scrollTo(x, y)：立即滚动到指定坐标 -
window.scrollBy(dx, dy)：相对当前位置滚动（适合“回到顶部”按钮） -
element.scrollIntoView(options)：让元素滚动到视口可见区域，支持平滑动画：{ behavior: "smooth" } -
element.scrollTo()：类似window.scrollTo，但作用于该元素自身（如滚动容器）
✅ 建议优先用 scrollIntoView({ behavior: "smooth" }) 实现用户体验更好的滚动，兼容性良好（Chrome 61+/Firefox 60+）。
