JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
 ...

JavaScript

/* We define our function 🕹 */
    function replaceVerticalScrollByHorizontal() {
      let scrollX = window.scrollX; /* Horizontal ➡️ */
      let scrollY = window.scrollY; /* Vertical ⬇️ */
      console.log({scrollX, scrollY});

      if (scrollY !== 0) {
        /* If there is a changement in verticalScroll 🔄 ⬇️ */
        const tempScrollY = scrollY; /* We create a temporary var to stock our scrollY value */
        scrollX = scrollY; /* Horizontal = Vertical */
        scrollY = 0; /* We reset the vertical because we don't want any vertical scroll */
        window.scrollTo(scrollX, scrollY); /* We scroll to our value */
        scrollY = tempScrollY; /* We replace the value of our vertical var with the temporary one */
      }
      /* If no verticalScroll changement, exit of this function 🙌 ⬇️ */
      return;
    }

    /* Listener on window once we start scrolling, we run our function 💨 */
    window.addEventListener('scroll', replaceVerticalScrollByHorizontal);