Scroll Snap在Safari可用但Chrome、Firefox失效，求CSS问题排查

你的Scroll Snap在Chrome和Firefox失效的核心原因是浏览器对body作为滚动容器的处理差异：Safari支持直接在body上设置滚动捕捉，但Chrome和Firefox中，页面的滚动实际由html元素主导，单独给body配置scroll-snap-type无法触发预期行为。

修复方案1：同时为html和body设置滚动容器样式 #

修改CSS如下：

html, body {
    margin: 0;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.section {
    scroll-snap-align: center;
    width: 100%;
    height: 100vh;
}

.colorRed {
    background-color: red;
}
.colorGreen {
    background-color: green;
}
.colorBlue {
    background-color: blue;
}

修复方案2：使用独立滚动容器（更推荐，避免浏览器默认样式冲突） #

修改HTML： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="scroll-container">
        <div class="section colorRed">1</div>
        <div class="section colorBlue">2</div>
        <div class="section colorGreen">3</div>
    </div>
</body>
</html>

修改CSS： #

body {
    margin: 0;
}

.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.section {
    scroll-snap-align: center;
    width: 100%;
    height: 100vh;
}

.colorRed {
    background-color: red;
}
.colorGreen {
    background-color: green;
}
.colorBlue {
    background-color: blue;
}

原理说明 #

Chrome和Firefox中，body的滚动行为本质上是继承自html元素的默认滚动设置，单独给body添加滚动捕捉属性无法覆盖浏览器的默认逻辑。通过同时配置html和body，或者使用独立的容器作为滚动区域，可以确保滚动捕捉规则在所有主流浏览器中生效。

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