滚动条详解及制作（一）

查看滚动条的滚动距离

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，因此我们使用的时候一般都是两个一起使用。

针对兼容性的问题，我们现在就可以封装一个函数，求滚动条滚动距离的方法。

function getScrollOffset(){
        if(window.pageXOffset) {
              return {
                    x: window.pageXOffset,
                    y: window.pageYOffset
              }
        }
        return {
              x: document.body.scollTop + document.documentElement.scrollTop,
              y: document.body.scrollLeft + document.documentELement.scrollLeft;
  }

 

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

当浏览器不是IE的时候，可以直接使用window.pageXOffset和window.pageYOffset的方法，当没有这两个的时候，我们才需要来计算。