JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll">
  <div class="track">
    <div class="transform">
      <div class="sticky"></div>
    </div>
  </div>
</div>

CSS

.scroll {
  --track-height: 2rem;
  --scroll-port-height: 100vh;
  --scroll-port-width: 100vw;
  --scroll-box-height: calc(100vw - var(--track-height) + var(--scroll-port-height));
  position: fixed;
  top: 0;
  left: 0;
  width: var(--scroll-port-width);
  overflow-y: scroll;
  height: var(--scroll-port-height);
}
.scroll::after {
  content: '';
  display: block;
  height: calc(var(--scroll-box-height));
  background-image: repeating-linear-gradient(to bottom, #666 0rem, #666 var(--track-height), #333 var(--track-height), #333 calc(var(--track-height)*2));
}
.track {
  height: var(--track-height);
  perspective: 1px;
  
  margin-bottom: calc(-1 * var(--track-height));
  perspective-origin: 0% 0%;
  background: rgba(255,255,255,.5);
}
.transform {
  transform: translateY(calc(0.5 * var(--scroll-port-width))) rotate(-90deg) translateZ(.5px) scale(.5);
  transform-origin: 0% 0%;
  height: calc(var(--scroll-port-width));
}
.sticky {
  position: sticky;
  top: 0;
  height: var(--track-height);
  visibility: visible;
  background-color: red;
}