JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rolagem"><div id="rolagem2"></div></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna ante, ullamcorper vitae elit sed, imperdiet feugiat mi. Vivamus mollis eleifend maximus. Ut aliquam eleifend diam, sit amet fringilla ex. Aenean nisl nisi, hendrerit eget bibendum quis, ornare nec tellus. Sed at libero gravida, volutpat lorem a, porttitor est. Nulla nulla augue, congue ut lacinia nec, tempus in mauris. Fusce enim risus, interdum consectetur metus et, sollicitudin luctus tortor. Phasellus elementum, purus nec porta eleifend, ante eros molestie enim, et suscipit erat est placerat ex. Aliquam erat volutpat.</p>
<p>Vestibulum blandit sapien at tortor tincidunt posuere. Nulla aliquam sit amet lectus nec auctor. Pellentesque velit tortor, interdum ut lectus sed, convallis accumsan augue. Sed nibh augue, commodo quis rhoncus at, dictum ac nibh. Proin finibus sollicitudin elit, vitae convallis nisl elementum non. Nam vulputate est ut metus tincidunt venenatis. Cras at ligula sagittis, posuere ex in, sagittis nibh. Donec ac ante varius nisi mollis tincidunt non et lorem. Donec vehicula hendrerit nisi mollis sodales. Fusce bibendum, tellus at ultricies sollicitudin, odio lorem auctor nisl, id accumsan erat sem id dui. Vivamus iaculis et metus ut posuere. Nullam vehicula eros vel pellentesque venenatis.</p>
<p>Donec volutpat sem nibh, a elementum ipsum tristique id. Nunc vitae turpis id leo congue vulputate. Ut metus nisl, cursus id maximus vitae, maximus ac velit. Mauris tincidunt rutrum urna, nec tincidunt mauris tristique at. Etiam nibh justo, placerat at ex et, elementum tempus elit. Praesent porta elit sed augue vehicula, sed vulputate turpis consequat. Fusce est dolor, tempor ac magna eu, fringilla laoreet tellus. Fusce id leo accumsan, viverra magna sit amet, vehicula sapien. Pellentesque sit amet ullamcorper risus. In cursus dapibus dui, nec efficitur velit posuere non. Maecenas eu ultricies est. Praesent fringilla, nisi eget...

CSS

body, html {
color: #000000;
margin: 0;
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: #454545;
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 = 0;
function criarBarraDeRolagem(){
if ($( document ).height() < $( window ).height()) 
{
return; 
}
var tamanho = $( window ).height() / $( document ).height();
$('#rolagem2').css('top', margem + ($( window ).scrollTop() * tamanho));
$('#rolagem2').height($( window ).height() * tamanho - (margem + margem) );
}

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



var dragObj = null;
$("#rolagem2, body, html").mouseup(function(){
$('body, html').removeClass("unselectable");
dragObj = null;
});

$("#rolagem2").mousedown(function(){
$('body, html').addClass("unselectable");
dragObj = this;
});

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

$(window).resize(function(){criarBarraDeRolagem()});