鼠標滾輪事件
//兼容性寫法，該函數也是網上別人寫的，不過找不到出處了，蠻好的，所有我也沒有必要修改了
//判斷鼠標滾輪滾動方向
if (window.addEventListener)//FF,火狐瀏覽器會識別該方法
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) {//IE、chrome瀏覽器使用的是wheelDelta，並且值為“正負120”
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;//因為IE、chrome等向下滾動是負值，FF是正值，為了處理一致性，在此取反處理
} else if (event.detail) {//FF瀏覽器使用的是detail,其值為“正負3”
delta = -event.detail/3;
}
if (delta)
handle(delta);
}
//上下滾動時的具體處理函數
function handle(delta) {
if (delta <0){//向下滾動
}else{//向上滾動
}
}
- IE、chrome監聽的是wheelDelta,向下滾動其值為-120；向上滾動其值為120
- FF監聽的是detail,向下滾動其值為3；向上滾動其值為-3
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('向上滾動');
}
}
參考
