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

原文地址

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

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

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