JSFiddle - React, Tailwind, and code Playground

by coryphoenixxx

HTML

<html>
<body>
<div class='box'>
  <div class='inner-box'></div>
  <div class='inner-box'></div>
  <div class='inner-box'></div>
  <div class='inner-box'></div>
  <div class='inner-box'></div>
  <div class='inner-box'></div>
  <div class='inner-box'></div>
  <div class='inner-box'></div>
  <div class='inner-box'></div>
</div>
</body>
</html>

CSS

.box {
  width: 30vw;
  height: 12vw;
  border: 0.1vw solid black;
  
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  overflow-y: hidden;
}

.inner-box {
  margin: 1vw;
  min-width: 7vw;
  height: 7vw;
  border: 0.1vw solid black;
}

JavaScript

const box = document.querySelector('.box');

let boxScrollPct = 0;
let ignoreScroll = false;
box.addEventListener('scroll', ({ target: t }) => {
  if (ignoreScroll) return;
  boxScrollPct = t.scrollLeft / (t.scrollWidth - t.clientWidth);
});

let timeOutId = null;

window.addEventListener('resize', e => {
  ignoreScroll = true;
  box.scrollLeft = boxScrollPct * (box.scrollWidth - box.clientWidth);
  
  clearTimeout(timeOutId);
  timeOutId = setTimeout(() => {
    ignoreScroll = false;
  }, 50);
});