JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="scroller">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, laudantium debitis similique maiores qui nisi voluptates autem rem vero sint fuga vitae aspernatur reiciendis dicta dolorem placeat cumque. Expedita, maiores.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium possimus, nulla libero, qui voluptatem sapiente!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora exercitationem, sed suscipit esse quia commodi, culpa magnam praesentium optio veniam quam, atque labore amet omnis minus ea! Tempore, debitis dolorem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla laborum vero dolor illum ad optio, ullam sunt, incidunt consectetur exercitationem fuga porro animi architecto non ea hic maiores consequuntur sequi!</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, laudantium debitis similique maiores qui nisi voluptates autem rem vero sint fuga vitae aspernatur reiciendis dicta dolorem placeat cumque. Expedita, maiores.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium possimus, nulla libero, qui voluptatem sapiente!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora exercitationem, sed suscipit esse quia commodi, culpa magnam praesentium optio veniam quam, atque labore amet omnis minus ea! Tempore, debitis dolorem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla laborum vero dolor illum ad optio, ullam sunt, incidunt consectetur exercitationem fuga porro animi architecto non ea hic maiores consequuntur sequi!</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, laudantium debitis similique maiores qui nisi voluptates autem rem vero sint fuga vitae aspernatur reiciendis dicta dolorem placeat cumque. Expedita, maiores.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium possimus, nulla libero, qui voluptatem...

SCSS

.scroller {
  width: 500px;
  height: 300px;
  overflow: hidden;
  &__inner {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
  }
  &__body {
    display: block;
    height: 100%;
    width: 100%;
    margin-right: -30px;
    padding-right: 30px;
    overflow: auto;
  }
  &-scrollbar {
    &__track {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 10px;
      background: #ddd;
    }
    &__thumb {
      width: 100%;
      height: 20px;
      background: #000;
      position: relative;
    }
  }
}

JavaScript

var scroller = $('.scroller');

scroller.wrapInner('<div class="scroller__inner"><div class="scroller__body"></div></div>');

var scrollerInner = scroller.children('.scroller__inner'),
		scrollerBody = scrollerInner.children('.scroller__body');

scrollerInner.append('<div class="scroller-scrollbar"><div class="scroller-scrollbar__track"><div class="scroller-scrollbar__thumb"></div></div></div>');

var scrollerScrollbar = scrollerInner.children('.scroller-scrollbar'),
		scrollerScrollbarTrack = scrollerScrollbar.children('.scroller-scrollbar__track'),
		scrollerScrollbarThumb = scrollerScrollbarTrack.children('.scroller-scrollbar__thumb');

scrollerScrollbarThumb.height(scroller.height() / scrollerBody[0].scrollHeight * 100 + '%');

scrollerBody.on('scroll', function(){
	scrollerScrollbarThumb.css('top', (scrollerBody.scrollTop() / scrollerBody[0].scrollHeight * scroller.height()) / scroller.height() * 100 + '%');
});

scrollerScrollbarTrack.on('click', function(e){
	scrollerBody.animate({
  	scrollTop: (e.offsetY / $(this).height()) * scrollerBody[0].scrollHeight
  }, 300);
});

scrollerScrollbarThumb.on('click', function(e){
	e.stopPropagation(); 
});