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

本文链接：https://blog.youkuaiyun.com/qq_35996924/article/details/148267119

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

一、面试主题概述

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

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

二、高频面试题汇总

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

三、重点题目详解

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: scroll;
    scroll-snap-type: y mandatory;
  }

  .section {
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
  }

  .section:nth-child(odd) { background: #f0f0f0; }
  .section:nth-child(even) { background: #cceeff; }
</style>

<div class="container">
  <div class="section">第一页</div>
  <div class="section">第二页</div>
  <div class="section">第三页</div>
</div>

兼容性注意：

scroll-snap 在现代浏览器表现良好，但老版 Safari/IE 兼容性差。

3. JS 实现全屏滚动如何处理滚轮事件？

当使用 JavaScript 监听 wheel 事件时，建议进行防抖处理，避免一次滚动触发多次切换。

代码片段：

let currentIndex = 0;
const sections = document.querySelectorAll('.section');
const total = sections.length;
let isScrolling = false;

window.addEventListener('wheel', (e) => {
  if (isScrolling) return;

  isScrolling = true;
  if (e.deltaY > 0 && currentIndex < total - 1) {
    currentIndex++;
  } else if (e.deltaY < 0 && currentIndex > 0) {
    currentIndex--;
  }

  window.scrollTo({
    top: window.innerHeight * currentIndex,
    behavior: 'smooth'
  });

  setTimeout(() => isScrolling = false, 1000); // 简易防抖
});

说明：

利用 window.scrollTo 控制跳转位置；
用 setTimeout 粗略模拟滚动冷却期，避免频繁触发。

四、面试官视角与加分项

1. 面试官爱问这类题的原因？

全屏滚动结合 CSS、JS、事件处理，是前端综合能力体现；
判断候选人是否掌握布局、交互、性能优化等实战技能；
对有动画功底、UI 还原能力的候选人尤为重要。

2. 如何作答更能打动面试官？

✅ 不要只停留在“用过 fullPage.js”层面，重点讲清楚原理：100vh + 滚动 + 吸附或监听。
✅ 结合浏览器滚动模型、事件防抖，展示你对交互细节的把控力。
✅ 加上一个实际项目中使用全屏滚动的例子，比如：
“我们公司官网的 landing 页面采用了 scroll-snap + 动画结合的整屏滑动方式，能显著提升用户沉浸感。”