欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js监听鼠标的滚轮滚动事件教程

程序员文章站 2022-05-28 21:26:51
不同的有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和dommousescroll(只有firefox支持),关于这两个事件这里不做详述,想要了解...

不同的有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和dommousescroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和dommousescroll事件。

具体实现:1. 需要添加事件监听,代码如下:兼容firefox采用addeventlistener监听

windowaddmousewheel();
	function windowaddmousewheel() {
	    var scrollfunc = function (e) {
	        e = e || window.event;
	    if (e.wheeldelta) {  //判断浏览器ie,谷歌滑轮事件
		    if (e.wheeldelta > 0) { //当滑轮向上滚动时
			    alert("滑轮向下滚动");
		    }
		    if (e.wheeldelta < 0) { //当滑轮向下滚动时
		        alert("滑轮向上滚动");
		    }
	    } else if (e.detail) {  //firefox滑轮事件
		    if (e.detail> 0) { //当滑轮向上滚动时
			    alert("滑轮向下滚动");
		    }
		    if (e.detail< 0) { //当滑轮向下滚动时
			alert("滑轮向上滚动");
		    }
	    }
	};
				    //给页面绑定滑轮滚动事件
	if (document.addeventlistener) { //火狐使用dommousescroll绑定
		document.addeventlistener('dommousescroll', scrollfunc, false);
	}
					//其他浏览器直接绑定滚动事件
	window.onmousewheel = document.onmousewheel = scrollfunc;
	}

判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(ie、opera、safari、firefox、chrome)中firefox 使用detail,其余四类使用wheeldelta;两者只在取值上不一致,代表含义一致,detail与wheeldelta只各取两个 值,detail只取±3,wheeldelta只取±150,其中正数表示为向下,负数表示向上