JS实现鼠标滑轮滚动事件的跨浏览器兼容代码
作者:白露时间:2026-10-28 12:39:33浏览:166
本文提供一段JavaScript代码,用于实现鼠标滚轮滚动事件的统一处理。通过判断wheelDelta和detail属性,兼容IE、Opera、Chrome及Firefox浏览器,分别处理向上和向下滚动逻辑,确保在不同内核浏览器中滚动行为一致。
JS实现鼠标滑轮滚动事件的跨浏览器兼容代码
实现鼠标滚动滚轮事件:
<script type="text/javascript">
var scrollFunc=function(e){
e=e || window.event;
if(e.wheelDelta){//IE/Opera/Chrome
if(e.wheelDelta==120)
{
//向上滚动事件
alert(e.wheelDeta +"向上");
}else
{
//向上滚动事件
alert(e.wheelDeta +"向上");
}
}else if(e.detail){
//Firefox
if(e.detail==-3) {
//向上滚动事件<br>
alert(e.detail +"向上");
}else {
//向下滚动事件<br>
alert(e.detail +"向下 ");
}
}
};
if(document.addEventListener){
//adding the event listerner for Mozilla
document.addEventListener("DOMMouseScroll" ,scrollFunc, false);
}
//IE/Opera/Chrome
window.onmousewheel=document.onmousewheel=scrollFunc;
</script>
作者最新文章
AOS.js 动画不触发怎么办?排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成:分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南:Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19
