DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS實現判斷滾動條滾到頁面底部並執行事件的方法
JS實現判斷滾動條滾到頁面底部並執行事件的方法
編輯:關於JavaScript     

需要了解三個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) 范圍之內。

1、判斷滾動條滾動到最底端: scrollTop == (offsetHeight – clientHeight)
2、在滾動條距離底端50px以內: (offsetHeight – clientHeight) – scrollTop <= 50
3、在滾動條距離底端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時,加載新內容
        // 這裡加載數據..
        }
     });
}

PS:這裡再為大家推薦一款關於JS事件的在線查詢工具,歸納總結了JS常用的事件類型與函數功能:

javascript事件與功能說明大全:

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved