Горизонтальный скролл

<section class="hscroll">   <!-- 340vh -->
  <div class="stick">
    <div class="track">
      <div class="panel">01</div>
      <div class="panel">02</div>
      <div class="panel">03</div>
    </div>
  </div>
</section>

<style>
.hscroll { position: relative; height: 340vh; }
.hscroll .stick { position: sticky; top: 0; height: 100vh;
  overflow: hidden; display: flex; align-items: center; }
.track { display: flex; gap: 3vw; padding: 0 8vw; will-change: transform; }
.panel { flex: 0 0 62vw; aspect-ratio: 16/10; }
</style>

<script>
// вертикальный скролл двигает ленту горизонтально
var scene = document.querySelector(".hscroll");
var track = scene.querySelector(".track");
var cur = NaN;
function loop() {
  var r = scene.getBoundingClientRect();
  var t = Math.min(Math.max(-r.top / (r.height - innerHeight), 0), 1);
  if (isNaN(cur)) cur = t;
  cur += (t - cur) * 0.1;                     // лерп-доводка
  var dist = track.scrollWidth - innerWidth;  // сколько ехать
  track.style.transform = "translate3d(" + (-cur * dist) + "px,0,0)";
  requestAnimationFrame(loop);
}
if (!matchMedia("(prefers-reduced-motion: reduce)").matches)
  requestAnimationFrame(loop);
</script>

Сделай горизонтальную скролл-секцию: секция высотой 340vh, внутри sticky-экран с overflow:hidden и flex-лентой панелей (каждая 60-65vw). Прогресс вертикальной прокрутки секции p = clamp(-rect.top/(rect.height - innerHeight),0,1) с лерп-доводкой 0.1; лента сдвигается translate3d(-p * (track.scrollWidth - innerWidth), 0, 0). Высоту секции подбирай пропорционально длине ленты. При prefers-reduced-motion — обычная вертикальная раскладка.