頁面觸底自動加載數據

首先理解三個dom元素，分別是：clientHeight、offsetHeight、scrollTop。

clientHeight：這個元素的高度，佔用整個空間的高度，因此，若是一個div有滾動條，那個這個高度則是不包括滾動條沒顯示出來的下面部分的內容。而只是單純的DIV的高度。

offsetHeight：是指元素內容的高度。依照上面的，那這個高度呢就是DIV內部的高度，包括可見部分及以滾動條下面的不可見部分。

scrollTop：這個是什麼呢？他能夠理解爲滾動條能夠滾動的長度。

舉例，若是一個DIV高度是400px（即clientHeight爲400），而裏面的內容是一個很長的列表，內容的高度是1000px（即offsetHeight爲1000）。那麼，可見部分咱們看到400px，1000px的內容中還有600px不可見。而這不可見的部分呢，正是咱們經過拉動滾動條才能把這一部分顯示出來。你若是滾動條不拉動，此時scrollTop爲0，若是你把滾動條拉到底，顯示出列表最下面的部分，此時，scrollTop爲600。　因此scrollTop的取值區間爲[0, 600]。　因此這個600能夠理解爲滾動條能夠滾動的長度。

理解完上面的這個概念以後。要判斷是否滾動到底部就很好作了。

首先，咱們拉動滾動條，從最上面拉到最下面，變化的是scrollTop的值，而這個值是有一個區間的。

這個區間是：[0, (offsetHeight - clientHeight)]

即，滾動條拉動的整個過程的變化在 0 到 (offsetHeight – clientHeight) 範圍以內。

一、判斷滾動條滾動到最底端：scrollTop == (offsetHeight – clientHeight)

二、在滾動條距離底端50px之內：(offsetHeight – clientHeight) – scrollTop <= 50

三、在滾動條距離底端5%之內：scrollTop / (offsetHeight – clientHeight) >= 0.95

如上。

若是要實現拉到底部自動加載內容。只要註冊個滾動條事件：

scrollBottomTest =function(){  
     $("#contain").scroll(function(){  
         var $this =$(this),  
         viewH =$(this).height(),//可見高度  
         contentH =$(this).get(0).scrollHeight,//內容高度  
         scrollTop =$(this).scrollTop();//滾動高度  
        //if(contentH - viewH - scrollTop <= 100) { //到達底部100px時,加載新內容  
        if(scrollTop/(contentH -viewH)>=0.95){ //到達底部100px時,加載新內容  
        // 這裏加載數據..  
        }  
     });  
}