重写鼠标滚轮事件阻止滚动条冒泡

原文地址

遇到一个问题，页面和子页面同时存在滚动条，在鼠标滚轮时候，会冲突：子页滚动条到顶部或者底部时候会继续冒泡，去滚动父节点的滚动条。

解决这个问题，必需要拦截鼠标滚轮事件，重写滚动事件，这时候又出现了烦人的浏览器兼容问题：

1、不同浏览器标滚轮事件不一样：FF下是DOMMouseScroll，其它onmousewheel。

2、事件阻止方式不一样：FF只支持e.preventDefault()，IE只支持e.returnValue=false/return false;

3、重写滚动事件就是根据获取到的滚轮返回数值来动态改变scrollTop，FF下：e.detail属性，向上为-3，向下为+3;其它:e.wheelDelta，向上为+120，向下-120。

根据以上几条有以下解决方法：

  
  

   
   <
   
   ul 
   
   id
   
   ="ullist"
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   
    
   
   <
   
   li
   
   >
   
   fdsffffffff
   
   </
   
   li
   
   >
   
   

   
   </
   
   ul
   
   >
  
  

  
  

   
   <
   
   script type
   
   =
   
   "
   
   text/javascript
   
   "
   
    src
   
   =
   
   "
   
   jquery-1.5.2.min.js
   
   "
   
   ><
   
   /
   
   script>
   
   

   
   <
   
   script type
   
   =
   
   "
   
   text/javascript
   
   "
   
   >
   
   

   
   var
   
    ullist 
   
   =
   
    document.getElementById(
   
   "
   
   ullist
   
   "
   
   );

   
   if
   
   (jQuery.browser.mozilla){
    ullist.addEventListener(
   
   '
   
   DOMMouseScroll
   
   '
   
   ,
   
   function
   
   (e){
        ullist.scrollTop 
   
   +=
   
    e.detail 
   
   >
   
    
   
   0
   
    
   
   ?
   
    
   
   60
   
    : 
   
   -
   
   60
   
   ;   
        e.preventDefault();   
    },
   
   false
   
   );   
}
   
   else
   
   {   
    ullist.onmousewheel 
   
   =
   
    
   
   function
   
   (e){   
        e 
   
   =
   
    e 
   
   ||
   
    window.event;   
        ullist.scrollTop 
   
   +=
   
    e.wheelDelta
   
   >
   
   0
   
   ?-
   
   60
   
   :
   
   60
   
   ;   
        e.returnValue 
   
   =
   
    
   
   false
   
     
    }
}

   
   <
   
   /
   
   script> 
  
  

