index.html怎样制作一个全屏滚动页面？

全屏滚动页面的核心是 CSS min-height: 100dvh + scroll-snap-type: y mandatory，需配合 scroll-snap-align: start、禁用 overscroll-behavior 及用 IntersectionObserver 监听页面切换，避免 JS 模拟滚动性能问题。

全屏滚动页面的核心是 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，性能好，但需注意容器和子项的配合规则。

• 滚动容器（如 <main>）设 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 只负责“动得柔和”，不管“停在哪”或“怎么响应”。

• 适合静态导航跳转场景，例如 <a href="#section2">第二页</a> 配合 <section id="section2">
• 如果需要滚动监听（如高亮当前导航项）、懒加载、或自定义缓动曲线，就必须用 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() 手动判断

实际滚动逻辑越靠近浏览器原生能力（scroll-snap、dvh、IntersectionObserver），越不容易出兼容性问题，也越少被移动端系统干预。但这也意味着你要亲手处理那些“看起来理所当然、其实各平台行为不一”的细节——比如 iOS 键盘弹出时视口重算、折叠屏设备的 dvh 精度、甚至某些安卓 WebView 对 scroll-snap 的忽略。