全屏滚动页面制作方法详解

本文深入解析了现代全屏滚动页面的高效实现方案，摒弃性能差、兼容性弱的JS模拟滚动，转而聚焦CSS原生能力——以`min-height: 100dvh`替代不稳定的`height: 100vh`解决iOS/Android视口动态变化导致的跳动问题，结合`scroll-snap-type: y mandatory`与`scroll-snap-align: start`实现精准“卡屏”效果，并通过`IntersectionObserver`（而非高频`scroll`事件）优雅监听页面切换，兼顾高性能与响应式体验；同时厘清了`scroll-behavior: smooth`的适用边界，强调其仅适用于基础锚点平滑跳转，而复杂交互仍需原生API协同。这是一份面向实战、直击移动端兼容痛点、兼顾新老浏览器的现代滚动开发指南。

全屏滚动页面的核心是 CSS height: 100vh + overflow: hidden

直接用 height: 100vh 给每个 section 设定视口高度，再把 body 的默认滚动关掉，就能实现“一屏一屏”切换的效果。但注意：iOS Safari 在地址栏收放时会动态改变 vh 值，导致页面跳动；Android Chrome 也有类似问题。所以不能只依赖 vh，得加一层 JS 补偿或改用 min-height: 100dvh（dvh 是设备视口单位，更稳定）。

• 优先用 min-height: 100dvh 替代 height: 100vh，兼容现代浏览器（Chrome 105+、Safari 16.4+、Firefox 110+）
• 老版本浏览器 fallback：用 JS 动态设置 style.height = window.innerHeight + 'px'，并在 resize 事件里更新
• 必须给 html, body { margin: 0; padding: 0; } ，否则上下可能多出空白

如何让滚动“卡”在每一页，而不是自由滑动？

纯 CSS 方案有限，scroll-snap-type 是目前最轻量且原生支持的解法。它不依赖 JS，性能好，但需注意容器和子项的配合规则。

• 滚动容器（如
  ）设 scroll-snap-type: y mandatory;，且必须有 overflow-y: auto 和 height（或 max-height）
• 每个全屏 section 设 scroll-snap-align: start;
• 禁用 iOS 滚动回弹：加 -webkit-overflow-scrolling: none;（仅旧版 Safari 需要）
• 移动端需额外加 touch-action: pan-y; 防止误触发横向拖拽

scroll-behavior: smooth 能否替代 JS 滚动库？

可以用于基础锚点跳转（比如点击导航跳到对应 section），但它不控制滚动“停靠逻辑”，也不监听滚动位置，更无法做进度条、视差或滚动触发动画。也就是说：scroll-behavior: smooth 只负责“动得柔和”，不管“停在哪”或“怎么响应”。

• 适合静态导航跳转场景，例如 第二页 配合
• 如果需要滚动监听（如高亮当前导航项）、懒加载、或自定义缓动曲线，就必须用 IntersectionObserver 或 scroll 事件 + requestAnimationFrame
• 注意：Firefox 对 scroll-behavior 的兼容性略差，部分版本不支持平滑滚动到 id 锚点

为什么用 IntersectionObserver 而不是 scroll 事件监听当前页？

因为 scroll 事件太频繁，尤其在快速滚动时容易丢帧或卡顿；而 IntersectionObserver 是浏览器原生异步回调，只在元素进入/离开视口时触发，性能更可控，也天然防抖。

• 监听每个 section 是否“完全占据视口”：配置 threshold: [0, 1]，并检查 entry.isIntersecting && entry.intersectionRatio === 1
• 避免重复触发：一个 section 进入后，先 unobserve 它，等滚动离开后再 observe 回来（或用节流）
• 注意兼容性：IE 完全不支持，需用 polyfill 或降级为 getBoundingClientRect() 手动判断

本篇关于《全屏滚动页面制作方法详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！