如何实现滚动时单独展示网站的不同板块

你提到的这种滚动时逐屏展示网站板块的效果，业内叫全屏滚动（Fullpage Scrolling），也常被称为单页滚动效果，核心是每次滚动只切换一个占满视口的板块，和你给出的示例站效果一致。下面是几种实现方案：

一、用第三方库（推荐，省心高效） #

成熟的第三方库已经处理好了兼容性、滚动防抖、动画细节等问题，直接用就行：

• fullPage.js：最常用的全屏滚动库，支持鼠标滚轮、键盘、触摸等多种触发方式，还能自定义板块过渡动画、添加导航点。
  基础用法：
  1. 引入库的CSS和JS文件
  2. 页面结构：外层容器包裹多个section类的板块
  3. 初始化代码：

  new fullpage('#fullpage', {
    sectionsColor: ['#f5f5f5', '#2c3e50', '#3498db'],
    navigation: true, // 显示侧边导航点
    scrollBar: false // 隐藏默认滚动条
  });
  

• Scrollify：轻量级库，配置简单，适合需求不复杂的场景，核心功能就是全屏滚动切换。

二、原生JS自定义实现 #

如果不想依赖第三方库，自己写也不难，核心思路是监听滚动事件，控制页面滚动到对应板块：

1. 先给每个板块设置height: 100vh，确保每个板块占满整个视口
2. 监听鼠标滚轮或触摸事件，判断滚动方向
3. 锁定滚动状态，避免连续滚动导致的多次切换，然后平滑滚动到目标板块
4. 记得阻止默认滚动行为，防止和浏览器原生滚动冲突

示例代码：

<div class="section">第一屏内容</div>
<div class="section">第二屏内容</div>
<div class="section">第三屏内容</div>

<style>
body {
  margin: 0;
  overflow-x: hidden;
}
.section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.section:nth-child(1) { background: #f5f5f5; }
.section:nth-child(2) { background: #2c3e50; color: white; }
.section:nth-child(3) { background: #3498db; color: white; }
</style>

<script>
const sections = document.querySelectorAll('.section');
let currentIndex = 0;
let isTransitioning = false;

// 监听鼠标滚轮事件
window.addEventListener('wheel', handleScroll);
// 监听键盘上下键
window.addEventListener('keydown', handleKeydown);

function handleScroll(e) {
  if (isTransitioning) return;
  isTransitioning = true;

  // 判断滚动方向：向下滚deltaY为正，向上为负
  const direction = e.deltaY > 0 ? 1 : -1;
  // 计算目标板块索引，边界限制
  currentIndex = Math.max(0, Math.min(sections.length - 1, currentIndex + direction));

  // 平滑滚动到目标板块
  window.scrollTo({
    top: sections[currentIndex].offsetTop,
    behavior: 'smooth'
  });

  // 1秒后解锁滚动，避免连续触发
  setTimeout(() => {
    isTransitioning = false;
  }, 1000);
}

function handleKeydown(e) {
  if (isTransitioning) return;
  if (e.key === 'ArrowDown') {
    currentIndex = Math.min(sections.length - 1, currentIndex + 1);
  } else if (e.key === 'ArrowUp') {
    currentIndex = Math.max(0, currentIndex - 1);
  } else {
    return;
  }
  window.scrollTo({
    top: sections[currentIndex].offsetTop,
    behavior: 'smooth'
  });
  isTransitioning = true;
  setTimeout(() => isTransitioning = false, 1000);
}
</script>

三、注意要点 #

• 兼容性：原生实现要注意旧浏览器的事件差异，比如wheel事件在IE中需要用mousewheel替代，触摸设备要监听touchstart和touchmove事件
• 性能优化：滚动事件触发频率高，建议用节流函数或者requestAnimationFrame来优化，避免页面卡顿
• 无障碍访问：要支持键盘导航（如上示例的上下键），给板块添加合适的ARIA属性，确保屏幕阅读器能正常识别

内容的提问来源于stack exchange，提问作者Ankit Chandwada