js 滾動條滾動到底部觸發事件

一、前言

　　在開發項目時，常常需要展示大量數據。如果全部顯示出來，數據相對少時，看不出來什么不同，如果數據很多時，一次請求全部顯示，這就相當可怕了。

　　面對這種問題，PC里使用了分頁效果，將數據分成一頁頁，換頁時請求當前頁數據，

　　而屏幕較小的移動端，分頁就不怎么好看了，常用的方法是滾動到底部時繼續加載數據

　　滾動加載其實也是一種分頁，只是不使用頁碼而已。

 

二、正文

（一）、滾動事件的效果和原理

效果： 滾動到當前頁的底部時，會轉圈圈緩沖加載下一頁的數據，完成后滾動區域和內容增加，以此類推；

原理： 3個數據（滾動視窗高度，滾動內容總高度， 當前已滾距離），

　　　1個臨界（滾動內容總高度 = 當前已滾距離 + 滾動視窗高度）

 

　1.獲取滾動視窗高度：$(window).height()；（如果滾動區域不是整個頁面，使用$('slector').height()）

    2.獲取滾動內容總高度：$(this).get(0).scrollHeight

    3.當前已滾距離：$(this).scrollTop()

 

（二）、scroll滾動事件：$(selector).scroll(function() {})

 function scrollFunc(){ $("#container").scroll(function(){ var $this =$(this), viewH =$(this).height(),//可見高度
        contentH =$(this).get(0).scrollHeight,//內容高度
        scrollTop =$(this).scrollTop();//滾動高度
        if(contentH = viewH + scrollTop) { //當滾動到底部時，
 } if(contentH - viewH - scrollTop <= 100) { //當滾動到距離底部100px時,
 } if(scrollTop/(contentH -viewH) >= 0.95){ //當滾動到距離底部5%時
        // 這里加載數據..
 } }); }

 

 

三、結語

。。。