使用jQuery判断浏览器滚动条位置的方法
项目背景
webtouch（webapp）页面，防苹果手机safari浏览器，网上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。
遇到问题
1、我一开始用swipeup和swipedown来做，发现因为有滚动条，不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势，后面的文章会介绍，欢迎关注！
2、通过上滚下滚来让底部导航显示或者因此，安卓上面的浏览器都可以，但是苹果safari会一闪一闪，原因是苹果safari自动有个弹跳效果，导致事件重复执行，解决办法是给上滚下滚一个距离，滚动到一定距离后返回是上滚还是下滚。
单纯判断滚动条方向
functionscroll(fn){
varbeforeScrollTop=document.body.scrollTop,
fn=fn||function(){};
window.addEventListener("scroll",function(){
varafterScrollTop=document.body.scrollTop,
delta=afterScrollTop-beforeScrollTop;
if(delta===0)returnfalse;
fn(delta>0?"down":"up");
beforeScrollTop=afterScrollTop;
},false);
}
调用方法：
scroll(function(direction){console.log(direction)});
以上方法手机苹果浏览器事件会跳动，解决方法及代码改进
scrollDirect:function(fn){
varbeforeScrollTop=document.body.scrollTop;
fn=fn||function(){
};
window.addEventListener("scroll",function(event){
event=event||window.event;
varafterScrollTop=document.body.scrollTop;
delta=afterScrollTop-beforeScrollTop;
beforeScrollTop=afterScrollTop;
varscrollTop=$(this).scrollTop();
varscrollHeight=$(document).height();
varwindowHeight=$(this).height();
if(scrollTop+windowHeight>scrollHeight-10){//滚动到底部执行事件
fn('up');
return;
}
if(afterScrollTop<10||afterScrollTop>$(document.body).height-10){
fn('up');
}else{
if(Math.abs(delta)<10){
returnfalse;
}
fn(delta>0?"down":"up");
}
},false);
}
调用方法：
varupflag=1;
vardownflag=1;
//scroll滑动,上滑和下滑只执行一次！
scrollDirect(function(direction){
if(direction=="down"){
if(downflag){
$(".footer_wrap").slideUp(200);
downflag=0;
upflag=1;
}
}
if(direction=="up"){
if(upflag){
$(".footer_wrap").slideDown(200);
downflag=1;
upflag=0;
}
}
});
滚动条滚动到底部和头部判断
其实我上面的函数中已经有判断，下面再列一下！看如下函数！
BottomJumpPage:function(){
varscrollTop=$(this).scrollTop();
varscrollHeight=$(document).height();
varwindowHeight=$(this).height();
if(scrollTop+windowHeight==scrollHeight){//滚动到底部执行事件
console.dir("我到底部了")；
}
if(scrollTop==0){//滚动到头部部执行事件
console.dir("我到头部了")；
}
}
调用方法：
$(window).scroll(BottomJumpPage);
判断div是否滚动到底部
上面的方法是判断滚动轴是否滚动到底部，但是有时候，我们在做滚动加载的时候，有时候也要做某个div是否滚动到底部然后加载。那么如何判断DIV的滚动轴滚动到底部呢？
这个也需要了解几个高度：
1、div的高度$("#某div").height();
2、滚动轴的高度$(#某div)[0].scrollHeight
3、滚动轴到div顶部的高度$(某div)[0].scrollTop;
书写代码如下：
$(document).ready(function(){
varnScrollHight=0;//滚动距离总长(注意不是滚动条的长度)
varnScrollTop=0;//滚动到的当前位置
varnDivHight=$("#div1").height();
$("#div1").scroll(function(){
nScrollHight=$(this)[0].scrollHeight;
nScrollTop=$(this)[0].scrollTop;
if(nScrollTop+nDivHight>=nScrollHight)
alert("滚动条到底部了");
});
});
PS:jQuery滚动条位置控制：
将div的滚动条滚动到其子元素所在的位置，方便自动定位。
varcontainer=$('div'),
scrollTo=$('#row_8');
container.scrollTop(
scrollTo.offset().top-container.offset().top+container.scrollTop()
);
//Oryoucananimatethescrolling:
container.animate({
scrollTop:scrollTo.offset().top-container.offset().top+container.scrollTop()
});?