<div class="container">
  <div class="page">Page1</div>
  <div class="page">Page2</div>
  <div class="page">Page3</div>
</div>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}


.container {
  display: flex;
  overflow-x: scroll;
}

.page {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
}

.page:nth-child(1) {
  background: hsl(140deg, 50%, 50%);
}

.page:nth-child(2) {
  background: hsl(210deg, 50%, 50%);;
}

.page:nth-child(3) {
  background: hsl(270deg, 50%, 50%);;
}


let container = document.querySelector(".container");
container.addEventListener("wheel", (event) => {
  event.preventDefault();
  container.scrollLeft += event.deltaY;
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.