另一个脚本

  
  

   
   <
   
   script type
   
   =
   
   "
   
   text/javascript
   
   "
   
   >
   
   

   
   var
   
    SmoothScroll 
   
   =
   
    
   
   function
   
    (win, opt) {   
    
   
   //
   
   操作对象   
   
   

   
       
   
   this
   
   .win 
   
   =
   
    win; 
    
   
   //
   
   每次滚动位移 
   
   

   
       
   
   this
   
   .step 
   
   =
   
    opt 
   
   ?
   
    opt.step 
   
   ||
   
    
   
   180
   
    : 
   
   180
   
   ;   
    
   
   //
   
   缓动系数   
   
   

   
       
   
   this
   
   .f 
   
   =
   
    opt 
   
   ?
   
    opt.f 
   
   ||
   
    
   
   0.1
   
    : 
   
   0.1
   
   ;   
    
   
   this
   
   .interval 
   
   =
   
    
   
   10
   
   ;   
    
   
   this
   
   .intervalID 
   
   =
   
    
   
   null
   
   ;   
    
   
   this
   
   .isFF 
   
   =
   
    navigator.userAgent.toLowerCase().indexOf(
   
   "
   
   firefox
   
   "
   
   ) 
   
   >=
   
    
   
   0
   
   ;   
    
   
   this
   
   .upOrDown 
   
   =
   
    
   
   ""
   
   ;   
    
   
   this
   
   .init();   
}   
SmoothScroll.prototype 
   
   =
   
    {   
    init: 
   
   function
   
    () {   
        
   
   var
   
    _this 
   
   =
   
    
   
   this
   
   ;   
        
   
   if
   
    (_this.isFF) {   
            _this.win.addEventListener(
   
   '
   
   DOMMouseScroll
   
   '
   
   , 
   
   function
   
    (e) {   
                _this.upOrDown 
   
   =
   
    e.detail 
   
   <
   
    
   
   0
   
    
   
   ?
   
    
   
   "
   
   up
   
   "
   
    : 
   
   "
   
   down
   
   "
   
   ;   
                _this.scrollHander();   
                e.preventDefault();   
            }, 
   
   false
   
   );   
        } 
   
   else
   
    {   
            _this.win.onmousewheel 
   
   =
   
    
   
   function
   
    (e) {   
                e 
   
   =
   
    e 
   
   ||
   
    window.event;   
                _this.upOrDown 
   
   =
   
    e.wheelDelta 
   
   >
   
    
   
   0
   
    
   
   ?
   
    
   
   "
   
   up
   
   "
   
    : 
   
   "
   
   down
   
   "
   
   ;   
                _this.scrollHander();   
                e.returnValue 
   
   =
   
    
   
   false
   
   ;   
            }   
        }   
    },scrollHander: 
   
   function
   
    () {   
        
   
   var
   
    _this 
   
   =
   
    
   
   this
   
   ;   
        clearInterval(_this.intervalID);   
        
   
   //
   
   目标位置   
   
   

   
           
   
   var
   
    tar 
   
   =
   
    _this.win.scrollTop 
   
   +
   
    _this.step 
   
   *
   
    (_this.upOrDown 
   
   ==
   
    
   
   "
   
   up
   
   "
   
    
   
   ?
   
    
   
   -
   
   1
   
    : 
   
   1
   
   );   
        _this.intervalID 
   
   =
   
    setInterval(
   
   function
   
    () {   
            
   
   //
   
   缓动   
   
   

   
               _this.win.scrollTop 
   
   +=
   
    (tar 
   
   -
   
    _this.win.scrollTop) 
   
   *
   
    _this.f;   
            
   
   if
   
    (tar 
   
   ==
   
    _this.win.scrollTop) {   
                clearInterval(_this.intervalID);   
            }   
        }, _this.interval);   
    }   
} 

   
   var
   
    div 
   
   =
   
    document.getElementById(
   
   "
   
   ullist
   
   "
   
   );

   
   var
   
    opt 
   
   =
   
    {step:
   
   200
   
   ,f:
   
   0.2
   
   };

   
   new
   
    SmoothScroll(div,opt);

   
   <
   
   /
   
   script>
  
  

这样当在UL元素中滚动鼠标滚轮时，不会引起浏览器滚动条的滚动。

封装成jQuery插件：

  
  

   
   (
   
   function
   
   ($){
    $.fn.preventScroll 
   
   =
   
    
   
   function
   
   (){
        
   
   var
   
    _this 
   
   =
   
    
   
   this
   
   .get(
   
   0
   
   );
        
   
   if
   
   ($.browser.mozilla){
            _this.addEventListener(
   
   '
   
   DOMMouseScroll
   
   '
   
   ,
   
   function
   
   (e){
                _this.scrollTop 
   
   +=
   
    e.detail 
   
   >
   
    
   
   0
   
    
   
   ?
   
    
   
   60
   
    : 
   
   -
   
   60
   
   ;   
                e.preventDefault();
            },
   
   false
   
   ); 
        }
   
   else
   
   {
            _this.onmousewheel 
   
   =
   
    
   
   function
   
   (e){   
                e 
   
   =
   
    e 
   
   ||
   
    window.event;   
                _this.scrollTop 
   
   +=
   
    e.wheelDelta 
   
   >
   
    
   
   0
   
    
   
   ?
   
    
   
   -
   
   60
   
    : 
   
   60
   
   ;   
                e.returnValue 
   
   =
   
    
   
   false
   
     
            };
        }
        
   
   return
   
    
   
   this
   
   ;
    };
})(jQuery);
  
  

调用方式：

  
  

   
   $(
   
   "
   
   #ullist
   
   "
   
   ).preventScroll();