滾動條的監聽事件

$(function() { // js部分開始

var scrolling =false;     //判斷到底了

function isBottom() {

    var scrollTop =0;

    if ( document.documentElement  && document.documentElement.scrollTop ) {

     scrollTop = document.documentElement.scrollTop;

}else if ( document.body ) {

    scrollTop =document.body.scrollTop;//滾動條高度

}

 var clientHeight =document.documentElement.clientHeight;  //瀏覽器高度

var scrollHeight = Math.max( document.body.scrollHeight , document.documentElement.scrollHeight );  //內容區域的高度

return Math.abs(scrollTop + clientHeight - scrollHeight) <=50;   //高度差在50內可以判斷到底了
}

//判斷到頂部了

function isTop(){

    var scrollTop =0;

    if ( document.documentElement && document.documentElement.scrollTop) {

        scrollTop =document.documentElement.scrollTop;

    }  else if ( document.body) {

          scrollTop =document.body.scrollTop;

     }

     return scrollTop==0;

}

 function onFinish() {

   scrolling =false;

 }

function onScroll() {   //定義當前滾動的區域

var scrollTop =me._param.config.scroller

    ?jQuery(me._param.config.scroller).scrollTop()    //自己設置的滾動區域

    : jQuery(document).scrollTop();    //瀏覽器的滾動區域

if(scrollTop >0&& !scrolling &&isBottom()) {

    scrolling =true;

try{

    //找到當前頁面的onScroll方法

    var scrollEvent =me.control().onScroll;    //當前頁面的onScroll方法,me.control() 是當前頁面

    if( scrollEvent ) scrollEvent(onFinish,true);    //這里的true和下面的false分別是用來表示滾到底部(true)還是頂部(false)了

    else onFinish();

   }catch(e) {

        onFinish();

     }

}

if(scrollTop ==0&& !scrolling &&isTop()) {

scrolling =true;

try{

     //找到當前頁面的onScroll方法

     var scrollEvent = me.control().onScroll;

     if( scrollEvent )  scrollEvent(onFinish,false);

    else onFinish();

 }catch(e) {

     onFinish();

    }

 }

}

window.addEventListener("scroll",onScroll,false);

});

其中scrollHeight表示滾動條需要滾動的距離,即可滾動的總距離

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容