使用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() });?