jQuery技术

jquery(js)判断页面滚动条(scroll)是向上滚还是向下滚方向判断

字号+ 作者:H5之家 来源:H5之家 2017-06-18 10:00 我要评论( )

webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。遇到问题1、我一...

webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。

  遇到问题

1、我一开始用swipeup和swipedown来做,发现因为有滚动条,不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势,后面的文章会介绍,欢迎关注!

2、通过上滚下滚来让底部导航显示或者因此,安卓上面的浏览器都可以,但是苹果safari会一闪一闪,原因是苹果safari自动有个弹跳效果,导致事件重复执行,解决办法是给上滚下滚一个距离,滚动到一定距离后返回是上滚还是下滚。

  单纯判断滚动条方向

 

Js代码  

 

 

调用方法:

Js代码  

  • scroll(function(direction) { console.log(direction) });  
  •  

     

    以上方法手机苹果浏览器事件会跳动,解决方法及代码改进

    Js代码  

     

    调用方法:

    Js代码  

      滚动条滚动到底部和头部判断

    其实我上面的函数中已经有判断,下面再列一下!看如下函数!

    Js代码  

     

    调用方法:

    Js代码  

  • $(window).scroll(BottomJumpPage); 
  • 本文属转载文章,并不能保证完全正确,只供学习交流参考,版权归原作者所有。如果您认为有侵犯权利等不和法行为,请联系我们及时改正。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • jquery 滚动条高度|jquery 获取页面和滚动条的高度

      jquery 滚动条高度|jquery 获取页面和滚动条的高度

      2017-04-12 17:00

    • jquery ui dialog 解决滚动条方法

      jquery ui dialog 解决滚动条方法

      2017-04-03 13:02

    • jquery滚动条插件slimScroll

      jquery滚动条插件slimScroll

      2017-02-28 09:03

    • iframe应用技巧:保留垂直滚动条去掉水平滚动条

      iframe应用技巧:保留垂直滚动条去掉水平滚动条

      2017-02-06 12:01

    网友点评