javascript - Kann mir jemand helfen, wie ich die Header-Navigationsliste von Toutiao umsetze? Welcher Typ wird zentriert, wenn ich darauf klicke?

Question

Die Technologie, auf die ich jetzt klicke, ist in der Mitte. Wie kann ich auf andere Dinge klicken und in die Mitte gehen?

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

期待更好的方式。