关于Chrome（谷歌浏览器）对document.documentElement.scrollTop识别

最新推荐文章于 2022-01-24 17:40:00 发布
最新推荐文章于 2022-01-24 17:40:00 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： JavaScript-JS 文章标签： chrome 浏览器 firefox 文档 ie 测试

       最近做一个瞬间信息显示浮动层时，IE、Firefox下都能显示正常，但Chrome下出现了浮动层永远显示在上面，经过仔细分析，发现Chrome对document.documentElement.scrollTop的识别会出现误差。不过加上document.body.scrollTop后，则显示正常。
　　网友提示：由于document.documentElement.scrollTop和document.body.scrollTop在标准模式或者是奇怪模式下都只有一个会返回有效的值，所以都加上也不会有问题（看来上面的问题是Chrome可能把文档当作非标准文档来解析了）。
　　即获取高度时使用document.documentElement.scrollTop+document.body.scrollTop，经测试，代码在IE、Firefox、Chrome下都能显示正常了。

 

也就是将之前用 document.documentElement.scrollTop 的地方 换成 document.documentElement.scrollTop+document.body.scrollTop 就可以了

 

 

http://hi.baidu.com/pmssh/blog/item/6e9f5889749855bf0e24444c.html/cmtid/1070510ebac53ec77bcbe1f3

jiwenyi163
关注
专栏目录
各浏览器对 document、document.body、document.documentElement 对象的 onscroll 事件支持情况
转接遇到爱的专栏
08-24 840
1.各浏览器对 document、document.body、document.documentElement 对象的 onscroll 事件支持情况依次为 window、HTMLDivElement、document、document.body、document.documentElement 对象绑定 scroll 事件监听器，在触发滚动条事件后，将消息打印出来，最终可以汇总为下表：![这里写图
Chrome不认documentElement.scrollTop
u012992280的专栏
04-03 531
修复此bug的方法很简单，就是用document.body.scrollTop来替代document.documentElement.scrollTop。 因为IE有时不认document.body.scrollTop，所以在设计到网页滚动效果时，要这两个属性配合使用获取scrollTop的值，即： var scroll_top;   if (document.documentE
谷歌Chrome浏览器下document.documentElement.scrollTop取值异常的解决方法
技术改变人生
05-12 1229
var scroll_top; if (document.documentElement && document.documentElement.scrollTop) { scroll_top = document.documentElement.scrollTop; } else if (document.b
chrome下document.documentElement.scrollTop为0的解决方案
WeLoveSunFlower的专栏
06-05 3640
var top= document.documentElement.scrollTop || document.body.scrollTop;
document.documentElement && document.documentElement.scrollTop
10-30
在JavaScript中，`document.documentElement` 和 `document.documentElement.scrollTop` 是两个非常重要的属性，它们与网页文档的DOM（Document Object Model）交互，特别是涉及到页面滚动时的行为。本文将深入讲解...
火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
10-18
在探讨“火狐、谷歌、IE关于`document.body.scrollTop`和`document.documentElement.scrollTop`以及值为0的问题”这一主题时，我们深入分析了浏览器在处理页面滚动位置时的不同行为，尤其是当滚动位置值始终为0时的...
关于window.pageYOffset和document.documentElement.scrollTop
09-05
在某些老版本的IE浏览器中，特别是IE8及以下，`window.pageYOffset` 不被支持，此时你需要使用`document.documentElement.scrollTop` 或 `document.body.scrollTop` 来获取滚动位置。但要注意，`document....
解决VUE中document.body.scrollTop为0的问题
10-18
document.documentElement代表的是标签，因此在使用scrollTop属性时，应该使用document.documentElement.scrollTop来获取滚动条的垂直位置。 相对地，如果页面中没有DOCTYPE声明，那么浏览器通常会进入怪异模式...
document.body.scrollTop用法
12-16
- 对于大多数现代浏览器（如 Chrome、Firefox、Safari），使用 `document.documentElement.scrollTop` 来获取页面的滚动位置更为可靠。 ```javascript var scrollTop = document.documentElement.scrollTop; ``` ...
Chrome 又搞事情，这种跨域方案要被禁用了！
小生方勤
01-24 551
天天出新策略，业务都要改废了 ...一句话描述document.domain 将变为可读属性。别着急，预计最早变化时间是 Chrome 101 版本，现在最新版是 97。对我们有啥影响？如...
Javascript调用MsRdpClient 完成Web调用远程桌面
NuClear的.Net专栏
12-04 1万+
最近工作用到Web连接远程桌面，查找资料发现MsRdpClient都是vbscript写的。由于不太熟悉vbscript ，只能一点点改成js。。 下面是具体代码，希望给需要的人一些帮助~~             RDP             body {             padding: 0;             margin: 0;
Chrome浏览器与元素定位
flyincyclone的博客
05-06 1万+
按下Esc键，可以在Elements面板中打开console 现在，你可以在console中测试你的xpath或者css了 测试css的语法是-$(“”) 输入完毕后，点击回车键。如果你的语句是正确的，会返回该css对应的元素的html语句 如果鼠标停留在console中的这个html语句上，界面上对应的元素会高亮显示 验证xpath也是类似的。语法是$x(“your_xpath_selector...
document 文挡对象 - JavaScript脚本语言描述
guang_ge的专栏
04-22 1225
document 文挡对象 - JavaScript脚本语言描述———————————————————————注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写否则会提示你一个错误信息 “引用的元素为空或者不是对象/////”———————————————————————对象属性document.title //设置文档标题等价于HTML的title标签docum
selenium+webdriver+python 滚动条（scrollTop）下拉
热门推荐
Katios
01-11 2万+
语言：python 在获取元素的时候，明明元素确切的存在但是无法定位到，原因比较常见的有两个 1.等待时间不够，time.sleep()下看看 2.元素在页面下方，需要将滚动条拉到底部才能找到该元素滚动条，今天来说说滚动条通常只需要加入#将滚动条移动到页面的底部 js="var q=document.documentElement.scrollTop=100000" driver.exec
angular2 页面中使用window.open打开新窗口后，新页面document.addEventListener visibilitychange事件不生效（谷歌浏览器）
qq_40811733的博客
08-28 3233
如题目所述，在原来页面中，使用window.open打开新页面链接，新页面中需要实现浏览器窗口切换时，监听当前窗口切换超过几次进行提醒，新窗口监听事件如下 if (document.hidden !== undefined) { document.addEventListener('visibilitychange', () => { if (document.hidden) { this.tabNums++; if (thi
彻底解决谷歌浏览器不支持 document.formname.submit() 的方法，绝对有效！
Blocksom的专栏
12-04 9697
代码如下： name="submit" value="提交">提交 function _jumpto(pageNO){; document._thisform.submit(); } 网上很多都说需要通过判断如果是谷歌浏览器则用ajax方式提交： $.post(); uncaught TypeError: Property 'sub
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值