Scroll-Snap-Align在Chrome与Edge中的顶部底部间隙Bug

问题分析 #

你的代码存在两个核心问题导致滚动间隙：

1. 滚动容器与Snap容器不匹配：将scroll-snap-type设置在html上，但实际滚动容器是设置了overflow:scroll的body，这种分离触发Chrome/Edge的渲染bug，多次滚动后累积间隙。
2. 盒模型计算误差：section设置height:100vh和padding:1rem，默认box-sizing:content-box会让元素实际高度超出视口，进一步加剧滚动偏移。

解决方案 #

调整样式，确保滚动容器与Snap容器一致，同时修正盒模型：

修改后的完整代码 #

<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Scroll Snap Align</title>
    <style>
        html, body, section {
            margin: 0;
            box-sizing: border-box; /* 统一盒模型，padding包含在高度内 */
        }
        html {
            height: 100%;
            overflow: hidden; /* 禁用html层滚动，避免双重滚动冲突 */
            background: greenyellow;
        }
        body {
            height: 100vh;
            overflow-y: auto; /* 仅开启垂直滚动 */
            overflow-x: hidden;
            scroll-snap-type: y mandatory; /* 将Snap规则绑定到实际滚动容器body */
        }
        section {
            scroll-snap-align: start;
            padding: 1rem;
            height: 100vh; /* 此时padding已计入高度，不会超出视口 */
        }
    </style>
    </head>
    <body>
        <section class="first" style="background: black; color: white">
            Section 1
        </section>
        <section class="after" style="background: yellow">
            Section 2
        </section>
        <section class="after" style="background: orange">
            Section 3
        </section>
        <section class="last" style="background: orangered">
            Section 4
        </section>
    </body>
</html>

关键修改点 #

• 全局设置box-sizing: border-box，避免padding导致元素高度超出视口。
• 将scroll-snap-type从html移到作为滚动容器的body上，确保Snap规则作用于实际滚动的元素。
• 禁用html层的滚动能力，消除双重滚动引发的渲染异常。

修改后Chrome/Edge的滚动间隙问题会被修复，同时保持各浏览器的表现一致性。

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