有关document.body.scrollTop兼容性问题

有关document.body.scrollTop兼容性问题

该属性无法在最新chrome中使用了吗?换成window.pageYOffset就可以了

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,出现这样的原因是:

<!DOCTYPE html>这是HTML5的文档声明,在获取滚动高度的时候会有改变,如下:

例如Chrome

没有doctype声明的页面,使用  document.body.scrollTop 来获取 scrollTop高度 ; 

有doctype声明的页面,则使用 document.documentElement.scrollTop; 

所以一般使用scrollTop的话,用兼容性写法:

http://img1.sycdn.imooc.com//climg/5db3fc1609bdd71e07300045.jpg

在不使用兼容性写法时,使用document.body.scrollTop要去掉doctype声明。如下

http://img1.sycdn.imooc.com//climg/5db3fc4d09a49e8103470070.jpg

同学可以测试下哦

建议:一般情况下是要使用兼容性的写法的。

如果帮助到了你,欢迎采纳~祝学习愉快~

  • 晚睡早起哟 提问者 #1
    好的,弄明白了,感谢
    2019-10-26 16:05:35
提问者 晚睡早起哟 2019-10-26 15:05:53

老师你好,你看下我这段代码,scrollTop打印的值一直为0,而pageYOffset却可以返回值。

http://img1.sycdn.imooc.com//climg/5db3f04709ad633606820226.jpg

http://img1.sycdn.imooc.com//climg/5db3f047092aad9209690259.jpg

http://img1.sycdn.imooc.com//climg/5db3ef9d09d442bf07790497.jpg

好帮手慕言 2019-10-26 10:14:19

同学你好,这边使用最新版本的谷歌进行测试,是可以正常打印的哦。如下:

http://img1.sycdn.imooc.com//climg/5db3ab8309948f6903790183.jpg

http://img1.sycdn.imooc.com//climg/5db3aba60931868806200257.jpg

控制台:
http://img1.sycdn.imooc.com//climg/5db3abbf096f141603180059.jpg

同学可以再测试下,也可以使用window.pageYOffset,两者打印出的值是一致的。

如果帮助到了你,欢迎采纳~祝学习愉快~

  • 提问者 晚睡早起哟 #1
    老师,我重新测试了下,还是不行,你看下我上传的这个图片
    2019-10-26 15:07:54
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师