快捷導(dǎo)航

JS實(shí)現(xiàn)判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件的方法

更新時(shí)間：2014年12月18日 11:57:06 投稿：junjie

這篇文章主要介紹了JS實(shí)現(xiàn)判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件的方法,本文先是分析了需求以及必備知識(shí),然后給出實(shí)現(xiàn)代碼,需要的朋友可以參考下

需要了解三個(gè)dom元素，分別是：clientHeight、offsetHeight、scrollTop。

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

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

scrollTop：這個(gè)是什么呢？他可以理解為滾動(dòng)條可以滾動(dòng)的長(zhǎng)度。

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

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

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

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

如上。

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

復(fù)制代碼代碼如下:

scrollBottomTest =function(){

     $("#contain").scroll(function(){

         var $this =$(this),

         viewH =$(this).height(),//可見高度

         contentH =$(this).get(0).scrollHeight,//內(nèi)容高度

         scrollTop =$(this).scrollTop();//滾動(dòng)高度

        //if(contentH - viewH - scrollTop <= 100) { //到達(dá)底部100px時(shí),加載新內(nèi)容

        if(scrollTop/(contentH -viewH)>=0.95){ //到達(dá)底部100px時(shí),加載新內(nèi)容

        // 這里加載數(shù)據(jù)..

        }

     });

}

PS：這里再為大家推薦一款關(guān)于JS事件的在線查詢工具，歸納總結(jié)了JS常用的事件類型與函數(shù)功能：

javascript事件與功能說明大全：

http://tools.jb51.net/table/javascript_event

您可能感興趣的文章: