如何制作像地铁一样的水平滚动？

Question

我需要制作类似于Windows 8的Metro风格水平滚动的东西。例如，当用户在角落移动鼠标时，滚动条随之移动。

我试过这段代码：

$(document).ready(function() {

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

但水平滚动并不像我期望的那样完全正常工作。

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

Answer 1

检查jquery插件jcarousel：

http://sorgalla.com/projects/jcarousel/examples/static_auto.html

Answer 2

我找到了答案：

要获得水平滚动，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

$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 40);
    e.preventDefault();
});
})

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

Answer 3

你可以尝试http://jscrollpane.kelvinluck.com/，支持水平和垂直滚动，并且很容易设计样式并支持不同的缓动过渡。

Answer 4

你可以这样做： 的 HTML：

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

<强> CSS

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

<强>的Javascript

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

实施例： http://jsfiddle.net/JEX23/