JS总结笔记：鼠标滚动事件DOMMouseScroll和mousewheel

鼠标滚动事件

鼠标滚动事件在不同的浏览器是有些区别的，五大浏览器（IE、Opera、 Safari、Firefox、Chrome）主要体现在Firefox与其他四个浏览器的区别

滚轮事件的区别

Firefox的滚轮事件使用 DOMMouseScroll
其他浏览器的滚轮事件使用 mousewheel

捕获滚轮信息的区别

滚动事件触发时Firefox使用detail属性捕捉滚轮信息，其他的浏览器使用wheelDelta

绑定事件

Firefox可以使用addEventListener方法绑定DomMouseScroll事件

elem.addEventListener(‘DOMMouseScroll’, func, false);

其他的主流浏览器可以使用传统的事件绑定模型。但不要使用IE专有的attachEvent方法，其他主流浏览器并不识别微软的这个方法。

window.onmousewheel=document.onmousewheel=func;		//IE/Opera/Chrome

滚动值的区别

♥IE 鼠标滚轮向上滚动是120，向下滚动是-120

♥Opera 鼠标滚轮向上滚动是120，向下滚动是-120

♥Chrome 鼠标滚轮向上滚动是120，向下滚动是-120

♥Safari 鼠标滚轮向上滚动是360，向下滚动是-360

♥Firefox 鼠标滚轮向上滚动是-3，向下滚动是3

添加滚轮事件

①IE/Opera属于同一类型，使用attachEvent即可添加滚轮事件：

//IE注册事件
if(document.attachEvent){   
   document.attachEvent('onmousewheel',scrollFunc);  
   //scrollFunc是监听到滚动事件后执行的方法
}  

②Firefox使用addEventListener添加滚轮事件：

//Firefox注册事件  
if(document.addEventListener){   
  document.addEventListener('DOMMouseScroll',scrollFunc,false);   
  //flase指的是事件在冒泡阶段执行
} 

③IE/Opera/Chrome可使用HTML DOM方式添加事件：

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

综合添加滚轮事件

if(document.addEventListener){   
  document.addEventListener('DOMMouseScroll',scrollFunc,false);   
}
window.onmousewheel=document.onmousewheel=scrollFunc;	//IE/Opera/Chrome 

滚轮信息

判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、 Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下

JS写法

//兼容性写法，该函数也是网上别人写的
//判断鼠标滚轮滚动方向
if (window.addEventListener){//火狐浏览器会识别该方法
    window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;//W3C
//统一处理滚轮滚动事件
function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {//获取事件对象中wheelDelta的值，这里表示向上滑动
    	//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
        delta = event.wheelDelta/120; 
        if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
    } else if (event.detail) {//获取事件对象中detail的值，这里表示向下滑动
    	//火狐浏览器使用的是detail,其值为“正负3”
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
}
//上下滚动时的具体处理函数
function handle(delta) {
        if (delta <0){//向下滚动
            
        }else{//向上滚动
            
        }
    }

jQuery写法

$(document).on('mousewheel DOMMouseScroll', onMouseScroll);
function onMouseScroll(e){
    e.preventDefault();
    var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;
    var delta = Math.max(-1, Math.min(1, wheel) );
    if(delta<0){//向下滚动
        console.log('向下滚动');
    }else{//向上滚动
        console.log('向上滚动');
    }    
}

注意：鼠标滚轮滚动一下产生数值是非常快的，所以为了更好的控制滚动事件。笔者建议添加防抖动或者防节流的js优化来更好的控制滚轮事件

参考文章
https://www.cnblogs.com/tanxiang6690/p/6904440.html
https://www.cnblogs.com/caoruiy/p/4694498.html