移动端overflow-x:scroll无法向左滚动至前15个元素的问题求助

问题场景 #

使用Angular的*ngFor循环渲染31个.brower-box元素，在移动端通过flex布局和overflow-x:auto实现横向滚动时出现异常：页面初始加载后默认显示第16个元素，无法向左滚动查看1-15号元素，仅能向右滚动至31号；从31号回滚也只能到16号，Chrome DevTools显示所有元素已加载但无法访问前半部分。

相关代码 #

HTML代码 #

<div class="row justify-content-center  mob-view" >
    <div class="col-lg-3 col-md-4" *ngFor="let slide of specialization">
        <div class="brower-box">
            <div class="brower-image"> </div>
        </div>
    </div>
</div>

CSS代码 #

@media(max-width :768px){
    .mob-view{
        min-width: 100%;
        display: flex ;
        flex-direction: row;
        overflow-x: auto;
        flex-wrap: nowrap ;   
    } 
}

排查原因 #

问题根源在于父容器的justify-content-center类（Bootstrap内置样式），该类会设置justify-content: center。在横向滚动的flex容器中，当子元素总宽度超过父容器时，这个属性会让整个子元素组居中对齐，导致初始视图停留在元素组的中间位置。同时浏览器会错误判定容器左侧已经是滚动边界，无法向左滚动查看前半部分元素。

解决方法 #

移除父容器的justify-content-center类，让flex容器默认使用justify-content: flex-start，子元素会从容器左侧开始排列，初始视图显示第一个元素，且能正常左右滚动所有元素。

修改后的HTML代码：

<div class="row mob-view" >
    <div class="col-lg-3 col-md-4" *ngFor="let slide of specialization">
        <div class="brower-box">
            <div class="brower-image"> </div>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Dexter