Custom Tau Scrollbar

customtauscrollbar.js

var selector = $("body")
var color = "white"
selector.append($('<canvas width="360" height="360" id="scrollbarcanvas"></canvas>'));var c=document.getElementById("scrollbarcanvas");var ctx=c.getContext("2d");ctx.lineCap='round';back();function scrollperc(){return(getElementScrollScale(selector[0]))}var timer;function getElementScrollScale(domElement){return domElement.scrollTop/(domElement.scrollHeight-domElement.clientHeight)}var pagel;selector.scroll(function(){clearTimeout(timer);$("#scrollbarcanvas").addClass("visible");timer=setTimeout(function(){$("#scrollbarcanvas").removeClass("visible")},500);ctx.save();ctx.setTransform(1,0,0,1,0,0);ctx.clearRect(0,0,c.width,c.height);ctx.restore();pagel=(360/selector[0].scrollHeight);if(pagel<0.25){pagel=0.25}back();front()});var sheet=window.document.styleSheets[0];sheet.insertRule('::-webkit-scrollbar {display: none;}',sheet.cssRules.length);sheet.insertRule('#scrollbarcanvas{transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 500ms;transform: scale(1.1);opacity: 0;pointer-events: none;position: fixed;top :0px;left : 0px;border-radius: 180px;}',sheet.cssRules.length);sheet.insertRule('#scrollbarcanvas.visible{opacity: 1 !important;transform: scale(1);}',sheet.cssRules.length);function back(){var x=180;var y=180;var radius=150;var startAngle=1.75*Math.PI;var endAngle=0.25*Math.PI;var counterClockwise=false;ctx.beginPath();ctx.arc(x,y,radius,startAngle,endAngle,counterClockwise);ctx.lineWidth=15;ctx.strokeStyle="rgba(121, 121, 121, 0.153)";ctx.stroke()}function front(){var x=180;var y=180;var radius=150;var xtop=0;var xheight=90*pagel;var startAngle=(90*scrollperc());startAngle=(startAngle)/180*Math.PI;startAngle=startAngle*(1-pagel);startAngle=startAngle-(45/180*Math.PI);var endAngle=startAngle+(Math.PI*(xheight/180));var counterClockwise=false;ctx.beginPath();ctx.arc(x,y,radius,startAngle,endAngle,counterClockwise);ctx.lineWidth=10;ctx.strokeStyle=color;ctx.stroke()}