jQuery的scrollTo（）{軸線：「X」}不工作

Question

我不知道我做錯了，但如果我把選項{axis:'x'}這個插件，滾動不工作

我HTML代碼：

<div id="wrap"> 

    <div id="main" class="container"> 

     <div id="wrapper"> 
      <div id="mask"> 

       <div id="item0" class="item"> 
        <a name="item0"></a> 
        <div class="conteudo"> 
         aaaa 
        </div> 
       </div> 

       <div id="item1" class="item"> 
        <a name="item1"></a> 
        <div class="conteudo"> 
         bbbbs 
        </div> 
       </div>   

      </div> 
     </div> 

    </div> 

</div> 



<div class="wrap_menu"> 
      <ul class="menu"> 
       <li><a href="#item1" class="panel">EMPRESA</a></li> 
       <div class="traco"></div> 
       <li><a href="#item2" class="panel">SERVIÇOS</a></li> 
       <div class="traco"></div> 
       <li><a href="#item3" class="panel">EVENTOS</a></li> 
       <div class="traco"></div> 
       <li><a href="#item4" class="panel">VJ</a></li> 
       <div class="traco"></div> 
       <li><a href="#item5" class="panel">PARCEIROS</a></li> 
       <div class="traco"></div> 
       <li><a href="#item6" class="panel">CONTATO</a></li> 
      </ul> 
     </div> 

我的CSS代碼：

html, body, #wrap {height: 100%;} 

body > #wrap {height: auto; min-height: 100%;} 

body{ 
    font-family:'Pontano Sans', sans-serif; 
    color:#FFF; 
    background:#110030 url(../imagens/fundo_site.jpg) no-repeat center center fixed; 
} 

#main {overflow:auto; 
    padding-bottom: 117px;} /* deve ter a mesma altura do rodapé */ 
#wrapper { 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    background-color:#ccc; 
    overflow:hidden; 
} 

#mask { 
    width:100%; 
    height:100%; 
    /*background:#FFCC00;*/ 
} 

.item { 
    width:100%; 
    height:100%; 
    float:left; 
} 

#item0{ 
    background: #000 url(../imagens/bkg/fundo_site.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

#item1{ 
    background: #000 url(../imagens/bkg/fundo_site2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.conteudo { 
    position:relative; 
    width:960px; 
    height:420px; 
    margin: 0 auto 150px; 
    left:50%; 
    margin-left:-480px; 
    background:url(../imagens/fundo_conteudo.png); 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 

.clear { 
    clear:both; 
} 

.item:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can 
    also be of any width and height */ 
.conteudo { 
    display: inline-block; 
    vertical-align: middle; 
} 

我的腳本代碼：

$(document).ready(function() { 

     $('a.panel').click(function (e) { 
      e.preventDefault(); 
      //reset and highlight the clicked link 
      $('a.panel').removeClass('ativo'); 
      $(this).addClass('ativo'); 

      //grab the current item, to be used in resize function 
      current = $(this); 

      //scroll it to the destination 
      //$('.item').hide(); 
      //$((this).attr('href')).add('.current').show(); 
      //$('.item').show(); 
      $('#wrapper').scrollTo($(this).attr('href'), 2000,{axis:'y'}); 


     }); 

    }); 

我嘗試過用這種方式：

$('#wrapper').animate({scrollLeft:$(this).attr('href')},2000); 

但不要太的作品！

我做錯了什麼？

Answer 1

對於基本功能，嘗試用

$('#wrapper').scrollLeft($($(this).attr('href')).offset().left); 

更換

$('#wrapper').scrollTo($(this).attr('href'), 2000,{axis:'y'}); 

此代碼應被正確設置滾動。爲了動畫面板滑動到該位置，嘗試此代碼：

$('#wrapper').animate({scrollLeft: $($(this).attr('href')).offset().left}, 2000); 

編輯：

在網站的情況下，該元件是上方和下方彼此。目前，您可以使用此代碼，以使過渡：

$('#wrapper').animate({scrollTop: $($(this).attr('href')).offset().top}, 2000); 

有CSS和站點結構的變化可以使引起通過左滾動發生轉換，並使只有內容在黑色中心框內進行轉換。讓我知道，如果這種功能是預期的，我會爲您提供一些示例標記。