js全屏滚动

基础概念：全屏滚动（Fullpage Scroll）是一种网页设计技术，它允许用户通过滚动鼠标滚轮或使用键盘导航来切换页面的不同部分，每个部分通常占据整个视口。这种技术常用于创建沉浸式的用户体验，特别是在展示作品集、产品介绍或任何需要分步骤展示内容的场景。

优势：

增强用户体验：通过全屏滚动，用户可以更直观地浏览网站内容，无需点击多个链接。
视觉冲击力：每个全屏页面可以设计得更具视觉吸引力，从而提升品牌形象。
易于导航：简单的滚动操作使得用户能够轻松地在不同部分之间切换。

类型：

垂直滚动：页面按垂直方向分屏。
水平滚动：页面按水平方向分屏。
混合滚动：结合垂直和水平滚动。

应用场景：

网站首页：用于展示公司的核心价值和特色服务。
产品展示页：逐屏展示产品的特点和使用场景。
故事叙述：通过全屏滚动讲述一个连续的故事。
教育平台：分步骤讲解复杂的概念或教程。

常见问题及解决方法：

滚动不流畅：
- 原因：可能是由于页面元素过多或JavaScript执行效率低。
- 解决方法：优化页面结构，减少DOM操作，使用requestAnimationFrame来平滑滚动效果。

响应式设计问题：
- 原因：在不同设备上显示效果不一致。
- 解决方法：使用媒体查询和flexbox布局来确保在各种屏幕尺寸上的适应性。
键盘导航问题：
- 原因：用户可能依赖键盘进行导航，但页面未提供相应的支持。
- 解决方法：添加键盘事件监听器，允许用户通过上下箭头键进行滚动。

示例代码（使用原生JavaScript实现简单的全屏滚动）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen Scroll Example</title>
<style>
  body, html { height: 100%; margin: 0; overflow: hidden; }
  .section { height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; font-size: 2em; }
  #section1 { background-color: #f06; }
  #section2 { background-color: #0f6; }
  #section3 { background-color: #06f; }
</style>
</head>
<body>
<div id="section1" class="section">Section 1</div>
<div id="section2" class="section">Section 2</div>
<div id="section3" class="section">Section 3</div>

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

  function scrollToSection(index) {
    sections[index].scrollIntoView({ behavior: 'smooth' });
    currentSection = index;
  }

  window.addEventListener('wheel', (event) => {
    if (event.deltaY > 0 && currentSection < sections.length - 1) {
      scrollToSection(currentSection + 1);
    } else if (event.deltaY < 0 && currentSection > 0) {
      scrollToSection(currentSection - 1);
    }
  });
</script>
</body>
</html>

这段代码创建了一个简单的三屏全屏滚动页面，用户可以通过鼠标滚轮在不同部分之间平滑切换。