鼠标滚轮滚动事件wheel

鼠标得滚动事件wheel

鼠标的滚轮事件主要有两种:

• onmousewheel（firefox不支持）
• DOMMouseScroll（只有firefox支持）

wheel 的事件对象得属性：

deltaY、detail、wheelDelta ,deltaMode detail

deltaX，鼠标滚轮左右摆动，本属性是只读的。 负值，向左；正值，向右。（正负方向，跟系统的x坐标保持一致。）
deltaY，鼠标滚轮上下滚动，只读。负值，向上；正值，向下。
deltaMode，属性返回一个数字，表示滚动值 （deltaX，deltaY，deltaZ） 的长度单位。
wheelDelta, 属性返回一个数字 正数表示向上滚动 ,负数表示向下滚动
detail 属性返回一个数字 在firefox中 正数表示向下滚动 ,负数表示向上滚动 与wheelDelta相反

如何判断鼠标滚轮得滚动方向得兼容写法

function mouseWheel(e) {
        e = e || window.event;
        console.log(e);
	    if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
		    if (e.wheelDelta > 0) {
			    alert("滑轮向上滚动");
			    console.log(e.wheelDelta)
			    console.log(e.deltaMode)
			    console.log(e.detail)
		    }
		    if (e.wheelDelta < 0) { 
		        alert("滑轮向下滚动");
		        console.log(e.wheelDelta)
		    }
	    } else if (e.detail) {  //Firefox滑轮事件
		    if (e.detail> 0) {
			    alert("滑轮向下滚动");
			    console.log(e.detail)
		    }
		    if (e.detail< 0) { 
				alert("滑轮向上滚动");
				console.log(e.detail)
		    }
	    }
}
//给页面绑定滑轮滚动事件
//其他浏览器
document.onmousewheel = mouseWheel;
//火狐使用DOMMouseScroll绑定
document.addEventListener("DOMMouseScroll", mouseWheel)

scroll事件和wheel事件区别

onscroll 在滚动条滚动的时候被触发。
onscroll 触发可以有多种方式，只要可以让滚动条发生滚动（X方向或Y方向）都可以触发该事件
onscroll 滚动条不存在（容器的内容小于容器的大小）或者手动隐藏（添加样式overflow:hidden）
就不会被触发
onwheel 只要在鼠标滚轮滚动的时候就会触发 不论是否有滚动条