鼠标滚轮事件兼容性处理【mousewheel 与 DOMMouseScroll】

火狐浏览器使用DOMMouseScroll，其他浏览器都是用mousewheel

火狐有个特殊属性event.detail，表示滚动的值

   正数：向下滚动，负数：向上滚动

其他浏览器，通过event.wheelDelta获取滚动值

正数：向上滚动，负数：向下滚动

滚动一次值120

兼容性处理示例

window.onload=function(){
	//获取dom元素
	var content = document.querySelector("#content");
	var cLiNodes = document.querySelectorAll("#content .con > li");

        //内容区中li标签下标
        var pageIndex = 0 ;
        //定时器
	var timer = 0 ;

//5.监听鼠标滚轮滚动事件.滚轮滚动时切屏，需要做浏览器兼容处理
	/*
		FF火狐使用DOMMouseScroll，其他浏览器都是用mousewheel
		FF下有个特殊属性event.detail，表示滚动的值
		event.detail	正数：向下滚动，负数：向上滚动
		其他浏览器，通过event.wheelDelta获取滚动值
		正数：向上滚动，负数：向下滚动
		滚动一次值120
	*/
	//5.1如果是火狐浏览器
        if(content.addEventListener){
		// content.addEventListener("DOMMouseScroll",fn);
		// console.log('火狐')
		//通过定制器保证一段时间内切屏效果只发生一次，防止用户滚动滑轮太快
		content.addEventListener("DOMMouseScroll",function(ev){
			ev=ev||event;

			//让fn的逻辑在DOMMouseScroll事件被频繁触发的时候只执行一次
			clearTimeout(timer);
			timer = setTimeout(function(){
				fn(ev)
			},200)
		});
	}

        //5.2其他浏览器
	// content.onmousewheel=fn ;
	//通过定制器保证一段时间内切屏效果只发生一次，防止用户滚动滑轮太快
	content.onmousewheel=function(ev){
		ev=ev||event;
		clearTimeout(timer);
		timer = setTimeout(function(){
			fn(ev)
		},200)
	};

        //5.3事件函数
	function fn(ev){
		ev=ev||event;
		var dir="";
		if(ev.wheelDelta){
			dir = ev.wheelDelta>0?"up":"down";
		}else if(ev.detail){
			dir = ev.detail<0?"up":"down";
		}

		switch (dir){
			case "up": //向上滑动，屏下标变小
			    if(pageIndex>0){
				pageIndex--;
				move(pageIndex);
			    }
			    break;
			case "down":  //向下滑动，屏下标变大
			    if(pageIndex<cLiNodes.length-1){
				pageIndex++;
				move(pageIndex);
			    }
				break;
			}
		}


}

           

参考

https://blog.csdn.net/spy19881201/article/details/38704621

https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll

https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel