JavaScript：使用鼠标滚轮进行水平滚动答案

【问题标题】：JavaScript: Horizontal Scrolling with Mouse WheelJavaScript：使用鼠标滚轮进行水平滚动
【发布时间】：2013-06-06 06:10:28
【问题描述】：

基于此：http://reader-download.googlecode.com/svn/trunk/full-page-horizontal-scrolling.html 我一辈子都无法让它在标准或 Quirks 模式下在 IE 10 中工作。我在这里有一个 jsFiddle，但它只能垂直滚动：http://jsfiddle.net/dwsRC/1/

滚动代码与示例网站 100% 相同。我尝试过其他滚动示例，但 preventDefault 不起作用。添加 jQuery 也无济于事。

在 Visual Studio 2012 中，我得到：

JavaScript 运行时错误：对象不支持属性或方法 '防止默认'

HTML：

<div id="container">
    <div class="content c1">Hello, World!</div>
    <div class="content c2">Hello, World!</div>
    <div class="content c3">Hello, World!</div>
    <div class="content c1">Hello, World!</div>
    <div class="content c2">Hello, World!</div>
    <div class="content c3 last">Hello, World!</div>
</div>

CSS：

#container {
    height: 100%;
    width: 6000px;
    overflow: hidden;
}
.content {
    width: 895px;
    height: 675px;
    float:left;
    margin-right:50px;
}
.c1 {
    background-color: red;
}
.c2 {
    background-color: blue;
}
.c3 {
    background-color: green;
}

JS：

(function () {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.body.scrollLeft -= (delta * 40); // Multiplied by 40
        e.preventDefault();
    }
    if (window.addEventListener) {
        // IE9, Chrome, Safari, Opera
        window.addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        window.attachEvent("onmousewheel", scrollHorizontally);
    }
})();

【问题讨论】：

标签： javascript scroll horizontal-scrolling mousewheel preventdefault

【解决方案1】：

This answer 为我解决了这个问题，摆脱了 IE 错误并且水平滚动工作了。

【讨论】：