在线等 用javascript使得设置了overflow-x:auto的div，能通过鼠标滚轮，滑动里面的内容。

Question

这个之前弄过，不过不能兼容chrome，老是找不出问题在哪里

Answer 1

<div style="width: 5000px;">test</div>
window.onload = function() {
var scroll_width = 100;

if(document.addEventListener){
document.addEventListener('DOMMouseScroll', mousewheel_event, false); // FF
}
window.onmousewheel=document.onmousewheel = mousewheel_event; // IE/Opera/Chrome

    function mousewheel_event(e) {
var e = e || window.event, v;
e.wheelDelta ? v=e.wheelDelta : v=e.detail;
if(v>3||-v>3) v=-v;
        if(v > 0){
document.body.scrollLeft += scroll_width;  // Chrome
document.getElementsByTagName("html")[0].scrollLeft += scroll_width;
        }
        else{
document.body.scrollLeft -= scroll_width;  // Chrome
document.getElementsByTagName("html")[0].scrollLeft -= scroll_width;
        }
    }
};      Chrome下滚动到一定距离就不能再触发事件了，无力

Answer 2

找到问题出在哪了<div id='box' style="width: 500px;height:500px;background:#FCC;overflow-y: hidden;">
    <div id="content" style="width: 5000px;height:500px;"></div>
</div>window.onload = function() {
var a = document.getElementById('box'), b = document.getElementById('content');
var scroll_width = 100;

if(document.addEventListener){
document.addEventListener('DOMMouseScroll', mousewheel_event, false); // FF
}
a.onmousewheel = mousewheel_event; // IE/Opera/Chrome

    function mousewheel_event(e) {
var e = e || window.event, v;
e.wheelDelta ? v=e.wheelDelta : v=e.detail;
if(v>3||-v>3) v=-v;
v>0 ? a.scrollLeft+=scroll_width : a.scrollLeft-=scroll_width;
    }
};