document.documentElement.scrollTop || document.body.scrollTop || window.pageXOffset

最新推荐文章于 2025-07-07 10:19:46 发布
原创 最新推荐文章于 2025-07-07 10:19:46 发布 · 2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#滚动条滚动的距离 #pageYOffse #scrollTop

本文详细解释了在网页开发中如何正确获取页面滚动条的位置。针对不同的浏览器环境，介绍了使用document.documentElement.scrollTop、document.body.scrollTop以及window.pageYOffset的方法，并讨论了它们之间的区别及兼容性问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

document.documentElement.scrollTop/document.body.scrollTop

document.documentElement对应的是获取html，所以他获取的位置是正确的，document.body.scrollTop是对应的body,在标准w3c下，document.body.scrollTop恒为0,所以此时应该用document.documentElement.scrollTop。

window.pageYOffset
获取垂直方向上，滚动条距离顶部的偏移量,查阅资料,此时兼容性最好，我的谷歌浏览器的版本是版本 68.0.3440.106（正式版本） （64 位），document.body.scrollTop的值一直是0，其他都能获取到正确的值

用JavaScript写随鼠标滚动的导航条
yangaoyuan1999的博客
12-05 711
实现效果： 1.滚动鼠标滑轮，到达上方导航条时，上方导航条固定在最上面，如果不超过不固定 2.快到最左端导航条时，左端导航条固定在左边 3.在这些之外范围，左端导航条和上方导航条恢复原样。 实现过程： 1.获得最上方header的高度，（header之下是导航条nav） 2.当鼠标滚动超过这个高度时,让导航条的位置固定在最上方 3.继续滑动鼠标，当窗口上方到达做导航条上方一定距离时（这里是12...
关于window.pageYOffset和document.documentElement.scrollTop
12-10
举个例子： Css:假定进行如下简单设置； html{height:1000px;} JS： 代码如下: function(){ window.scrollBy(0,100); alert(window.pageYOffset); } Results: //点击一次后弹出：100;得出的是一个数值，read-only属性；value：Integer(整数)，default:0; 附注：当滚动条到达页面最底部时，window.pageYOffset=1000-document.documentElement.clientHeight;
document.body.scrollTop与document.documentElement.scrollTop兼容
tudusi
11-25 376
document.body.scrollTop与document.documentElement.scrollTop兼容 这两天在写一个JS的网页右键菜单，在实现菜单定位的时候发现了这个问题：chrome居然不认识document.documentElement.scrollTop！ 看前辈们的文章，纷纷表示如果有文档声明（即网页第一句的docType）的情况下，标...
一文搞懂 JavaScript 中的 `pageXOffset`、`scrollX`、`pageYOffset` 和 `scrollY`
最新发布
JakeMa1024的博客
07-07 647
在前端开发中，页面滚动是一个非常常见的交互场景。无论是实现“回到顶部”按钮、固定导航栏，还是动态加载内容，开发者都需要精确控制或获取页面的滚动位置。而 JavaScript 中的 `pageXOffset`、`scrollX`、`pageYOffset` 和 `scrollY` 四个属性，正是实现这些功能的关键工具。 本文将深入浅出地讲解这四个属性的用法、区别以及实际应用场景，帮助你快速掌握它们的精髓。
js兼容写法为document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
zgjxyszh的博客
03-13 4893
<!DOCTYPE html> <html> <head> <title>js兼容写法为var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;</title> <meta charse...
document.documentElement.scrollTop
weixin_44283589的博客
08-05 8130
在标准的w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;js中每个载入浏览器的HTML文档都会成为Document对象，documentElement 对应的是 html 标签，如果发现两个高度不一样，是css设置的问题，你的html高度不一定高于body。用body查看，其中clientHeight即为body的css高度，而不是：document.body.scrollTop;...
document.body.scrollTop or document.documentElement.scrollTop
weixin_34032779的博客
11-13 107
　　用Javascript获取DOM节点相对于页面的绝对坐标时，需要计算当前页面的滚动距离，而这个值的获取又取决于浏览器。 　　在Firefox或Chrome浏览器的控制台可以查看document.body 对应于页面中 <body></body>部分的元素，而document.documentElement则相当于整个HTML，说明浏览器在解释渲染后的页面位置范围是存在...
用document.documentElement取代document.body的原因分析
09-05
通过条件语句判断浏览器支持的滚动位置获取方式，既考虑了现代浏览器的 `window.pageYOffset` 和 `window.pageXOffset`，也考虑了老式浏览器的 `document.documentElement.scrollTop` 和 `document.body.scrollTop`...
通过封装scroll.js 获取滚动条的值
10-18
如果上述方法仍然不适用，我们还可以使用document.body.scrollLeft和document.body.scrollTop，这通常适用于兼容模式下的浏览器。 为了解决跨浏览器的兼容性问题，文章中提供的代码通过封装scroll.js创建了一个对象...
【JavaScript源代码】JavaScript实现跟随广告的示例代码.docx
12-29
y: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop }; } ``` 这段代码主要包括以下几个步骤： 1. **获取元素**：使用 `document.querySelector("img")` 获取广告图片...
javascript经典特效---显示页面窗口参数.rar
03-08
在一些老版本的浏览器中，可能需要使用`document.documentElement.scrollLeft` 和 `document.documentElement.scrollTop`。 3. **浏览器信息**：`navigator.userAgent` 返回一个字符串，包含了用户浏览器的详细信息...
解决VUE中document.body.scrollTop为0的问题
10-18
今天小编就为大家分享一篇解决VUE中document.body.scrollTop为0的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
document.documentElement.scrollTop || document.body.scrollTop;
awn80645的博客
03-19 175
在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常。那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document...
document.documentElement.scrollTop || document.body.scrollTop
dbrb71278的博客
07-11 155
如果有doctype的声明,需要用document.documentElement.scrollTop没有doctype的声明,用document.body.scrollTop 转载于:https://www.cnblogs.com/Tachi/p/5660793.html
【document.body.scrollTop】scrollTop=document.body.scrollTop||document.documentElement.scrollTop及浏览器兼容
virus1992的专栏
04-17 1238
本文为此文的衍生：http://blog.csdn.net/virus1992/article/details/8814126 scrollTop=document.body.scrollTop||document.documentElement.scrollTop 等同于： var top = document.documentElement.scrollTop ? d
document.body.scrollTop与document.documentElement.scrollTop区别
NotBad_的博客
08-26 1713
document.body.scrollTop与document.documentElement.scrollTop都是获取滚动条滚动 的距离， 由于在不同情况下，document.body.scrollTop与document.documentElement.scrollTop 都有可能取不到值，但是这两个方法有一个特点：  两个方法同时使用只有一个值有效，比如document.body
document.documentElement.scrollTop与document.body.scrollTop
Fair_feng的博客
04-28 1756
问题针对document.documentElement.scrollTop和document.body.scrollTop. 1、在IE Firefox Opera 现代浏览器的标准模式下，使用document.documentElement.scrollTop获取高度，混杂模式下，也就是没有DTD文档声明，则使用document.body.scrollTop. 2、Chrome Safari
ableRef.value.getBoundingClientRect is not a function
04-28
body = document.body || {}, clientLeft = this.clientLeft || 0, clientTop = this.clientTop || 0, scrollX = window.pageXOffset || docElm.scrollLeft || body.scrollLeft || 0, scrollY = window....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值