如何制作一个全屏滚动页面？
想实现那种一屏一屏切换的流畅效果？其实核心逻辑并不复杂，关键在于精准地组合CSS与Ja vaScript的原生能力。简单来说，就是利用 min-height: 100dvh 配合 scroll-snap-type: y mandatory 来搭建骨架，再用 IntersectionObserver 监听页面切换，从而避免用Ja vaScript模拟滚动带来的性能损耗。
全屏滚动页面的核心是 CSS height: 100vh + overflow: hidden
最直观的思路，就是给每个区块（section）设置 height: 100vh，然后关掉body的默认滚动条。这确实能快速实现“一屏”的效果。但问题来了：移动端浏览器的视口高度可不是一成不变的。iOS Safari在地址栏收索或展开时，会动态调整 vh 的计算值，导致页面高度突变、视觉上“跳”一下；Android Chrome也有类似的“小动作”。
所以，单纯依赖 vh 是靠不住的。更稳妥的方案是引入Ja vaScript进行动态补偿，或者，直接采用更现代的视口单位——dvh（设备视口高度单位），它的计算方式更稳定。
- 首选方案：使用
min-height: 100dvh替代height: 100vh。它兼容Chrome 105+、Safari 16.4+、Firefox 110+等现代浏览器。 - 兼容性回退：对于老版本浏览器，需要用Ja vaScript动态设置高度：
style.height = window.innerHeight + ‘px’，并在resize事件中及时更新。 - 别忘了重置样式：务必设置
html, body { margin: 0; padding: 0; }，否则页面上下很可能会多出你意想不到的空白边距。
如何让滚动“卡”在每一页，而不是自由滑动？
实现“吸附”效果，纯CSS的方案在过去很有限，但现在我们有了利器：scroll-snap-type。这是一个轻量级且由浏览器原生支持的方案，不依赖Ja vaScript，性能表现优异。当然，使用时需要遵循容器与子项的配合规则。
- 滚动容器（例如
）：需要设置scroll-snap-type: y mandatory;。同时，它必须拥有overflow-y: auto以及明确的height（或max-height）属性。 - 每个全屏区块：设置
scroll-snap-align: start;，告诉浏览器吸附的起始位置。 - 处理iOS回弹：可以为旧版Safari添加
-webkit-overflow-scrolling: none;来禁用滚动回弹效果。 - 移动端优化：建议加上
touch-action: pan-y;，这能防止用户误操作触发横向拖拽，确保滚动只在垂直方向进行。
scroll-beha vior: smooth 能否替代 JS 滚动库？
这个属性确实能让锚点跳转变得平滑，但它主要负责“怎么动”，不负责“停在哪”以及“如何响应”。换句话说，scroll-beha vior: smooth 只管滚动的动画曲线，不控制滚动停止的逻辑，也无法监听滚动位置来实现进度条、视差动画等高级交互。
- 适用场景：非常适合静态的导航跳转。例如，点击一个链接
平滑滚动到对应的。 - 能力局限：如果需要高亮当前导航项、实现懒加载、或者自定义复杂的缓动函数，就必须借助
IntersectionObserver或scroll事件配合requestAnimationFrame来实现。 - 注意兼容性：Firefox对
scroll-beha vior的支持在某些版本上可能不完整，特别是滚动到id锚点的场景。
为什么用 IntersectionObserver 而不是 scroll 事件监听当前页？
这是一个关于性能的关键选择。scroll 事件触发频率极高，在快速滚动时容易造成丢帧或卡顿，即使加了节流也依然存在性能开销。而 IntersectionObserver 是浏览器提供的原生异步API，它只在被观察元素进入或离开视口时触发回调，性能更优，且自带“防抖”效果。
立即学习“前端免费学习笔记（深入）”；
- 精准监听：要判断一个section是否完全占据视口，可以配置
threshold: [0, 1]，并检查条件entry.isIntersecting && entry.intersectionRatio === 1。 - 避免重复触发：当一个section进入视口后，可以先调用
unobserve取消观察，待其离开后再重新observe- 兼容性处理：需要注意的是，IE浏览器完全不支持此API。在生产环境中，需要引入polyfill，或者降级使用
getBoundingClientRect()进行手动判断。 - 兼容性处理：需要注意的是，IE浏览器完全不支持此API。在生产环境中，需要引入polyfill，或者降级使用
说到底，让滚动逻辑尽可能地贴近浏览器原生能力（scroll-snap、dvh、IntersectionObserver），是保障兼容性和性能的最佳路径。但这也意味着，开发者必须亲手处理那些“平台差异”带来的细枝末节——比如iOS键盘弹出引发的视口重计算、折叠屏设备上 dvh 的精度问题，甚至某些安卓WebView对 scroll-snap 规则的忽略。处理好这些细节，才是工程实现的关键所在。
