横向滚动条 根据滚轮滚动而移动 制作 与 问题处理

今天做一个项目的时候要用到 ‘横向滚动条 根据滚轮滚动而移动’

上网上查了很多资料 

还找了一些插件 ！  都不是很好用

 然后自己大概查了下资料 

找到一个大概比较靠谱的

HTML 

<div style="width: 5000px;">test</div>

jQuery

$(function() {
    // 设置每次滚动长度，单位 px
    var scroll_width = 100;
    var scroll_events = "mousewheel DOMMouseScroll MozMousePixelScroll";
    $(document).on(scroll_events, function(e) {
        var delta = e.originalEvent.wheelDelta || e.originalEvent.detail;
        // 滑轮向下滚动，滚动条向右移动，scrollleft+
        if(delta > 0) {
            $("html").scrollLeft($("html").scrollLeft() + scroll_width);
        }
        // 滑轮向上滚动，滚动条向座移动，scrollleft-
        else {
            $("html").scrollLeft($("html").scrollLeft() - scroll_width);
        }
    });
});

Javascript

window.onload = function() {
    // 监听鼠标滑轮
    var mousewheelevt = (/Firefox/i.test(navigator.userAgent))
        ? "DOMMouseScroll" : "mousewheel";
    if(document.attachEvent) {
        document.attachEvent("on" + mousewheelevt, function(e){
            mousewheel_event(e.wheelDelta);
        });
    }
    else if(document.addEventListener) {
        document.addEventListener(mousewheelevt, function(e){
            mousewheel_event(e.detail);
        }, false);
    }
            
    // 设置每次滚动长度，单位 px
    var scroll_width = 100;
            
    function mousewheel_event(delta) {
        // 滑轮向下滚动，滚动条向右移动，scrollleft+
        if(delta > 0) {
            document.getElementsByTagName("html")[0].scrollLeft
                += scroll_width;
        }
        // 滑轮向上滚动，滚动条向座移动，scrollleft-
        else {
            document.getElementsByTagName("html")[0].scrollLeft
                -= scroll_width;
        }
    }
};

参考资料：http://zhidao.baidu.com/link?url=Yp2GVSsADxq1T2dox5iDha0XDEl5k7RSSiffCLGg9dmxSjRXtdKLLdwreSxVo8uOK1YrQUyvoU9p-ssoRpC2f_

jquery的方法我尝试了一下  发现在IE ok 在Chrome 下并不能 正常执行

我查找了下原因

发现chrome 下

 $("html").scrollLeft()

永远为0

在国内找不解决方法 就去

http://stackoverflow.com/ 找了一下  关键词：chrome scrollLeft  

果然找到一篇文章

http://stackoverflow.com/questions/13927430/html-scrollleftvalue-not-working-in-chrome

原来chrome 中不能使用

$("html").scrollLeft()
而需要
$(window).scrollLeft(100);