美文网首页
JS检测屏幕(鼠标或触屏)滚动方向

JS检测屏幕(鼠标或触屏)滚动方向

作者: Kou_Guandong | 来源:发表于2016-07-26 16:30 被阅读123次

原理:window/document对象的mousewheel事件

var scrollFunc = function (e) {    
var direct = 0;    
e = e || window.event;    
if (e.wheelDelta) {  
//判断浏览器IE,谷歌滑轮事件        
if (e.wheelDelta > 0) { //当滑轮向上滚动时            
console.log("滑轮向上滚动");        
}       
 if (e.wheelDelta < 0) { //当滑轮向下滚动时           
console.log("滑轮向下滚动");        }    
} 
else if (e.detail) {  //Firefox滑轮事件       
 if (e.detail> 0) { //当滑轮向上滚动时            
console.log("滑轮向上滚动");        }        
if (e.detail< 0) { //当滑轮向下滚动时            
console.log("滑轮向下滚动");        }   
 }
};
//给页面绑定滑轮滚动事件if (document.addEventListener) {
    document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法
window.onmousewheel = document.onmousewheel = scrollFunc;

相关文章

  • JS检测屏幕(鼠标或触屏)滚动方向

    原理:window/document对象的mousewheel事件

  • js,jq获取屏幕各种宽高尺寸

    js jq 检测window滚动到屏幕头部底部 检测div滚动到屏幕头部底部 解绑滚动监听 参考博文:JS,Jqu...

  • 17_day 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 前端的整屏滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

网友评论

      本文标题:JS检测屏幕(鼠标或触屏)滚动方向

      本文链接:https://www.haomeiwen.com/subject/worbjttx.html