本文章向碼農(nóng)介紹jquery如何判斷滾動條滾到頁面底部并執(zhí)行事件。首先理解三個dom元素，分別是：clientHeight、offsetHeight、scrollTop。

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

clientHeight：這個元素的高度，占用整個空間的高度，所以，如果一個div有滾動條，那個這個高度則是不包括滾動條沒顯示出來的下面部分的內(nèi)容。而只是單純的DIV的高度。

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

scrollTop：這個是什么呢？他可以理解為滾動條可以滾動的長度。

舉例，如果一個DIV高度是400px（即clientHeight為400），而里面的內(nèi)容是一個很長的列表，內(nèi)容的高度是1000px（即offsetHeight為1000）。那么，可見部分我們看到400px，1000px的內(nèi)容中還有600px不可見。而這不可見的部分呢，正是我們通過拉動滾動條才能把這一部分顯示出來。你如果滾動條不拉動，此時scrollTop為0，如果你把滾動條拉到底，顯示出列表最下面的部分，此時，scrollTop為600?！∷詓crollTop的取值區(qū)間為[0, 600]?！∷赃@個600可以理解為滾動條可以滾動的長度。

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

首先，我們拉動滾動條，從最上面拉到最下面，變化的是scrollTop的值，而這個值是有一個區(qū)間的。
這個區(qū)間是： [0, (offsetHeight - clientHeight)]
即，滾動條拉動的整個過程的變化在 0 到 (offsetHeight – clientHeight) 范圍之內(nèi)。

1、判斷滾動條滾動到最底端： scrollTop == (offsetHeight – clientHeight)
2、在滾動條距離底端50px以內(nèi)： (offsetHeight – clientHeight) – scrollTop <= 50
3、在滾動條距離底端5%以內(nèi)： scrollTop / (offsetHeight – clientHeight) >= 0.95

如上。
如果要實現(xiàn)拉到底部自動加載內(nèi)容。只要注冊個滾動條事件：

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

以上這篇淺析jquery如何判斷滾動條滾到頁面底部并執(zhí)行事件就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論