即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

jQuery的滚动条事件

微信 剑走偏锋 19℃ 0评论
本文目录
[隐藏]

1.判断滚动条方向

Js代码 :

  1. scrollDirect: function (fn) {  

  2.     var beforeScrollTop = document.body.scrollTop;  

  3.     fn = fn || function () {  

  4.     };  

  5.     window.addEventListener(“scroll”function (event) {  

  6.         event = event || window.event;  

  7.   

  8.         var afterScrollTop = document.body.scrollTop;  

  9.         delta = afterScrollTop – beforeScrollTop;  

  10.         beforeScrollTop = afterScrollTop;  

  11.   

  12.         var scrollTop = $(this).scrollTop();  

  13.         var scrollHeight = $(document).height();  

  14.         var windowHeight = $(this).height();  

  15.         if (scrollTop + windowHeight > scrollHeight – 10) {  //滚动到底部执行事件  

  16.             fn(‘up’);  

  17.             return;  

  18.         }  

  19.         if (afterScrollTop < 10 || afterScrollTop > $(document.body).height – 10) {  

  20.             fn(‘up’);  

  21.         } else {  

  22.             if (Math.abs(delta) < 10) {  

  23.                 return false;  

  24.             }  

  25.             fn(delta > 0 ? “down” : “up”);  

  26.         }  

  27.     }, false);  

  28. }  

调用方法:

Js代码 

  1.   var upflag=1;  

  2.   var  downflag= 1;  

  3.    //scroll滑动,上滑和下滑只执行一次!  

  4. scrollDirect(function (direction) {  

  5.        if (direction == “down”) {  

  6.            if (downflag) {  

  7.                $(“.footer_wrap”).slideUp(200);  

  8.                downflag = 0;  

  9.               upflag = 1;  

  10.            }  

  11.        }  

  12.        if (direction == “up”) {  

  13.            if (upflag) {  

  14.                $(“.footer_wrap”).slideDown(200);  

  15.               downflag = 1;  

  16.                upflag = 0;  

  17.            }  

  18.        }  

  19. });  

2.

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

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

Js代码  

  1. BottomJumpPage: function () {  

  2.             var scrollTop = $(this).scrollTop();  

  3.             var scrollHeight = $(document).height();  

  4.             var windowHeight = $(this).height();  

  5.             if (scrollTop + windowHeight == scrollHeight) {  //滚动到底部执行事件  

  6.                     console.dir(“我到底部了”);  

  7.   

  8.             }  

  9.             if (scrollTop == 0) {  //滚动到头部部执行事件  

  10.             console.dir(“我到头部了”);  

  11.   

  12.             }  

  13.  }  

 

调用方法:

Js代码  

  1. $(window).scroll(BottomJumpPage);  

转载请注明:CodingBlog » jQuery的滚动条事件

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情