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

74 阅读 0 评论 49 点赞

我是靠谱客的博主纯真鸡翅，最近开发中收集的这篇文章主要介绍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('向上滚动');
}
}