JS基礎篇-- body.scrollTop與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.scrollLeft和document.body.scrollTop 或者window.pageXoffset與window.pageYoffset。

 

總結

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



文章來源：https://segmentfault.com/a/1190000008065472