需要水平滾動，如鏈接

Question

我一直試圖實現水平滑動，如this link提供。我實際上已經在這個鏈接中使用了垂直滾動。我想要相同的水平顯示。有什麼建議麼？ website screenshot

如圖中所示，我希望頁面向左滑動，因爲頂部的任何圖塊都會被點擊等等。

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.reveal.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     var $items = $('#vtab>ul>li'); 
     $items.mouseover(function() { 
      $items.removeClass('selected'); 
      $(this).addClass('selected'); 

      var index = $items.index($(this)); 
      $('#vtab>div').hide().eq(index).show(); 
     }).eq(0).mouseover(); 
    }); 
</script> 

Answer 1

您需要設置主體的寬度等於分段數乘以每個分段的寬度。 （應該是相等的寬度）。例如，您有5個部分，每個部分的寬度均爲4000px。因此身體應該是4000 * 5,20000px。然後浮動每個部分離開，並隱藏水平滾動條。

教程：http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

演示：http://jsfiddle.net/LYxQ7/

$(function() { 
    $('ul.nav a').bind('click',function(event){ 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollLeft: $($anchor.attr('href')).offset().left 
     }, 1000); 
     event.preventDefault(); 
    }); 
});