JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<div class="scroll">
  <div class="track">
    <div class="transform">
      <div class="sticky">
        <div class="tick"></div>
      </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);
  /* clip-path: inset(0px); */
  perspective: 1px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  perspective-origin: 0% 0%;
  background: rgba(255,255,255,.5);
}
.transform {
  visibility: hidden;
  transform: translateY(var(--scroll-port-width)) rotate(-90deg);
  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);
  display: flex;
  justify-content: flex-end;
}
.tick {
  visibility: visible;
  position: sticky;
  left: 0;
  margin: calc(var(--track-height) / 4);
  width: calc(var(--track-height) / 2);
  height: calc(var(--track-height) / 2);
  border-radius: 9999px;
  background: black;
  --transform: translateY(calc(0 * var(--scroll-port-width))) translateZ(.5px) scale(.5);
}