自制的mousewheel插件

来源：互联网发布：mac idea 错误提示编辑：程序博客网时间：2024/05/17 07:09

看到很多HTML5网站都有全屏的滚动特效，是的，很炫吧，不仅仅是HTML5，其实更重要的是他们基于fullpage这个插件，我本人第一次看到就决定使用原生JS探索下去除插件的搞法，呵呵，其实并不难，只是兼容性确实有点啃爹，刚出炉，或许实际的复杂应用中会出Bug，在此分享，与君共勉！当你想自定义局部滚动条或做个超炫的全屏滚动时，相信会助你一臂之力！

<script>var mousewheel={isFireFox:function(){return navigator.userAgent.toLowerCase().indexOf('firefox')!=-1;},getFFWheelData:function(e){return e.detail;},getFFElseWheelData:function(e){return e.wheelDelta;},wheel:function(obj,fn){if(this.isFireFox()){return obj.addEventListener('DOMMouseScroll',fn,false);}else{return obj.onmousewheel=fn;}},start:function(o){var self=this;var obj=o.obj||document;var onwheelup=o.onwheelup;var onwheeldown=o.onwheeldown;this.wheel(obj,function(e){var e=window.event||e;var FFwheelData=self.getFFWheelData(e);var notFFwheelData=self.getFFElseWheelData(e);(FFwheelData==3||notFFwheelData==120)&&onwheelup&&onwheelup();        (FFwheelData==-3||notFFwheelData==-120)&&onwheeldown&&onwheeldown();e.preventDefault()?e.preventDefault():e.returnValue=false;})}}window.onload=mousewheel.start({onwheelup:function(){alert('up wheel')},onwheeldown:function(){alert('down wheel');}});</script>

0 0