js中的document.body.scrollTop与document.documentElement.scrollTop

本篇文章主要分享js中的document.body.scrollTopdocument.documentElement.scrollTop,文中有关document.body.scrollTop,document.documentElement.scrollTop,页面位置的内容,请参考。

获取当前页面滚动条纵坐标的位置document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条横坐标的位置:document.body.scrollLeft与document.documentElement.scrollLeft

1.各浏览器下 scrollTop的差异:

IE6/7/8:
可以使用 document.documentElement.scrollTop; 
IE9及以上:
可以使用window.pageYOffset或者document.documentElement.scrollTop 
Safari: 
safari: window.pageYOffset 与document.body.scrollTop都可以; 
Firefox: 
火狐等等相对标准些的浏览器就省心多了,直接用window.pageYOffset 或者 document.documentElement.scrollTop 
Chrome:
谷歌浏览器只认识document.body.scrollTop;
注:标准浏览器是只认识documentElement.scrollTop的,但chrome虽然我感觉比firefox还标准,但却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop.
由于在不同情况下,document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值,那到底网页的scrollTop值怎么得到呢?难道又要用JavaScript进行判断?

其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值,如果不考虑safari,可以这样:
var sTop=document.body.scrollTop+document.documentElement.scrollTop;
这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。一点小技巧,但很实用。

2.获取scrollTop的值

可以使用window.pageYoffset
Window pageXOffset 和 pageYOffset 属性
其定义:pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。
注意: IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.documentElement.scrollLeft" 和 "document.documentElement.scrollTop" 属性 。
由于谷歌兼容问题,可以使用document.body.scrollLeftdocument.body.scrollTop 或者window.pageXoffset与window.pageYoffset。

总结

var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(heightTop);

参考地址:http://blog.csdn.net/lploveme/article/details/7011174

http://www.runoob.com/jsref/prop-win-pagexoffset.html

文章内容就介绍到这儿,如有差错,敬请指正,谢谢!

您可以选择一种方式赞助本站

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: