全屏滚动页滚动条残留是因scroll-snap-type容器默认显示滚动条且webkit下display:none仍占位；需同时设置overflow-y:auto、scrollbar-width:none和::-webkit-scrollbar{display:none}，并满足高度固定、snap对齐明确、overscroll-behavior-y:contain等硬性条件。
全屏滚动页的滚动条为什么还在
因为 scroll-snap-type 容器默认会显示滚动条，且它在 Chrome/Edge/Safari 下即使设了 display: none 仍可能占位——导致内容轻微右移或底部留白。Firefox 默认隐藏但不可靠，不能当作跨浏览器解法。
常见误操作包括：
– 把 scroll-snap-type: y mandatory 直接写在 body 或 html 上（它们不是实际可滚动容器）
– 给 section 设 margin-top 或用 flex: 1 拉伸高度（破坏 scroll-snap-align 对齐精度）
– 忘加 overscroll-behavior-y: contain，iOS Safari 快速滑动后会多弹一下、跳过一屏
隐藏滚动条但保留滚动功能的最小兼容写法
必须同时覆盖 WebKit 和 Firefox，且不能只依赖一种方式：
-
.scroll-container必须设overflow-y: auto（不能是scroll或hidden） - WebKit 内核（Chrome/Safari/Edge）：用
::-webkit-scrollbar { display: none; }——注意它必须和overflow同级声明，不能放在@media或:hover里 - Firefox：加
scrollbar-width: none;（仅对auto或scroll值生效，且不能作用于html/body根元素） - 旧版 Edge/IE 可忽略；移动端 iOS Safari 对
::-webkit-scrollbar支持不稳定，建议加scrollbar-width: none作 fallback
完整示例：
.scroll-container {
overflow-y: auto;
scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar {
display: none;
}
全屏滚动容器必须满足的三个硬性条件
缺一不可，否则 scroll-snap 会完全失效：
- 显式设置容器高度：
height: 100vh（不能用min-height或靠内容撑开） - 每个
section必须设height: 100vh+scroll-snap-align: start（若想视觉居中停，用center并配合padding-top调整，别靠margin） -
scroll-snap-type: y mandatory必须写在那个带overflow-y: auto的包裹容器上，不是body，也不是html
额外提醒：position: fixed 的 header/footer 会干扰 snap 布局上下文，建议改用 position: sticky 或把它们包进 scroll 容器内。
iOS Safari 的 overscroll bounce 怎么彻底禁掉
这是全屏滚动最常被忽略的坑：即使写了 scroll-snap，Safari 仍会在滚到底部时“多弹一下”，导致停不准、甚至跳过一屏。
唯一可靠解法是加：
-
overscroll-behavior-y: contain到滚动容器上（不是body） - 确保该容器没有
transform或will-change（它们可能触发层叠上下文，让overscroll-behavior失效） - 如果用了第三方库（如 Swiper）做 fallback，务必关掉它的 bounce 配置，否则和 CSS 冲突
注意：overscroll-behavior 在 Safari 15.4+ 才稳定支持，低于此版本需 JS 监听 touchmove + preventDefault()，但会牺牲原生滚动惯性。
真正难的不是写几行 CSS，而是所有条件必须同时成立：容器高度固定、子项高度固定、snap 对齐明确、滚动条隐藏不占位、overscroll 行为被截断——漏一个，滚动就“飘”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
