javascript - Quelqu'un peut-il me guider sur la façon d'implémenter la liste de navigation d'en-tête de Toutiao, quel type sera centré lorsque je clique dessus ?

Question

La technologie sur laquelle je clique maintenant est au milieu. Comment puis-je cliquer sur d'autres choses et aller au milieu ?

Answer 1

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

Answer 2

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

Answer 3

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

.

Answer 4

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

Answer 5

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

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

期待更好的方式。