CSS中scroll-snap-type滚动吸附效果不生效如何排查解决

scroll-snap-type没生效是两个基础配置写错了：

• 你把.mainContent高度设成了500vh，又给它加了overflow-y: scroll，但没给html、body标签限高、隐藏默认滚动，实际用户滚动的时候触发的是浏览器页面本身的滚动条，根本不是.mainContent容器的滚动，写在容器上的滚动吸附规则自然完全不生效。
• 你给每个子区块.sactionDiv加了padding-top: 6.7vh，导致每个子区块实际高度是100vh + 6.7vh，超出了一屏高度，就算滚动容器配置对了，吸附位置也会偏移。

直接改对应CSS代码就行，JS部分不用动：

1. 先重置根元素样式，把页面默认滚动条关掉，让滚动行为只发生在.mainContent容器内

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

2. 调整.mainContent的样式，把容器高度改成和视口一致的100vh，导航栏的高度偏移挪到容器上

.mainContent {
    /* 删掉原来写的height: 500vh，替换成下面的 */
    height: 100vh;
    width: 100%;
    padding: 0 2vw;
    /* 加这行，把原来子元素的padding-top挪到这，避免子元素高度溢出 */
    padding-top: 6.7vh;
    background-color: rgb(24, 24, 24);
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    /* 可选：加这行让滚动更丝滑 */
    scroll-behavior: smooth;
}

3. 调整子区块.sactionDiv的样式，删掉多余的内边距，保证每个区块刚好占满一屏

.sactionDiv {
    /* 删掉原来的padding-top: 6.7vh */
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 固定导航栏场景下用start对齐比center合适，不会出现内容被导航栏挡住的问题 */
    scroll-snap-align: start;
}

改完之后不管是手动滚轮滚动，还是点击顶部导航的锚点跳转，都会自动吸附对齐到对应区块。

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