导航到横向布局的内容与div内溢出设置为隐藏

我有三个菜单链接，我想水平导航到设置为溢出隐藏的容器div内的三个不同部分。导航到横向布局的内容与div内溢出设置为隐藏

我到目前为止只允许我滚动到div的最右侧，但当我点击另一个菜单链接时不会再移动。

该脚本是从ScrollTop改编的，它适用于html，body，但对于目标div上的ScrollLeft不起作用。

我的想法是，因为这在整个页面上垂直工作，我可以调整它在目标区域上工作以水平操作，但到目前为止情况并非如此。如果有人能帮我解决这个问题，那将会非常有帮助。

<menu id="portfolio-nav"> 

    <a href="#design-industrial"> 
    </a> 

    <a href="#design-print"> 
    </a> 

    <a href="#design-photography"> 
    </a>  

</menu> 

<div class="portfolio-container"> 
    <div class="portfolio-horizontal-wrapper"> 

     <div id="design-industrial" class="portfolio-content"> 
     </div> 

     <div id="design-print" class="portfolio-content"> 
     </div> 

     <div id="design-photography" class="portfolio-content"> 
     </div> 

    </div> 
</div> 

<style> 

.portfolio-container { 
    width: 260px; 
    height: 300px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
} 

.portfolio-horizontal-wrapper { 
    width: auto; 
    height: 100%; 
    white-space:nowrap; 
} 

.portfolio-content { 
    width: 260px; 
    height: 100%; 
    display: inline-block; 
} 

</style> 


<script type="text/javascript"> 

    $(document).ready(function(){ 
     $('a[href^="#"]').on('click',function (event) { 
      event.preventDefault(); 

      var target = this.hash, 
      $target = $(target); 

      $('.portfolio-container, .portfolio-horizontal-wrapper').animate({ 
       'scrollLeft': $target.offset().left -62}, 1111, 'swing', function() {   
      }); 
     }); 
    }); 

</script>

来源

2014-02-10 MikeSeen

什么是'.start（）'？在你的CSS中，小写字体“高度：100％;'应该是高度：100％;'。 – j08691

我删除了开始（）...我无法解释为什么那里。我修复了错字。 @ j08691谢谢 – MikeSeen

我不知道，如果你想为什么它不工作，或只是工作代码... 的主要问题是使用position() VS offset()的解释。在.portfolio-horizontal-wrapper元素也设置为position: relative在CSS有助于jQuery来获取正确的当前你想要的目标....反正元素的x位置，如果那是太混乱或没有意义或你不关心：）....这里是一个工作JSFiddle。希望这可以帮助。

来源

2014-02-10 19:51:42 80PoundsOfFury

尽管我含糊不清，但仍设法直接回答。我永远不会采取立场：再次相对理所当然！谢谢！ – MikeSeen

导航到横向布局的内容与div内溢出设置为隐藏

回答

相关问题