实现逐页滚动效果的现代CSS方案：使用scroll-snap精准控制视口级滚动-js教程-PHP中文网

实现逐页滚动效果的现代CSS方案：使用scroll-snap精准控制视口级滚动

无需JavaScript，仅用CSS scroll-snap-type 与 scroll-snap-align 即可实现平滑、精准的100vh逐页滚动，兼容性好、性能高、代码简洁。

无需javascript，仅用css `scroll-snap-type` 与 `scroll-snap-align` 即可实现平滑、精准的100vh逐页滚动，兼容性好、性能高、代码简洁。

要实现“每次滚动精确跳转一整屏（100vh）”的效果，不推荐通过监听 scroll 事件并调用 scrollTo() 或 scrollBy() 实现——这不仅易引发滚动抖动、卡顿、无限触发等问题（如原代码中 setVh(vh + vh) 导致状态失控），还绕过了浏览器原生滚动优化机制，增加维护成本。

✅ 推荐方案：纯CSS scroll-snap（CSS Scroll Snap Module Level 1），是W3C标准特性，已在Chrome 69+、Firefox 68+、Safari 11.1+、Edge 79+ 全面支持，具备原生流畅性、触控友好性及无障碍兼容性。

✅ 正确实现步骤

重置页面默认边距，确保容器占满视口：

body {
margin: 0;
overflow: hidden; /* 可选：防止body产生额外滚动条 */
}

创建滚动容器，启用纵向强制吸附：

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载
```
.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
scroll-snap-type: y mandatory; /* 关键：y轴强制吸附 */
scroll-behavior: smooth;        /* 可选：启用平滑滚动过渡 */
}
```

定义每页区块，设置吸附对齐方式：

.container > div {
height: 100vh;                /* 每页严格占满视口高度 */
scroll-snap-align: center;    /* 吸附中心点（也可用 start/end） */
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background: #f5f5f5;
border-bottom: 1px solid #eee;
}

HTML结构示例：

<div class="container">
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
<div>Section 4</div>
<div>Section 5</div>
</div>

⚠️ 注意事项

scroll-snap-align: center 要求元素高度 ≥ 100vh 才能精准吸附；若内容动态变化，建议用 min-height: 100vh 并配合 flex 布局避免高度塌陷。
避免在 .container 上设置 transform、filter 等会创建新层叠上下文的属性，可能干扰滚动行为。
如需程序化跳转（如导航按钮），使用 element.scrollIntoView({ behavior: 'smooth', block: 'start' })，它会自动遵循 scroll-snap 规则。
移动端需添加 @supports (scroll-snap-type: y mandatory) 进行渐进增强，或搭配 touch-action: pan-y 优化手势体验。