获取页面滚动位置主要用window.scrollY和scrollX或兼容写法。通过getScrollTop()和getScrollLeft()函数可获取垂直和水平滚动距离，结合onscroll事件实时监听，用于显示回到顶部按钮或判断是否滚动到底部实现无限加载，需注意兼容性与性能优化。
JavaScript获取当前页面的滚动位置，主要通过window.scrollY和window.scrollX属性，或使用document.documentElement.scrollTop与document.body.scrollTop来兼容不同浏览器环境。下面详细介绍具体方法和实际应用。
获取垂直滚动位置
垂直方向的滚动距离指的是页面向上滚动了多少像素。常用方法如下：
window.scrollY：现代浏览器支持的标准属性，返回页面垂直滚动的像素值。document.documentElement.scrollTop：在标准模式（非怪异模式）下获取滚动距离。document.body.scrollTop：在某些旧版浏览器或怪异模式下有效。
为了兼容各种情况，推荐使用如下写法：
function getScrollTop() { return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;}
获取水平滚动位置
如果页面存在横向滚动条，可以通过类似方式获取水平滚动距离：
function getScrollLeft() { return window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft || 0;}
这个函数能准确返回当前页面向左滚动的像素数。
一览AI编剧
创意生成+情节生成+脚本生成，AI编剧3步走，AI自动帮你搞定剧情！
87 查看详情
实时监听滚动位置
可以结合window.onscroll事件，实时获取滚动位置，适用于显示回到顶部按钮、滚动进度条等场景。
window.addEventListener('scroll', function() { const scrollTop = getScrollTop(); console.log('当前滚动位置:', scrollTop);if (scrollTop > 300) {// 滚动超过300px时显示“回到顶部”按钮document.getElementById('backToTop').style.display = 'block';} else {document.getElementById('backToTop').style.display = 'none';}});
实例：判断是否滚动到底部
有时需要检测用户是否浏览到页面底部，比如实现无限加载功能。
function isScrolledToBottom() { const scrollTop = getScrollTop(); const windowHeight = window.innerHeight; const documentHeight = document.documentElement.scrollHeight;return scrollTop + windowHeight >= documentHeight - 5; // 允许5px误差}
window.addEventListener('scroll', function() {if (isScrolledToBottom()) {console.log('已滚动到底部，可加载更多内容');// 加载更多数据逻辑}});
基本上就这些。掌握这几个核心方法，就能灵活处理大多数与滚动位置相关的交互需求。注意兼容性和性能，避免在scroll事件中执行过多计算。
以上就是js脚本怎么获取当前页面滚动位置_js滚动位置获取脚本编写与实例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/290893.html
微信扫一扫 
支付宝扫一扫 
