JSFiddle - React, Tailwind, and code Playground

HTML

<div id="viewport">
  <div id="panel-container">
    <div class="panel">
      Panel 1
    </div>
    <div class="panel">
      Panel 2
    </div>
    <div class="panel">
      Panel 3
    </div>
    <div class="panel">
      Panel 4
    </div>
  </div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 400vh;
  overflow-x: hidden;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  Firefox -ms-overflow-style: none;
  Internet Explorer 10+
}

body::-webkit-scrollbar {
  WebKit width: 0;
  height: 0;
}

#viewport {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  white-space: nowrap;
}

#panel-container {
  display: flex;
  flex-direction: row-no-wrap;
  width: 400vw;
  height: 100vh;
  background: yellow;
}

.panel {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100vw;
  height: 100vh;
}

JavaScript

const viewPort = document.querySelector('#viewport');

let lastScroll = 0;
window.addEventListener('scroll', (e) => {
  let scrollY = window.scrollY;

  console.info(`scrolling ${lastScroll < scrollY ? 'forward' : 'back'}`);

  viewPort.scrollLeft = scrollY;

  lastScroll = scrollY;
  console.info(window.scrollY, viewPort.scrollLeft);
});