重写鼠标滚轮事件阻止滚动条冒泡
原文地址
遇到一个问题，页面和子页面同时存在滚动条，在鼠标滚轮时候，会冲突：子页滚动条到顶部或者底部时候会继续冒泡，去滚动父节点的滚动条。
解决这个问题，必需要拦截鼠标滚轮事件，重写滚动事件，这时候又出现了烦人的浏览器兼容问题：
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();