本文主要是介绍鼠标滚轮滚动事件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 只要在鼠标滚轮滚动的时候就会触发 不论是否有滚动条
这篇关于鼠标滚轮滚动事件wheel的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
