<div class="fake-page">
  <div class="scrollbar"></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;
}

.focus {
  background-color: blue;
  width: 90%;
  height: 96%;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 2%;
}

const tl = gsap.timeline({defaults: {duration: 2, ease: "none"}, repeat: -1, repeatDelay: 1})
.to(".scrollbar", {y: 262})
.to(".focus", {y: -262}, 0)

.to(".scrollbar", {y: "-=30", ease: "power1", duration: 0.5})
.to(".focus", {y: "+=30", ease: "power1", duration: 0.5}, "<")