js 选中的导航居中 两边除外

html

<div class="nav-arc">
        <div class="nav">
            <ul class="nav-list">
                <li onclick="window.location.href='/video?tid=0'">全部</li>
                                    <li onclick="window.location.href='/video?tid=1'">大讲堂</li>
                                    <li onclick="window.location.href='/video?tid=2'">信息药师</li>
                                    <li onclick="window.location.href='/video?tid=3'" class="active">审方药师</li>
                                    <li onclick="window.location.href='/video?tid=4'">调剂药师</li>
                                    <li onclick="window.location.href='/video?tid=5'">药剂科主任DRG精英班</li>
                                    <li onclick="window.location.href='/video?tid=6'">医管专题</li>
                            </ul>
        </div>
    </div>

css

     .nav .nav-list {
         display: flex;
         justify-content: space-between;
         flex-wrap: nowrap;
         overflow-x: scroll;
     }
     .nav .nav-list::-webkit-scrollbar {display:none}
     .nav .nav-list li{
         width:auto;
         padding: .1rem .3rem;
         white-space: nowrap;
         font-size: .38rem;
     }
     .nav-list .active {
         border-bottom: .05rem solid #43a2de;
     }

js

        var moveX = $('.active').position().left + $('.active').parent().scrollLeft();
        var pageX = document.documentElement.clientWidth;
        var blockWidth = $('.active').width();
        var left = moveX - (pageX / 2) + (blockWidth / 2);
        $(".nav-list").scrollLeft(left);

也可以配合swiper使用