原生js实现横向 tab 栏切换，选中项自动滚动居中

css

<style>
        .container {
            height: 200px;
            width: 800px;
            background-color: #eee;
            white-space: nowrap;
            overflow: auto;
            position: relative;
            /* 可以使窗口平稳滚动 */
            scroll-behavior: smooth; 
            margin: 0 auto;
        }
        .item {
            width: 220px;
            height: 100px;
            background-color: blue;
            display: inline-block;
            text-align: center;
            line-height: 100px;
        }
        .item:nth-child(2n) {
            background-color: pink;
        }
    </style>

html

 <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
    </div>

js

<script>
        // 获取到 container 整个盒子
        var container = document.querySelector(".container");

        // 获取包裹盒子 container.offsetWidth
        var containerW = container.offsetWidth;

        // 找到所有需要被点击的 item 的集合
        var itemList = document.querySelectorAll(".item");

        // 遍历数组
        for (let i = 0; i < itemList.length; i++) {
            // 给每个元素添加点击事件
            itemList[i].onclick = function () {

                // 获取到当前点击元素的 offsetLeft  - 包裹盒子 offsetWidth 的一半 + 当前点击元素 offsetWidth 的一半
                var scrollLeftNum =itemList[i].offsetLeft - containerW / 2 + itemList[i].offsetWidth / 2; 
                console.log(scrollLeftNum,'距离')

                // 赋值
                container.scrollLeft = scrollLeftNum;
            }
        }
</script>

注意：（ 如果不想要横向滚动条 ）
在最外层包裹的盒子加上样式 ：

   .container::-webkit-scrollbar {
            display: none;
    }