如何制作全尺寸水平滚动页面？

<div class="container">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
</div>

.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
}

.section {
  width: 100vw;
  height: 100vh;
}

const container = document.querySelector('.container');
const sections = document.querySelectorAll('.section');

container.addEventListener('scroll', () => {
  const scrollPos = container.scrollLeft;
  const sectionWidth = sections[0].offsetWidth;

  const currentSection = Math.floor(scrollPos / sectionWidth);
  sections.forEach((section, index) => {
    section.classList.toggle('active', index === currentSection);
  });
});

.section {
  transition: transform 0.5s ease;
}

.section.active {
  transform: scale(1.2);
}