<!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>
原标题:滑动滚轮放大缩小
关键词: