如何使橫向滾動像地鐵？

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/