鼠标滚轮事件

开发工具与关键技术：html+js
作者： 李伙
撰写时间： 2019年1月27日

首先，要为窗口绑定一个滚轮事件。谷歌(chrome) IE等浏览器的滚轮事件为“window.onmousewheel=wheel;”；火狐(firefox)等浏览器的滚轮事件为“window.addEventListener(“DOMMouseScroll”,wheel,false);”。由于谷歌(chrome) IE 火狐(firefox)等浏览器的滚轮事件不同，因此要用到事件的监听，这样就可以在不同的浏览器执行不同的滚轮事件。具体格式如下：

    //chrome&IE
	//绑定鼠标滚轮事件
	window.onmousewheel=wheel;
	
	//firefox
	//事件监听
	if(window.addEventListener){
		window.addEventListener("DOMMouseScroll",wheel,false);
	}

绑定好滚轮事件后，就封装一个函数，其函数名要与滚轮事件的函数名一致；然后再在里面写需要执行的代码。如下：

   function wheel(ev){
		var e=ev || event;
		var b=false;
		if(e.wheelDelta){//ev.wheelDelta   chrome&IE
						 //ev.detail   firefox
			b=e.wheelDelta>0?true:false;
		}else{
			b=e.detail<0?true:false;
		}
		alert(b);
	}

由图中可知：谷歌(chrome) IE等浏览器的滚轮移动值用“wheelDelta”获取，火狐(firefox)等浏览器的滚轮移动值用“detail”获取；这样各个浏览器获取的滚轮移动值就能一致啦。这样一个简单的鼠标滚轮事件就完成啦。当然也可以加一些需要执行的代码，比如加一些动画效果等等。