原生JS绑定滑轮滚动事件，兼容浏览器

最新推荐文章于 2024-06-23 14:12:12 发布

_李大爷_

最新推荐文章于 2024-06-23 14:12:12 发布

阅读量1.2k

点赞数

分类专栏： JavaScript进阶文章标签： javascript 事件滚动兼容性

本文链接：https://blog.csdn.net/liyi109030/article/details/35784877

版权

本文介绍如何使用原生JavaScript绑定滑轮滚动事件，以兼容不同浏览器。通过`document.addEventListener && !document.attachEvent`区分IE，并针对Firefox的`DOMMouseScroll`事件进行处理。同时注意，在非IE浏览器中事件名不加`on`，而在IE中需加`on`前缀。

摘要由CSDN通过智能技术生成

滑轮滚动页面的事件在网页特效中进场遇到，但是在不同浏览器下的实现方式又不同。下面我实现的方法，兼容常见浏览器。

function  getData(event){
				var e = event || window.event;
				//获取滚动距离(FF每次滚动 data为3或者-3，其他为120或者-120)
				var data = e.detail || e.wheelDelta;	
				alert(data);
			}
			
			//IE之外的绑定事件方法
			if(document.addEventListener && !document.attachEvent)
			{
				document.addEventListener('mousewheel',getData);
				//FF绑定滚动事件
				document.addEventListener('DOMMouseScroll',getData);
			}
			//IE
			else if(document.attachEvent && !document.addEventListener){
				document.attachEvent('onmousewheel',getData);
			}else{
				window.onmousewheel = getData;
			}

代码中值得注意的地方：