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