Skip to content

Instantly share code, notes, and snippets.

View berkaytumal's full-sized avatar

Berkay Tumal berkaytumal

  • İstanbul
  • 19:14 (UTC +03:00)
View GitHub Profile
@berkaytumal
berkaytumal / customtauscrollbar.js
Created May 8, 2021 14:33
Custom Tau Scrollbar
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