由一個瀑布流導出對滾動條滾動距離，可視區尺寸，元素尺寸的內容的知識點

下麵是在實現瀑布流中的一小段代碼（當滾動條滾動距離+可視區高度>文檔高度,請求數據）下麵複習一下知識點：一、查看滾動條的滾動距離 js中有兩套方法可以查看滾動條的滾動距離 (1)window.pageXOffset/window.pageYOffset 查看滾動條橫軸和縱軸的滾動距離；但IE8以 ...

下麵是在實現瀑布流中的一小段代碼（當滾動條滾動距離+可視區高度>文檔高度,請求數據）

 window.onscroll = function () {
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;//滾動條縱軸滾動距離
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;//可視區高度
        var pageHeight = oLi[getMinList(oLi)].offsetHeight;//元素高度（文檔高度）
        if(scrollHeight + clientHeight > pageHeight) {
            getData();//獲取ajax數據
        }
    }

下麵複習一下知識點：

一、查看滾動條的滾動距離

js中有兩套方法可以查看滾動條的滾動距離

(1)window.pageXOffset/window.pageYOffset 查看滾動條橫軸和縱軸的滾動距離；但IE8以及以下的版本不相容

(2)針對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 {
            y: document.body.scollTop + document.documentElement.scrollTop,
            x: document.body.scrollLeft + document.documentElement.scrollLeft;
}

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

二、查看視口的尺寸

註：視口就是我們的可視區，因為我們改變瀏覽器的大小的時候會改變可視區的大小

有兩種方法查看視口尺寸

（1）window.innerHeight/window.innerWidth；這個方法可以直接獲取到當前可視區的寬高，但是依然很遺憾的是IE8以及以下的版本不相容。

（2）這個時候就需要第二套方法了：
　　在標準模式下，doucment.documentElement.clientWidth/document.documentElement.clientHeight 在任何瀏覽器都相容。

　　在怪異模式（混雜模式）下，document.body.clientWidth/document.body.clientHeight才能查看視口大小，而不能使用上面標準模式下的方法。

• 什麼是怪異模式和標準模式呢？
瀏覽器的渲染模式有兩種：標準模式和怪異模式。我們常用的是標準模式，怪異模式是防止瀏覽器升級版本過高對後面版本你的代碼不相容，讓瀏覽器可以向後相容其他低版本的代碼的法規則，比如IE6的怪異模式下可以相容IE5個IE4的語法。
• 我們如何變成怪異模式呢？
其實很簡單，只需要把我們html代碼的第一行的<!DOCTYPE HTML>去掉就可以變成怪異模式了，而加上這一行代碼就可以變成標準模式。

• 如何判斷怪異模式還是標準模式？
document上中有一個方法叫做compatMode，當瀏覽器處於怪異模式的時候會返回字元串“BackCompat”，在標準模式下可以返回“CSS1Compat”，通過這個方法我們就可以判斷了。
知道了什麼是標準模式和怪異模式以及如何判斷的情況下，我們就可以封裝一個相容性的函數，返回瀏覽器的視口大小。

  function getViewportOffset () {
      if(window.innerWidth) {
            return {
                  w: window.innerWidth,
                  h: window.innerHeight
            }
      }
      if(document.compatMode == 'CSS1Compat') {
            return {
                  w: document.documentElement.clientWidth,
                  h: document.documentElement.clientHeight
      }else {
            return {
                  w: document.body.clientWidth,
                  h: document.body.clientHeight
            }
      }
}

三、查看元素尺寸

（1）dom.getBoundingClientRect()
在獲取的dom元素上，有一個getBoundingClientRect方法，這個方法可以獲取到元素的寬高和左上點的位置以及有下點的位置（width、height、top、left、right、bottom），註意這裡的寬高是指除去了margin的盒子模型的寬高。
但是老版本的IE瀏覽器沒有實現width和height，那麼我們在老版本的IE計算寬高的時候就需要用bottom-top和right-left來計算寬高值了。
還有一點需要註意的是，這裡的寬高也不是實時更新的，數據只是一個副本。
我們依然可以封裝一個函數，可以返回元素的寬高。

Element.getElementOffset() {
      var objData = this.getBoundingClientRect();
      if(objData.width) {
            return {
                  w: objData.width,
                  h: objData.height
            }
      }else {
            return {
                  w: objData.right - objData.left,
                  h: objData.bottom - objData.top
            }
      }
}

（2）domEle.offsetWidth/dom.offsetHeight
雖然前面有一個ele.getBoundingClientRect()方法，但是由於這個方法名字是在太長了，因此用的並不是非常多，相比較而言，這兩個dom元素的屬性用的更多一些。
這裡獲取的寬高值和上面的一樣，都是除去margin後的盒子模型的寬高

四、查看元素的位置

dom.offsetLeft/dom.offsetTop這兩個值分別是元素距離左側和上側的距離，這裡的值是相對於有定位的父級而言的，如果沒有有定位的父級的話，才是相對於文檔的坐標。

那麼現在就來了一個問題：如何找到有定位的父級呢？
domEle上面還有一個屬性是offsetParent，這個屬性可以查看到元素的有定位的父級，如果沒有的話就會返回body，而body的offsetParent則是null。
我們利用上面的信息，可以來封裝一個函數，求元素的相對於文檔的坐標。

Element.prototype.getPosition = function (){
      if (!this.offsetParent){
            return {
                  "w": this.offsetLeft,
                  "h": this.offsetTop
            }
      }
      var width = this.offsetLeft,
            height = this.offsetTop,
            ele = this.offsetParent;
      while (ele.offsetParent){
            width += this.offsetParent.offsetLeft;
            height += this.offsetParent.offsetTop;
            ele = ele.offsetParent;
      }
      return {
            "w": width,
            "h": height
      }
}

五、滾動條滾動
讓滾動條滾動的方法有三個：scroll、scrollTo、scrollBy；這三個方法都有兩個參數，分別是x值和y值。

前兩個方法的作用一模一樣，都是讓滾動條滾動到（x，y）的位置，但是最後一個scrollBy有一些區別，它是讓滾動條相對於上一個位置滾動多少距離。
我們可以簡單的用這個方法來實現一個自動閱讀的功能：
setInterval(function () {
scrollBy(0, 10);
},50);

根據上面的總結，可以將一開始的代碼段完善：

    function getScrollOffset(){
        if(window.pageXOffset){           
            return{
                x:window.pageXOffset,
                y:window.pageYOffset
            }
        }
        return {
            x:document.documentElement.scrollLeft||document.body.scrollLeft,
            y:document.documentElement.scrollTop||document.body.scrollTop
            
        }
    }
    function getClient (){
        if(window.innerHeight){
            return{
                w:window.innerWidth,
                h:window.innerHeight
            }
        }
        //標準模式
        if(document.compatMode=='CSS1Compat'){
            return{
                w:document.documentElement.clientWidth,
                h:document.documentElement.clientHeight
            }
        }
        else{
            return{
                w:document.body.clientWidth,
                h:document.body.clientHeight
            }
        }
    }

    window.onscroll = function () {
        var scrollHeight = getScrollOffset().y//滾動條縱軸滾動距離
        var clientHeight = getClient().h//可視區高度
        var pageHeight = oLi[getMinList(oLi)].offsetHeight;//元素高度（文檔高度）
        if(scrollHeight + clientHeight > pageHeight) {
            getData();//獲取ajax數據
        }
    }

View Code