js 实现全屏滚动

<div class="section" id="section1">Section 1</div>
<div class="section" id="section2">Section 2</div>
<div class="section" id="section3">Section 3</div>
<!-- 更多全屏滚动的部分 -->

.section {
  height: 100vh;
  width: 100%;
  position: relative; /* 确保定位准确 */
}

let currentSection = 0;
const sections = document.querySelectorAll('.section');
const totalSections = sections.length;

window.addEventListener('wheel', (event) => {
  // 防止默认滚动行为
  event.preventDefault();

  // 判断滚动方向
  const delta = Math.sign(event.deltaY);

  if (delta > 0) {
    // 向下滚动
    currentSection = (currentSection + 1) % totalSections;
  } else if (delta < 0) {
    // 向上滚动
    currentSection = (currentSection - 1 + totalSections) % totalSections;
  }

  // 滚动到对应的全屏部分
  window.scrollTo({
    top: currentSection * window.innerHeight,
    behavior: 'smooth' // 平滑滚动
  });
});