用JS模拟了一个滚动条。理想状态是：
用户在该DIV里滚动鼠标的滚轮，那么浏览器的滚动条是不动的。
但如果用户在DIV外滚动鼠标的滚轮，那么滚动的将是浏览器的滚动条。
目前出了一个问题
IE下，我只需要onmousewheel事件里return false，浏览器的滚动条是会不动的。
但其它浏览器下，我鼠标在DIV里滚动滚轮，浏览器的滚动条一起动了，怎么解决。
用户在该DIV里滚动鼠标的滚轮，那么浏览器的滚动条是不动的。
但如果用户在DIV外滚动鼠标的滚轮，那么滚动的将是浏览器的滚动条。
目前出了一个问题
IE下，我只需要onmousewheel事件里return false，浏览器的滚动条是会不动的。
但其它浏览器下，我鼠标在DIV里滚动滚轮，浏览器的滚动条一起动了，怎么解决。
滚轮ie和ff的代码不一样
ie是mousewheel事件，ff是DOMMouseScroll事件
事件属性 ie是event.wheelDelta,ff是event.detail
属性的方向值也不一样ie向上〉0 ff相反
var scrollfunc=function(event)
{
var direct=0;
if(event.wheelDelta)
{
direct=event.wheelDelta>0?1:-1;}else
{
direct=event.detail<0？1：-1；
}
zoom(direct);
}
Event.observe(document,'mousewheel',scrollfunc);
Event.observe(document,'DOMMouseScroll',scrollfunc);
给个类似的例子 对应一下ff的
用了e.preventDefault();后，屏蔽了浏览器的相应事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟滚动条</title>
<style type="text/css">
.aa div div{padding:5px; }
</style>
</head>
<body>
<div style="width:350px; height:400px; position:relative;">
<div style="width:300px; height:400px; background:#CCCCCC; overflow:hidden; position:absolute; left:0; top:0; word-wrap:break-word;" class="aa" id="test_container">
<div style="position:absolute; top:0;" id="test_shower">
<div>一一一一一一一一一一</div>
<div>二二二二二二二二二二</div>
<div>三三三三三三三三三三</div>
<div>四四四四四四四四四四</div>
<div>五五五五五五五五五五</div>
<div>六六六六六六六六六六</div>
<div>七七七七七七七七七七</div>
<div>八八八八八八八八八八</div>
<div>九九九九九九九九九九</div>
<div>十十十十十十十十十十</div>
<div>一一一一一一一一一一</div>
<div>二二二二二二二二二二</div>
<div>三三三三三三三三三三</div>
<div>四四四四四四四四四四</div>
<div>五五五五五五五五五五</div>
<div>六六六六六六六六六六</div>
<div>七七七七七七七七七七</div>
<div>八八八八八八八八八八</div>
<div>九九九九九九九九九九</div>
<div>十十十十十十十十十十</div>
<div>一一一一一一一一一一</div>
<div>二二二二二二二二二二</div>
<div>三三三三三三三三三三</div>
<div>四四四四四四四四四四</div>
<div>五五五五五五五五五五</div>
<div>六六六六六六六六六六</div>
<div>七七七七七七七七七七</div>
<div>八八八八八八八八八八</div>
<div>九九九九九九九九九九</div>
<div>十十十十十十十十十十</div>
<div>一一一一一一一一一一</div>
<div>二二二二二二二二二二</div>
<div>三三三三三三三三三三</div>
<div>四四四四四四四四四四</div>
<div>五五五五五五五五五五</div>
<div>六六六六六六六六六六</div>
<div>七七七七七七七七七七</div>
<div>八八八八八八八八八八</div>
<div>九九九九九九九九九九</div>
<div>十十十十十十十十十十</div>
<div>一一一一一一一一一一</div>
<div>二二二二二二二二二二</div>
<div>三三三三三三三三三三</div>
<div>四四四四四四四四四四</div>
<div>五五五五五五五五五五</div>
<div>六六六六六六六六六六</div>
<div>七七七七七七七七七七</div>
<div>八八八八八八八八八八</div>
<div>九九九九九九九九九九</div>
<div>十十十十十十十十十十</div>
<div>一一一一一一一一一一</div>
<div>二二二二二二二二二二</div>
<div>三三三三三三三三三三</div>
<div>四四四四四四四四四四</div>
<div>五五五五五五五五五五</div>
<div>六六六六六六六六六六</div>
<div>七七七七七七七七七七</div>
<div>八八八八八八八八八八</div>
<div>九九九九九九九九九九</div>
<div>十十十十十十十十十十</div>
<div>一一一一一一一一一一</div>
<div>二二二二二二二二二二</div>
<div>三三三三三三三三三三</div>
<div>四四四四四四四四四四</div>
<div>五五五五五五五五五五</div>
<div>六六六六六六六六六六</div>
<div>七七七七七七七七七七</div>
<div>八八八八八八八八八八</div>
<div>九九九九九九九九九九</div>
<div>十十十十十十十十十十</div>
</div>
</div>
<div style="position:absolute; left:300px; top:0; width:20px; height:400px; -moz-user-focus:ignore;-moz-user-input:disabled;-moz-user-select:none;" id="test_scroller">
<div style="position:absolute; background:#999999; width:20px; height:20px; left:0; top:0;" id="test_scroll_up"></div>
<div style="position:absolute; width:20px; height:100px; background:#000000; left:0; top:20px;" id="test_scroll_bar"></div>
<div style="position:absolute; background:#999999; width:20px; height:20px; left:0; bottom:0;" id="test_scroll_down"></div>
</div>
</div>
<input type="button" onclick="te.gotobottom();" value="移至底端" />
</body>
</html>