滚动条的监听事件

$(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表示滚动条需要滚动的距离,即可滚动的总距离

你可能感兴趣的:(滚动条的监听事件)