需要水平滚动，如链接

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(); 
    }); 
});