<!doctype html> <html> <head> <meta charset="utf-8"> <title>标题</title> <meta name="keywords" content=""> <meta name="description" content=""> <style> *{margin:0; padding:0; list-style:none;} body{ height: 2000px; } #box{ width: 200px; height: 200px; background: green; } </style> </head> <body> <div id="box"></div> <script> var box=document.getElementById('box'); var str=window.navigator.userAgent.toLowerCase(); if (str.indexOf('firefox')!=-1) {//火狐浏览器 box.addEventListener('DOMMouseScroll',function (event){ // event.preventDefault();//阻止窗口默认的滚动事件 // console.log(event.detail);//前滚-3 if (event.detail<0) { console.log('前滚'); box.style.width=box.offsetWidth+20+'px'; box.style.height=box.offsetHeight+20+'px'; }; if (event.detail>0) { console.log('后滚'); box.style.width=box.offsetWidth-20+'px'; box.style.height=box.offsetHeight-20+'px'; }; return false;//阻止默认事件 },false); } else{//非火狐浏览器 box.onmousewheel=function (ev){ var e=ev||window.event; /*if (e.preventDefault) { e.preventDefault(); } else{ e.returnValue=false; };*/ // console.log(e); // console.log(e.wheelDelta);//前滚120 if (e.wheelDelta>0) { console.log('前滚'); box.style.width=box.offsetWidth+20+'px'; box.style.height=box.offsetHeight+20+'px'; }; if (e.wheelDelta<0) { console.log('后滚'); box.style.width=box.offsetWidth-20+'px'; box.style.height=box.offsetHeight-20+'px'; }; return false;//阻止默认事件 } }; </script> </body> </html>