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

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

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

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

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

html

 
第0个 
第1个 
第2个 
第3个 
第4个 
第5个 
第6个 
第7个 
第8个 

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

//导航条宽度 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); }) 期待更好的方式。