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

来源：互联网发布：热播网络电视剧编辑：程序博客网时间：2024/04/29 13:19

原文地址

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

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

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();

0 0