鼠标滚轮事件有兼容性的问题,主要是firfox和其他浏览器的差异,以下就这两种情况分开说明:
其他浏览器
事件名称: mousewheel
事件对象相关属性: event.wheelDelta
- 向上: 120
- 向下: -120
firfox
事件名称: DOMMouseScroll
事件对象相关属性: event.detail
- 向上: -3
- 向下: 3
判断滚动方向
可以看到在firfox和其他浏览器中,代表向上还是向下滚动的值的数值不同,而且正负也不同。
我们可以使用boolean值代表方向,向上为true, 向下为false。
function onMouseScroll(e){
var isUp = true;
if(e.wheelDelta && e.wheelDelta<0 || e.detail>0 ){
isUp = false;
}
}