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

云簪轻拨

于 2019-11-01 22:53:13 发布

阅读量401

点赞数

分类专栏： H5 文章标签： H5 javascript 浏览器兼容

本文链接：https://blog.youkuaiyun.com/qq_42600574/article/details/102865824

版权

本文介绍了在H5中处理鼠标滚轮事件的浏览器兼容性问题，重点讲解了Firefox的DOMMouseScroll事件和其它浏览器的mousewheel事件。Firefox的event.detail属性用于判断滚动方向，而其他浏览器则通过event.wheelDelta。滚动一次的wheelDelta值为120。文中提供了兼容性处理的示例，并引用了相关开发者文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

火狐浏览器使用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获取滚动值
		正数：向上滚动，负数：向下滚动
		滚动一次值

最低0.47元/天解锁文章