CSS垂直滚动吸附（scroll snapping）无法生效求助

尝试了5种不同教程后仍无法实现垂直滚动吸附功能，以下是你的代码及针对性修复方案：

你的现有代码 #

CSS代码 #

html{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans', sans-serif;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

/*
.scroll_container{
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}*/

section{
    /*min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;*/
    scroll-snap-align: start;
    height: 100vw;

}

HTML代码 #

<body>
    <div class="scroll_container">
        <section>
            <h1>Tyler Olson</h1>
        </section>
        <section class = "new1_section">
            <h2>new section1</h2>
            <p>lkhrogisahlkjsbhdgnbuherldofiubnweroiubndsoiufbdpsoibro unbowbbvbidsjb</p>
        </section>
        <section class = "new2_section">
              <h2>new section2</h2>
              <p>lkhrogisahlkjsbhdgnbuherldofiubnweroiubndsoiufbdpsoibro unbowbbvbidsjb</p>
        </section>
        <section class = "new3_section">
            <h2>new section 3</h2>
            <p>alksdfj;lgsfakhg;ldskajgf;dlsakjhgk;lsahgl;fsakhg;lsakhfg;ljsaghs;alkgh</p>
        </section>
        <section class = "new4_section">
            <h2>new section 4</h2>
            <p>as;ldkfj;alskfhgd;lskjahg;lsakhjfg;lsakfhg;alsfjhg;alsjfhg;laskfghj</p>
            <br>
            <p>Image by starline on Freepik</p>
        </section>
    </div>
</body>

问题原因及修复方案 #

核心问题 #

1. section高度设置错误：使用height:100vw会让section高度等于视口宽度，竖屏场景下高度远小于视口，无法触发滚动吸附。
2. 滚动容器配置缺失：.scroll_container未设置明确高度和滚动属性，导致滚动行为由html接管，但section高度不足，吸附逻辑无法生效。

修改后的有效代码 #

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    font-family: 'Noto Sans', sans-serif;
    scroll-behavior: smooth;
}
.scroll_container {
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    height: 100vh; /* 让容器占满整个视口高度 */
}
section {
    min-height: 100vh; /* 每个section占满视口高度 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem; /* 避免内容紧贴边缘 */
    scroll-snap-align: start; /* 滚动时吸附到section顶部 */
}

关键修改说明 #

• 全局重置样式：消除浏览器默认边距和内边距，避免布局偏移。
• 滚动容器配置：给.scroll_container设置height:100vh和overflow-y: scroll，让它成为独立的滚动容器，并在容器上设置scroll-snap-type: y mandatory。
• section高度修正：用min-height:100vh确保每个section占满视口高度，恢复flex布局实现内容居中，同时保留scroll-snap-align: start触发顶部吸附。
• 增加内边距：提升内容显示的视觉舒适度。

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