HTML如何制作全屏滚动网页_HTML单页应用布局方法

原生全屏滚动需用 scroll-snap-type + scroll-snap-align 实现，关键在于：1. 在显式设 height: 100vh 和 overflow-y: scroll 的容器上设置 scroll-snap-type；2. 每个 section 必须设固定 height 和 scroll-snap-align；3. 加 overscroll-behavior-y: contain 防 iOS bounce；4. 隐藏滚动条需兼容各浏览器。

直接用 scroll-snap-type + scroll-snap-align 就能实现原生、轻量、不依赖 JS 的全屏滚动，比手写监听 scroll 事件或用第三方库更稳、更省资源。

scroll-snap-type 必须设在可滚动容器上，不是 body

很多人把 scroll-snap-type: y mandatory 写在 body 或 html 上，结果无效——因为默认情况下 body 不是“可滚动容器”，它的滚动行为由 html 承担，但 html 又常被视口撑满、没有溢出，导致 snap 失效。

• 正确做法：新建一个包裹所有 section 的 div.scroll-container，给它设 height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory;
• 必须确保该容器有明确的滚动高度（不能靠 min-height 或内容撑开）
• overscroll-behavior-y: contain 建议加上，防止滚动到底部时触发页面回弹或下拉刷新

每个 section 要设 height 和 scroll-snap-align

仅设 scroll-snap-align: start 不够，浏览器需要知道“在哪停”。如果子元素高度不固定或被 flex / grid 拉伸，snap 会失效或错位。

• 每个 section 必须显式设置 height: 100vh（垂直滚动）或 width: 100vw（水平滚动）
• scroll-snap-align: start 表示对齐到容器顶部；若想居中停，用 center，但需配合容器 padding 或子元素 margin 调整视觉位置
• 避免给 section 设 margin-top/bottom，它会影响 offsetTop 计算，干扰 snap 精度

滚动条默认可见，隐藏它要分浏览器处理

Chrome/Edge/Safari 下，scroll-snap 容器的滚动条仍会显示，影响全屏沉浸感。Firefox 默认隐藏，但不可靠。

立即学习“前端免费学习笔记（深入）”；

• 隐藏纵向滚动条：.scroll-container::-webkit-scrollbar { display: none; }
• 同时加 overflow-y: -webkit-scrollable-area（仅 WebKit）可防滚动条占位导致内容偏移
• Firefox 需额外加 scrollbar-width: none，但仅支持 Firefox 64+
• 注意：隐藏后用户仍可通过空格键、方向键、触控板滚动，功能不受影响

移动端 Safari 的 overscroll 和 bounce 是最大坑

iOS Safari 默认开启滚动边界弹性效果（bounce），会导致 scroll-snap 在快速滑动后“多弹一下”，停不准，甚至跳过一屏。

• 必须加 overscroll-behavior-y: contain 到容器上，禁用穿透和 bounce
• 若仍抖动，检查是否用了 position: fixed 的 header/footer——它们可能干扰 scroll-snap 的布局上下文
• 不要在容器上同时设 touch-action: pan-y，它会和 snap 冲突，导致滑动卡顿或失效

真正难调的不是写几行 CSS，而是让每一屏都“咬合”得严丝合缝：viewport 缩放、字体加载抖动、图片异步渲染、iOS 键盘弹起后的视口重算……这些都会让 100vh 失准，snap 偏移。上线前务必在真机上用不同尺寸、不同系统版本反复滑动十次以上。