以下做一個參考，將導(dǎo)航包裹一層div，設(shè)置其寬度100%，超出x軸滾動，超出y軸隱藏，然后通過點擊導(dǎo)航讓其移動

/*樣式*/
.scroll-nav{overflow-x:auto; overflow-y:hidden; white-space:nowrap;}
/*頁面*/
<div class="scroll-nav">
    <ul>
        <li class="active">壹號土豬</li>
        <li>金利白豬</li>
        <li>五谷草豬</li>
        <li>壹號土豬</li>
        <li>壹號土豬</li>
    </ul>
</div>
/*js*/
初始時計算導(dǎo)航li的寬度，給ul賦值
$(function(){
    var liLen = $(".scroll_nav li").outerWidth();
    var liCount = $(".scroll_nav ul").children().length;
    $(".scroll_nav ul").css("width",(liLen*liCount)+'px');

    // 點擊導(dǎo)航
    $(".scroll_nav li").click(function(){
        //移動導(dǎo)航
        $(this).addClass("active").siblings().removeClass("active");
        var index = $(this).index();
        var liW = $(this).width();
        $('.scroll_nav').stop().animate({scrollLeft:index*liW},300);
    });
})

父元素作為視口 overflow:hidden
再用一個新容器包裹所有的標(biāo)簽的頁面
然后設(shè)置位移量就行了