首页 > 代码库 > 监控滚轮滚动方向
监控滚轮滚动方向
目标：屏幕向上滚动、向下滚动后，UI做对应的响应
初期实现：
1 var scrollFunc=function(e){ 2 3 var data=http://www.mamicode.com/0; 4 e = e || window.event; 5 if(e.wheelDelta){//IE/Opera/Chrome 6 data =http://www.mamicode.com/ e.wheelDelta; 7 }else if(e.detail){//Firefox 8 data =http://www.mamicode.com/ 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 =http://www.mamicode.com/ _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 = http://www.mamicode.com/{‘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);
代码比较糙，不优雅，求喷。
监控滚轮滚动方向
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。