jquery scrollTo() {axis :'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').scrollTo($(this).attr('href'), 2000,{axis:'y'});

与

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

此代码应该正确设置滚动条。为了动画面板滑动到这个位置，试试这个代码:

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

编辑:

就您的网站而言，元素在彼此之上和之下。目前，您可以使用此代码来引起转换:

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

您可以对 CSS 和站点结构进行更改，以通过向左滚动进行过渡，并仅使黑色居中框内的内容进行过渡。让我知道这种功能是否符合预期，我将为您提供一些示例标记。