CSS布局技巧：实现全屏滚动效果的最佳实践

<div class="main-container">
  <section class="section section-1">
    <!-- 第一个屏幕的内容 -->
  </section>
  <section class="section section-2">
    <!-- 第二个屏幕的内容 -->
  </section>
  <!-- 更多屏幕... -->
</div>

.main-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

document.addEventListener('wheel', function(event) {
  event.preventDefault(); // 阻止默认滚动行为
  
  var delta = event.deltaY;
  var scrollSpeed = 1000; // 滚动速度，可根据需求调整
  
  // 计算下一个要滚动到的位置
  var scrollPosition = window.pageYOffset + delta * scrollSpeed;
  
  // 滚动动画
  window.scrollTo({
    top: scrollPosition,
    behavior: 'smooth'
  });
});