滾動條詳解及製做（一）

查看滾動條的滾動距離

js中有兩套方法能夠查看當前滾動條的滾動距離。

第一套是這樣的：

window.pageXOffset/window.pageYOffset

這個方法能夠查看滾動條的橫軸和縱軸的滾動距離，可是很遺憾的是IE8以及如下的版本不兼容。

所以針對於IE，咱們就須要有第二套方法：

document.body.scrollLeft/doucment.body.scrollTop

document.documentElement.scrollLeft/document.documentElement.scrollTop

雖然IE能夠使用這兩個方法，可是這兩個方法不單單是IE才能夠使用。

這裏要說明的是，這兩種方法要一塊兒使用，由於瀏覽器的兼容性問題，有的瀏覽器是document.body有值，有的是document.documentElement有值，可是全部的瀏覽器都只有一個有值，不會兩個都有或者一個都沒有，並且這裏的沒有值不表明是null，而是0，所以咱們使用的時候通常都是兩個一塊兒使用。

針對兼容性的問題，咱們如今就能夠封裝一個函數，求滾動條滾動距離的方法。

 1 function getScrollOffset(){
 2         if(window.pageXOffset) {
 3               return {
 4                     x: window.pageXOffset,
 5                     y: window.pageYOffset
 6               }
 7         }
 8         return {
 9               x: document.body.scollTop + document.documentElement.scrollTop,
10               y: document.body.scrollLeft + document.documentELement.scrollLeft;
11   }

 

JavaScript; 「複製代碼」); 「查看純文本代碼」); 「返回代碼高亮」)

當瀏覽器不是IE的時候，能夠直接使用window.pageXOffset和window.pageYOffset的方法，當沒有這兩個的時候，咱們才須要來計算。