JavaScript通过window.scrollX/Y或pageXOffset/YOffset获取页面滚动距离，用scrollTo()或scroll()设置位置并支持平滑滚动，监听用scroll事件配合防抖节流，元素内滚动则用scrollTop/scrollLeft。

JavaScript 获取和设置页面滚动距离，主要通过 window 对象的几个关键属性和方法实现。核心在于区分文档滚动与元素滚动，并注意浏览器兼容性与行为差异。

获取整个页面的滚动距离

页面整体滚动位置由 window.scrollX 和 window.scrollY 提供（推荐），或兼容性写法 window.pageXOffset / window.pageYOffset：

• window.scrollX 返回水平方向滚动像素值（左为正）
• window.scrollY 返回垂直方向滚动像素值（上为正）
• 两者在所有现代浏览器中都支持，IE 不支持，需用 pageXOffset/pageYOffset 回退
• 也可通过 document.documentElement.scrollTop 获取垂直滚动，但受 doctype 和渲染模式影响，不推荐作为首选

设置页面滚动到指定位置

使用 window.scrollTo() 或更现代的 window.scroll()（二者等价），支持多种调用方式：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• window.scrollTo(x, y)：直接跳转到坐标（x 水平，y 垂直）
• window.scrollTo({ top: y, left: x, behavior: 'smooth' })：支持平滑滚动，behavior 可选 'auto'（默认瞬时）或 'smooth'
• 例如：window.scrollTo({ top: 200, behavior: 'smooth' }) 向下滚动 200px 并带动画

监听滚动位置变化

用 scroll 事件监听滚动行为，注意性能优化：

立即学习“Java免费学习笔记（深入）”；

• 绑定在 window 上即可捕获页面滚动：window.addEventListener('scroll', handler)
• 高频触发，建议配合防抖（debounce）或节流（throttle），或使用 requestIdleCallback 延迟处理
• 也可用 IntersectionObserver 替代部分场景（如懒加载、滚动状态判断），更高效

获取/设置某个元素内的滚动距离

对容器元素（如 div 设置了 overflow: auto）：

• 获取：element.scrollTop（垂直）、element.scrollLeft（水平）
• 设置：element.scrollTop = 100 或 element.scrollTo({ top: 100, behavior: 'smooth' })
• 注意：scrollTop 最大值为 element.scrollHeight - element.clientHeight