<div class="smooth-scroll">
  <section>1 Lorem ipsum dolor, sit amet consectetur adipisicing elit. At velit, iure inventore, tempore debitis explicabo perspiciatis dicta delectus libero animi eos ut facere earum nihil numquam praesentium qui accusamus fugit excepturi temporibus maiores repellendus? Molestias nam temporibus, quasi cupiditate voluptate consequatur ullam nesciunt. Labore ducimus amet fugiat non dolorem! Dolore nesciunt suscipit ut doloremque amet, accusamus quae vero temporibus non maxime porro dicta rem omnis quidem tenetur, quaerat minima nisi eum repellendus ratione velit nam, numquam quibusdam veniam. Ipsam tenetur cupiditate nisi voluptate sequi consectetur doloribus in ipsa tempora quas! Aliquid, ipsam officiis. Voluptas iste repellat exercitationem, odio architecto minima.</section>
  <section>2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia voluptates dolorum facere aut nam, ab, rem maxime assumenda, laboriosam laborum fugit nisi animi voluptas eaque nulla rerum vel. Necessitatibus cum hic, repellat amet dolores blanditiis quod voluptatum modi animi consequuntur sunt dolorem unde aspernatur fuga deleniti odit, rem ipsam voluptate nemo dolor neque odio. Eligendi hic inventore et neque ab illum dolor excepturi explicabo iure aliquam cum, consequatur voluptatum repellendus provident minima impedit, rem incidunt. Perspiciatis atque nobis exercitationem voluptatem assumenda in ipsa consequuntur corporis?</section>
  <section>3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur voluptate debitis ab voluptates libero voluptatibus sapiente eos optio accusamus quia, consequuntur dolorum dignissimos officia ratione facere nam magnam quis. Exercitationem, minus incidunt animi porro error obcaecati architecto velit ratione repellat dolor et vel, quasi corrupti, accusantium saepe commodi excepturi. Adipisci repellat distinctio a tenetur quam eaque. Necessitatibus officiis incidunt, libero veniam blanditiis perferendis voluptas doloremque? Aperiam, iusto vero sequi quos laboriosam tempore quam delectus enim doloremque beatae fugiat eaque praesentium eos dolorum nisi! Reprehenderit, cum laborum? A id ullam nam?</section>
  <section>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate incidunt explicabo provident veritatis iusto doloremque dignissimos sapiente beatae esse libero animi quaerat amet enim perspiciatis, blanditiis illo repudiandae culpa ex sunt atque, optio saepe? Omnis optio, perspiciatis in fugiat natus tempore non eius! Fugiat quibusdam perspiciatis assumenda quaerat accusamus nostrum laudantium laboriosam? Odio provident praesentium omnis incidunt nemo nihil. Aliquid, quos sint! Consequuntur itaque dignissimos at, corporis eos laudantium. Totam?</section>
  <section>5 Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem voluptas labore ratione impedit, at explicabo nemo voluptate molestiae consequatur officia eum tempore perspiciatis sed amet et facere similique nobis ab, perferendis eius est eaque. Dicta ex illo minus officiis consequatur velit enim blanditiis quia.</section>
</div>

<div class="smooth-scrollbar"></div>

body {
  margin: 0;
}

.smooth-scroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.smooth-scroll > section {
  font-size: 2rem;
  padding: 15px;
}


.smooth-scrollbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
}

section {
  background-color: #ccc;
}

section:nth-child(even) {
  background-color: #777;
}

const smoothCoef = 0.05;
const smoothScroll = document.querySelector(".smooth-scroll");
const smoothScrollBar = document.querySelector(".smooth-scrollbar");

function onResize(e) {
  smoothScrollBar.style.height = smoothScroll.offsetHeight + "px";
}

window.addEventListener("resize", onResize);
onResize();

let prevY = window.scrollY;
let curY = window.scrollY;
let y = window.scrollY;
let dy;

function loop(now) {
  curY = window.scrollY;
  dy = curY - prevY;
  y = Math.abs(dy) < 1 ? curY : y + dy * smoothCoef;
  prevY = y;
  smoothScroll.style.transform = `translate3d(0,${-y}px,0)`;

  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);