<div class="section">
  <h1 class="section__title">Section 1</h1>
</div>
<div class="section">
  <h1 class="section__title">Section 2</h1>
</div>
<div class="section">
  <h1 class="section__title">Section 3</h1>
</div>
<div class="section">
  <h1 class="section__title">Section 4</h1>
</div>
<div class="section">
  <h1 class="section__title">Section 5</h1>
</div>
<div class="section">
  <h1 class="section__title">Section 6</h1>
</div>

body {
  margin: 0;
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
}

.section {
  height: 100vh;
  padding: 64px;
  box-sizing: border-box;
}

.section__title {
  margin: 0;
  font-weight: 400;
  font-size: 64px;
}

const sections = document.querySelectorAll('.section');
let current = 0;

const throttle = (callback, delay) => {
  let callable = true;
  
  return function (...args) {
    if (callable) {
      callable = false;
      callback.apply(this, args);
      
      setTimeout(() => {
        callable = true;
      }, delay);
    } 
  }
};

const changeSection = throttle(event => {
  const direction = Math.sign(event.deltaY);
  current = Math.max(0, Math.min(current + direction, sections.length - 1));
  
  sections[current].scrollIntoView({
    behavior: 'smooth'
  });
}, 300);

window.addEventListener('wheel', event => {
  event.preventDefault();
  
  changeSection(event);
}, {
  passive: false
});