CSS滚动吸附手机正常，电脑端偏移问题技术求助

我做了一个SkillsBar容器，内部包含多个Skill子项，设置页面宽度小于910px时允许横向滚动，滚动时吸附到每个子项。测试发现手机端吸附显示正常，但电脑端localhost测试时，吸附位置略有偏移。相关HTML与CSS代码如下：

HTML代码 #

<div class="SkillsBar">
    <div class="Skill">
        <h2><i class="fa-brands fa-java"></i></h2>
        <p>Java</p>
    </div>
    <div class="Skill">
        <h2><i class="fa-brands fa-html5"></i></h2>
        <p>HTML</p>
    </div>
    <div class="Skill">
        <h2><i class="fa-brands fa-css3-alt"></i></h2>
        <p>CSS</p>
    </div>
    <div class="Skill">
        <h2><i class="fa-brands fa-python"></i></h2>
        <p>Python</p>
    </div>
    <div class="Skill">
        <h2><i class="fa-solid fa-file-excel"></i></h2>
        <p>Excel</p>
    </div>
    <div class="Skill">
        <h2><img src="images/Matlab_Logo.png" alt="MATLAB"></h2>
        <p>MATLAB</p>
    </div>
    <div class="Skill">
        <h2><img src="images/soldiworks2.png" alt="SolidWorks"></h2>
        <p>Solidworks</p>
    </div>
</div>

CSS代码（原代码） #

.SkillsBar {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 150px;
}

.Skill {
    height: 100px;
    min-width: 100px;
    border-radius: 50%;
    transform: translateY(0);  /* IDK why this needs to be here but it does*/
}

@media screen and (max-width: 910px) {
    .SkillsBar {
        height: 125px;
        background-color: red;
        scroll-snap-type: x mandatory;
        scroll-snap-type: mandatory;
        overflow-x: scroll;
    }
    
    .Skill {
        min-width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: green;
        scroll-snap-align: start;
    }

    .SkillsBar::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}   

问题原因分析 #

1. 移动端SkillsBar继承了全局的justify-content: space-between和左右5%的padding，scroll-snap的吸附基准是容器可视区域，padding会占据内部空间，加上space-between的分布逻辑，导致子项起始位置偏离容器边缘，电脑端视口计算更严格，因此出现偏移。
2. 重复定义scroll-snap-type，后者scroll-snap-type: mandatory;会覆盖前者的x轴指定，可能导致浏览器解析异常。
3. 未给Skill子项设置flex-shrink: 0，flex布局下子项可能被压缩，宽度不一致导致吸附位置不准。

修复后的CSS代码 #

.SkillsBar {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 150px;
}

.Skill {
    height: 100px;
    min-width: 100px;
    border-radius: 50%;
    transform: translateY(0);
}

@media screen and (max-width: 910px) {
    .SkillsBar {
        height: 125px;
        background-color: red;
        scroll-snap-type: x mandatory; /* 保留标准的轴指定写法 */
        overflow-x: scroll;
        justify-content: flex-start; /* 重置为左对齐，让子项紧凑排列 */
        padding-left: 0; /* 去掉左右padding，修正吸附基准 */
        padding-right: 0;
        gap: 10px; /* 可选：给子项添加间距，优化视觉 */
    }
    
    .Skill {
        min-width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: green;
        scroll-snap-align: start; /* 此属性必须保留，是吸附生效的核心 */
        flex-shrink: 0; /* 防止子项被压缩，保证宽度统一 */
    }

    .SkillsBar::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

关键修复点说明 #

• 重置移动端的justify-content为flex-start，确保子项从容器左侧开始排列，避免space-between导致的分布混乱。
• 去掉移动端SkillsBar的左右padding，让scroll-snap的吸附基准准确对应容器可视边缘，解决电脑端的偏移问题。
• 添加flex-shrink: 0到Skill子项，防止flex布局下子项宽度被压缩，保证每个子项宽度一致，吸附位置精准。
• 保留scroll-snap-align: start，这确实是滚动吸附功能生效的必要属性，它定义了子项的起始位置需要吸附到滚动容器的视口。

内容的提问来源于stack exchange，提问作者WarriorsBlewA3-1Lead