JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rolagem">
    <div id="rolagem2"></div>
</div>a Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem...

CSS

body, html {
    color: #000000;
    margin: 0;
    height: 2000px;
    overflow-y: hidden;
}
.unselectable {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#rolagemsetacima {
    float: left;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #F4F4F4;
    margin-top: 3px;
}
#rolagemsetabaixo {
    float: left;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #F4F4F4;
    margin-top: 3px;
}
#rolagemcima {
    position: fixed;
    right:1px;
    width: 10px;
    height: 12px;
    background-color: #FFF;
    border: #F4F4F4 solid 2px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
#rolagembaixo {
    position: fixed;
    bottom: 0;
    right:1px;
    width: 10px;
    height: 12px;
    background-color: #FFF;
    border: #F4F4F4 solid 2px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
#rolagem2 {
    position: fixed;
    right:1px;
    width: 10px;
    background-color: #FFF;
    border: #F4F4F4 solid 2px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
#rolagem {
    position: fixed;
    top: 0px;
    right:0px;
    width: 12px;
    height: 100%;
    background-color: #FFF;
    border: #F4F4F4 solid 2px;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.75);
}

JavaScript

var margem = 20;
var diff = 0;

    function criarBarraDeRolagem() {
        if ($(document).height() < $(window).height() - diff) {
            return;
        }
        if ($("#rolagem").offset().top <= $("#rolagem2").offset().top) {
            var tamanho = $(window).height() / $(document).height();
            var top = margem + ($(window).scrollTop() * tamanho) ;
            $('#rolagem2').css('top', top);
            $('#rolagem2').height($(window).height() * tamanho - (margem + margem));
        }
    }

$(document).ready(function () {
    criarBarraDeRolagem();
});

var dragObj = null;
$("#rolagem2, body, html").mouseup(function (e) {
    $('body, html').removeClass("unselectable");
    dragObj = null;
    var move = e.pageY - $("#rolagem").offset().top;
   // alert($(document).height() + ', ' + $(window).height() + ', ' + diff + ', ' + $("#rolagem").offset().top + ', ' + $("#rolagem2").offset().top + ', ' + window.pageYOffset + ', ' + diff + ', ' + move + ', '+ $(window).scrollTop());
});

$("#rolagem2").mousedown(function (e) {
    $('body, html').addClass("unselectable");
    dragObj = this;
    diff = e.pageY - $("#rolagem2").offset().top;
});

$("#rolagem2, body, html").mousemove(function (e) {
    if (dragObj) {
        var move = e.pageY - $("#rolagem").offset().top;
        var speed = $(window).height() / $("#rolagem2").height();
        $(window).scrollTop((move - diff) * speed);
        criarBarraDeRolagem();
        e.stopPropagation();
        e.preventDefault();
    }
});