javascript - Can anyone guide me on how to implement the header navigation list of Toutiao? Which type will be centered when I click on it?

Question

The technology I click on now is in the middle. How can I click on other technologies and move them to the middle?

Answer 1

When clicking Military, get the distance between the military dom and the left side of the parent dom, divide the distance by 2, and then move it

Answer 2

If you click the one on the far left and center it, wouldn’t the left side be blank?

Answer 3

When clicking on which type, the distance between this dom and the left side of the parent dom can be calculated.
The width of the screen can be calculated.
Compare the distance of the dom with the half width of the screen, and then make a judgment. When to move and how far to move

Answer 4

margin-left:-(x * this.index)px;
Determine the index of the currently clicked object and then calculate the offset

Answer 5

I just did this demo test yesterday. The layout of Unexpected Encounter is also the same as Toutiao.
JQ implementation method:

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

期待更好的方式。