全屏滚动的原理是什么？用到了哪些 CSS 属性？一文搞懂！

---

导语：
在前端开发与面试中，全屏滚动（Fullpage Scroll）常作为 UI 表现力与动效能力的展示题。不少面试官借此考察候选人对布局、滚动机制、CSS 属性的掌握程度。本文从原理出发，讲清全屏滚动的核心实现方式、常考点与项目应用，助你在面试中答得漂亮！

---

一、面试主题概述

全屏滚动，又叫“整屏滑动”或“分页滚动”，是一种用户滚动页面时，视口会一次性滚动到下一个完整区域的 UI 模式。常见于营销页、展示型官网（如 Apple 官网）或 H5 页面。

这个功能虽可依赖库（如 fullPage.js），但面试中更看重你是否理解其背后的 CSS 布局基础 与 JS 滚动控制逻辑。

---

二、高频面试题汇总

1. 全屏滚动的原理是什么？
2. 如何用纯 CSS 实现整屏切换效果？
3. 实现全屏滚动时常用的 CSS 属性有哪些？
4. JS 实现全屏滚动时如何防抖处理滚轮事件？
5. 如何实现“锚点定位 + 平滑滚动”效果？

---

三、重点题目详解

1. 全屏滚动的原理是什么？

答题思路：
全屏滚动的本质，是将每个页面 section 的高度设置为视口高度 100vh，并通过监听滚动事件或设置锚点跳转，实现“整屏”切换。

实现方式常见有两种：

• CSS scroll-snap 属性实现“吸附式”整屏滚动；
• JS 监听滚轮事件，计算并滚动至目标区域。

---

2. 如何用 CSS 实现全屏滚动？

核心属性：

• height: 100vh; → 设置每一屏等于视口高度；
• scroll-snap-type → 启用父容器吸附滚动；
• scroll-snap-align → 子元素对齐方式；
• overflow-y: scroll; → 开启滚动。

代码示例：

<style>
  html, body {
     
     
    margin: 0;
    height: 100%;
    overflow: hidden;
  }

  .container {
     
     
    height: 100vh;
    overflow-y:</