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);
})

期待更好的方式。