javascript - 哪位大神指導下，如何實現今日頭條頭部導航列表，點那個類型，哪種類型就居中了？

Question

現在點的科技，科技就在中間，如何點其他也跑到中間？

Answer 1

點擊軍事的時候，獲得軍事這個dom距離父級dom左邊的距離，把拿到的距離除以2，然後做移動

Answer 2

如果點最左邊上的，居中的話左邊不就是空白的了？

Answer 3

點擊哪個類型的時候，這個dom距離父級的dom的左邊的距離是可以算的吧，
屏幕的寬度是可以算的吧，
dom的距離與屏幕一半寬的大小做比較，然後再判斷時間移動和移動多少距離

Answer 4

margin-left:-(x * this.index)px;
判斷當前點擊物件的index 然後計算出偏移量

Answer 5

昨天剛好做了這個demo測試。不期而遇佈局方式也與今日頭條的一樣。
JQ實作方式：

html

<ul class="nav" >
    <li class="active">第0个</a>
    <li>第1个</a>
    <li>第2个</a>
    <li>第3个</a>
    <li>第4个</a>
    <li>第5个</a>
    <li>第6个</a>
    <li>第7个</a>
    <li>第8个</a>
</ul        

css

.nav{
    white-space: nowrap;
    overflow-x: scroll;
    width: 100%;
    border-bottom: 1px solid #ccc;
}
.nav li{
    display: inline-block;
    margin: 0 12px;
    line-height: 0.8rem;
    color: #222222;
     padding: 20px 0;
}
.nav .active{color:#F23030;}

jq

//导航条宽度
var navW = $('.navs').width();
//页面宽度
var docW = $(document).width();
$('.nav li').click(function(){
    //移除样式
    $('.nav li').removeClass('active');
    //当前添加样式
    $(this).addClass('active');
    //当前li宽度
    var thisW = $(this).width();
    //要移动的距离
    var left = $('.nav').scrollLeft() + ($(this).offset().left)-(docW/2 - thisW/2);
    $('.nav').animate({scrollLeft:left},300);
})

期待更好的方式。