jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部

Posted 2020-10-05 归尘2016

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

 

遇到问题

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

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

 

单纯判断滚动条方向

 

Js代码  

1. function scroll( fn ) {  
2.     var beforeScrollTop = document.body.scrollTop,  
3.         fn = fn || function() {};  
4.     window.addEventListener("scroll", function() {  
5.         var afterScrollTop = document.body.scrollTop,  
6.             delta = afterScrollTop - beforeScrollTop;  
7.         if( delta === 0 ) return false;  
8.         fn( delta > 0 ? "down" : "up" );  
9.         beforeScrollTop = afterScrollTop;  
10.     }, false);  
11. }  

 

 

调用方法：

Js代码  

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

 

 

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

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. crollDirect(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. });  

 

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

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

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);