js判断滚动条滚动方向

大 | 中 | 小
[不指定 2016/10/25 10:09 | by 刘新修 ]
JavaScript代码
  1. //第一种写法  
  2.         var a;  
  3.             
  4.         function scroll( fn ) {  
  5.             var beforeScrollTop = document.body.scrollTop,  
  6.                 fn = fn || function() {};  
  7.             window.addEventListener("scroll", function() {  
  8.                 var afterScrollTop = document.body.scrollTop,  
  9.                     delta = afterScrollTop - beforeScrollTop;  
  10.                 if( delta === 0 ) return false;  
  11.                 fn( delta > 0 ? "down" : "up" );  
  12.                 beforeScrollTop = afterScrollTop;  
  13.             }, false);  
  14.         }  
  15.         scroll(function(direction) {  
  16.             // console.log(direction);  
  17.             a =  direction;  
  18.         });  
  19.         // 第二种写法  
  20.         var a;  
  21.             
  22.         function scroll( fn ) {  
  23.             var beforeScrollTop = document.body.scrollTop,  
  24.                 fn = fn || function() {};  
  25.             window.addEventListener("scroll", function() {  
  26.                 var afterScrollTop = document.body.scrollTop,  
  27.                     delta = afterScrollTop - beforeScrollTop;  
  28.                 if( delta === 0 ) return false;  
  29.                 a = fn( delta > 0 ? "down" : "up" );  
  30.                 beforeScrollTop = afterScrollTop;  
  31.             }, false);  
  32.         }  
  33.         scroll(function(direction) {  
  34.             // console.log(direction);  
  35.             return direction;  
  36.         });  
  37.         // 第三种写法-----=是执行完事件后的回调函数  
  38.   
  39.         var a;  
  40.         var beforeScrollTop = document.body.scrollTop,  
  41.             fn = fn || function() {};  
  42.         window.addEventListener("scroll", function() {  
  43.             var afterScrollTop = document.body.scrollTop,  
  44.                 delta = afterScrollTop - beforeScrollTop;  
  45.             if( delta === 0 ) return false;  
  46.             fn( delta > 0 ? "down" : "up" );  
  47.             beforeScrollTop = afterScrollTop;  
  48.         }, false);  
  49.         function fn(direction) {  
  50.             // console.log(direction);  
  51.             a = direction;  
  52.         };  
  53.   
  54.         window.onscroll=function(){  
  55.             console.log(a);  
  56.         }  
Tags: ,
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4282)