Lorsque vous cliquez sur Militaire, obtenez la distance entre le domaine militaire et le côté gauche du domaine parent, divisez la distance par 2, puis déplacez-la

Si vous cliquez sur celui à l’extrême gauche et que vous le centrez, le côté gauche ne serait-il pas vide ?

Lorsque vous cliquez sur quel type, la distance entre ce dom et le côté gauche du dom parent peut être calculée
La largeur de l'écran peut être calculée
Comparez la distance du dom avec la demi-largeur de l'écran. puis jugez quand déménager et jusqu'où déménager

margin-left:-(x * this.index)px;
Déterminez l'index de l'objet actuellement cliqué puis calculez le décalage

Je viens de faire ce test de démonstration hier. La disposition de Unexpected Encounter est également la même que celle de Toutiao.
Méthode de mise en œuvre JQ :

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); }) 期待更好的方式。