監控滾輪滾動方向

標籤：style   blog   color   io   ar   art   div   cti   代碼   

目標：螢幕向上滾動、向下滾動後，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);

 

代碼比較糙，不優雅，求噴。

 

監控滾輪滾動方向