监控滚轮滚动方向

目标：屏幕向上滚动、向下滚动后，UI做对应的响应

初期实现：

 1     var scrollFunc=function(e){

 2        3       var data=0;

 4       e = e || window.event;

 5       if(e.wheelDelta){//IE/Opera/Chrome

 6         data = e.wheelDelta;

 7       }else if(e.detail){//Firefox

 8         data = e.detail;

 9       }

10       cb && cb(data);

11     }

12     /*注册事件*/

13     if (document.addEventListener) {

14       document.addEventListener('DOMMouseScroll',scrollFunc,false);

15     }

16     window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome/Safari

在PC端浏览器是可以获得滚动的方向了。

但是有一个Bug：进入Page，第一个滚动操作就是向下滚时，是无法触发的事件。

但这仅仅是在PC端，手机端则需要另辟蹊径：

 1     var sX = sY = eX = eY = 0;

 2     function touchFun(event){

 3       event = event || window.event;

 4       event.preventDefault();

 5       var _data = _getTouchPointer(event);

 6       

 7       switch (event.type) {

 8         case 'touchstart':

 9           sX = _data.x;

10           sY = _data.y;

11           break;

12         case 'touchmove':

13           eX = _data.x;

14           eY = _data.y;

15           //alert(':'+ eX +'eY:'+ eY);

16           break;

17         case 'touchend':

18           var a = sX - eX,

19               b = sY - eY,

20               data = {'scrollX':a, 'scrollY':b};

21           if (b > 0 && Math.abs(b) > Math.abs(a)) {

22             data.point = 'up';

23           } else if (b < 0 && Math.abs(b) > Math.abs(a)){

24             data.point = 'down';

25           } else if (a < 0 && Math.abs(a) > Math.abs(b)){

26             data.point = 'right';

27           } else if (a > 0 && Math.abs(a) > Math.abs(b)){

28             data.point = 'left';

29           }

30           cb && cb(data);

31           break;

32       }

33     }

34 

35     /* 获得坐标 */

36     function _getTouchPointer(event){

37       var touchX = 0,

38           touchY = 0;

39       // 如果这个元素的位置内只有一个手指的话

40       if (event.targetTouches.length == 1) {

41         var touch = event.targetTouches[0];

42         touchX = touch.pageX;

43         touchY = touch.pageY;

44       }

45       return {'x' : touchX, 'y' : touchY };

46     }

47     

48     el.addEventListener('touchstart', touchFun, false);

49     el.addEventListener('touchmove', touchFun, false);

50     el.addEventListener('touchend', touchFun, false);

 

代码比较糙，不优雅，求喷。