js脚本怎么获取当前页面滚动位置_js滚动位置获取脚本编写与实例

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

js脚本怎么获取当前页面滚动位置_js滚动位置获取脚本编写与实例

2025-11-03

浏览次数：次

返回列表

获取页面滚动位置主要用window.scrollY和scrollX或兼容写法。通过getScrollTop()和getScrollLeft()函数可获取垂直和水平滚动距离，结合onscroll事件实时监听，用于显示回到顶部按钮或判断是否滚动到底部实现无限加载，需注意兼容性与性能优化。

js脚本怎么获取当前页面滚动位置_js滚动位置获取脚本编写与实例

J*aScript获取当前页面的滚动位置，主要通过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;
}

这个函数能准确返回当前页面向左滚动的像素数。

OneStory

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319 查看详情 OneStory

实时监听滚动位置

可以结合window.onscroll事件，实时获取滚动位置，适用于显示回到顶部按钮、滚动进度条等场景。

window.addEventListener('scroll', function() {
  const scrollTop = getScrollTop();
  console.log('当前滚动位置:', scrollTop);
<p>if (scrollTop > 300) {
// 滚动超过300px时显示“回到顶部”按钮
document.getElementById('backToTop').style.display = 'block';
} else {
document.getElementById('backToTop').style.display = 'none';
}
});</p>

实例：判断是否滚动到底部

有时需要检测用户是否浏览到页面底部，比如实现无限加载功能。

function isScrolledToBottom() {
  const scrollTop = getScrollTop();
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;
<p>return scrollTop + windowHeight >= documentHeight - 5; // 允许5px误差
}</p><p>window.addEventListener('scroll', function() {
if (isScrolledToBottom()) {
console.log('已滚动到底部，可加载更多内容');
// 加载更多数据逻辑
}
});</p>

基本上就这些。掌握这几个核心方法，就能灵活处理大多数与滚动位置相关的交互需求。注意兼容性和性能，避免在scroll事件中执行过多计算。

以上就是js脚本怎么获取当前页面滚动位置_js滚动位置获取脚本编写与实例的详细内容，更多请关注其它相关文章！

# 未接 # 东莞专业seo # 石碣抖音seo流程公司 # 无锡住房建设网站 # 紫薯推广营销策略研究现状 # 泗水抖音推广营销 # 天津seo电话 # 菏泽seo外包排行 # 汕头市seo报价 # 个人网站建设网站优化 # 商丘网站优化方案流程图 # 推荐使用 # 就能 # js脚本制作教程 # 道中 # 判断是否 # 文本框 # 何为 # 弹出 # 加载 # 背景色 # win # 浏览器 # js # java # javascript