Javascript 如何使水平滚动像地铁？

我需要做一些类似Windows8的Metro风格的水平滚动。例如，当用户在角落移动鼠标时，滚动条也随之移动

我尝试了以下代码：

$(document).ready(function() {

    document.documentElement.onmousewheel = function (event) {
        $('body').scrollLeft($('body').scrollLeft() - event.wheelDelta);
    };
});

但是水平滚动并不像我期望的那样有效

---

如何制作Windows 8风格的水平滚动？

检查jquery插件jcarousel：

您可以尝试，支持水平和垂直滚动，易于设置样式并支持不同的缓和过渡。

我找到了答案：

为了获得水平滚动，Brandon Aaron（GitHub，下载）的鼠标滚轮插件将被用来检测鼠标滚轮的移动，就像按键一样，当然，jQuery本身也将被使用

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>

---

JavaScript可以添加到Head标记中。请注意，滚动应用于html、body和*（所有内容）——这使它能够在不同的浏览器中工作。event.preventDefault（）仅禁用垂直滚动。

您可以执行以下操作： HTML:

<div class="hScroll">
    <div class="content">
        <!-- your content -->
    </div>
</div>

Javascript

$(document).ready(function (){
    $('.hScroll').width($('.content').outerWidth());
});
document.documentElement.onmousewheel = function (event) {
    $('body').scrollLeft($('body').scrollLeft() - event.wheelDelta);
    event.preventDefault();
};

例如：

---

谢谢，但是水平滚动在鼠标滚轮上不太起作用。

.hScroll {
    position: relative;
    width: 99999em;
    height: 100%;
}
.content {
    position: relative;
    width: auto;
    height: 100%;
    float:left;
}

$(document).ready(function (){
    $('.hScroll').width($('.content').outerWidth());
});
document.documentElement.onmousewheel = function (event) {
    $('body').scrollLeft($('body').scrollLeft() - event.wheelDelta);
    event.preventDefault();
};