<div class="fake-page">
  <div class="scrollbar"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  
  <div class="focus"></div>
</div>

* { box-sizing: border-box; }
.fake-page {
  width: 400px;
  height: 500px;
  position: relative;
  border: 10px solid black;
  border-radius: 10px;
  overflow: hidden;
}
.scrollbar {
  width: 4%;
  height: 20%;
  position: absolute;
  top: 2%;
  right: 2%;
  background-color: black;
  border-radius: 50px;
}
.content {
  position: absolute;
  top: 40%;
  left: 2%;
  width: 90%;
  height: 3%;
  border-radius: 50px;
  background-color: black;
}
.focus {
  background-color: blue;
  width: 90%;
  height: 10%;
  border-radius: 10px;
  position: absolute;
  top: 30%;
  left: 2%;
}

gsap.set(".content", {top: i => 45 + (i * 7) + "%"});

const tl = gsap.timeline({defaults: {duration: 3, ease: "none"}, repeat: -1, repeatDelay: 1})
.to(".scrollbar", {yPercent: 384})
.to(".content", {y: -500}, 0)
.to(".focus", {yPercent: -284, duration: 0.852}, 0)