如何使横向滚动像地铁？

Question

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

我试过这段代码：

$(document).ready(function() { 

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

但水平滚动倒不工作，我希望它。

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

Answer 1

我找到了答案：

为了获得水平滚动鼠标滚轮插件由布兰登·艾伦（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 2

检查jQuery插件的jCarousel：

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

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/