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