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

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/