鼠标滚轮事件onmouewheel

92 阅读 0 评论 61 点赞

我是靠谱客的博主安详自行车，最近开发中收集的这篇文章主要介绍鼠标滚轮事件onmouewheel，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

鼠标滚轮事件onmouewheel

1. onmouewheel

事件触发条件：当鼠标滚轮向上或者向下滚动时

用法：

document.onmousewheel = function() {

}

兼容性问题：

IE 和 chrome 都支持 onmouewheel , 火狐浏览器不支持，只支持自己的 DOMMouseScroll，而且火狐浏览器绑定事件只能使用dom2级绑定事件

document.addEventListener("DOMMouseScroll", function() {
	console.log(222)
})

2. onmouewheel事件中获取鼠标滚动方向

兼容性问题：

IE 和 chrome都支持event.wheelDelta,火狐浏览器不支持，只支持自己的 event.detail

用法：

① IE 和 Chrome ：使用event.wheelDelta 查看鼠标滚轮方向

向下滚动: 为负一般是-120的倍数 倍数表示速度

向上滚动: 为正一般是120的倍数 倍数表示速度

② 火狐浏览器：使用event.detail查看鼠标滚轮方向

向下滚动: 为正一般是3的倍数倍数表示速度

向上滚动: 为负一般是-3的倍数倍数表示速度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		//IE和 Chrome浏览器的滚轮方向属性event.wheelDelta
		//向下  是 -120的倍数   向上  是 120的倍数
		document.onmousewheel = function (e) {
			var e = e || window.event;
			console.log(e.wheelDelta);
		}
		//火狐浏览器的滚轮方向属性event.detail
		// 向下  是 3的倍数   向上  是 -3的倍数
		document.addEventListener("DOMMouseScroll", function (e) {
			console.log(e.detail);
		},false)
	</script>
</body>
</html>

总结：

	鼠标滚轮事件	用法
IE和Chrome浏览器	onmousewheel	dom.onmousewheel = function(){ }
火狐浏览器	DOMMouseScroll	dom.addEventListener("DOMMouseScroll",function(){ },false)

获取鼠标滚轮方向

返回值

IE和Chrome浏览器

event.wheelDelta

向上滚动：为正 120的倍数

向下滚动：为负 -120的倍数

火狐浏览器

event.detail

向上滚动：为负 -3的倍数

向下滚动：为正 3的倍数

onmousewheel 和 onscroll 区别

1. onmousewheel

onmousewheel 该事件发生在鼠标滚轮滚动时，火狐中，使用DOMMouseScroll跟其细节事件代替。注意：onmousewheel和DOMMouseScroll事件，在没有滚动条或者内容没有被滚动的时候也会发生，意思是只要鼠标滚轮动不管页面动不动。如果你是想一个元素内容滚动后接受一个通知的话，使用onscroll事件。

onmousewheel的默认行为是滚动条滚动如果想鼠标滚动做一些事情，可以阻止默认行为，阻止滚动条滚动，这样onscroll事件不会触发

2. onscroll

onscroll 事件发生在元素内容滚动的时候，也包括键盘上下键，载入也可触发。事件仅仅在有滚动条时发生，使用overflow属性为元素创建一个滚动条。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body style="height: 5000px">
	<script type="text/javascript">
		// onmousewheel 和 onscroll方法
		// onmousewheel 该事件发生在鼠标滚轮滚动时，火狐中，使用DOMMouseScroll跟其细节事件代替。注意：onmousewheel和DOMMouseScroll事件，在没有滚动条或者内容没有被滚动的时候也会发生，意思是只要鼠标滚轮动不管页面动不动。如果你是想一个元素内容滚动后接受一个通知的话，使用onscroll事件。
		// onmousewheel的默认行为是滚动条滚动 如果想鼠标滚动做一些事情，可以阻止默认行为，阻止滚动条滚动，这样onscroll事件不会触发
		// onscroll 事件发生在元素内容滚动的时候，也包括键盘上下键，载入也可触发。事件仅仅在有滚动条时发生，使用overflow属性为元素创建一个滚动条。

		// 统一方式
		bindEvent(document, "mousewheel", function(e) {
			var e = e || window.event;
			console.log(123)
			// e.preventDefault();
			if (e.preventDefault) {
				e.preventDefault();
			} else {
				e.returnValue = false;
			}
		})
		document.onscroll = function (e) {
			console.log("scroll");
		}
		function bindEvent (dom,type,handler,boolean) {
			//兼容鼠标滚轮事件
			var isFirefox = window.navigator.userAgent.indexOf("Firefox") === -1 ? false : true; 

			if(isFirefox && type=="mousewheel"){
				dom.addEventListener("DOMMouseScroll",handler,boolean)
				return;
			}


			if(dom.addEventListener){
				//高级浏览器
				dom.addEventListener(type, handler, boolean)
			} else if (dom.attachEvent) {
				//IE浏览器高版本
				dom.attachEvent("on"+type,handler)
			} else {
				dom["on"+type] = handler;
			}
		}
	</script>
</body>
</html>