@desto/scrollbar-js/dist/scrollbar.js

A script which produces stylable scrollbars. It also allows styling of the resize handle.

// scrollbar.js v1.4.0 | ISC | https://github.com/desto-git/scrollbar.js
"use strict";var scrollbarjs=function(){var l="scrollbarjs",h=60,u=.9,o=200,s=50,e=document,i=e.head,d=e.body,v=e.createElement.bind(e),f=function(e,t){e.appendChild(t)},p=function(e,t,r){e.addEventListener(t,r)},L=function(e,t){e.classList.add(t)},x=function(e,t){e.classList.remove(t)},g=function(e){return 1!=(1&e.buttons)},b=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.map(function(e){return l+"-"+e}).join(" ")},m=!1,n=0,c=0,a=!1,w=!1,y=!1;!function(){var e=v("style");f(i,e),e.innerHTML="#scrollbarjs-sb-size{width:100%;height:100%;overflow:scroll;position:absolute;top:100%;}";var t=v("div");t.id="scrollbarjs-sb-size",f(d,t),n=t.offsetWidth-t.clientWidth,c=t.offsetHeight-t.clientHeight,e.innerHTML+="#scrollbarjs-sb-size::-webkit-scrollbar{display:none}#scrollbarjs-sb-size{-ms-overflow-style:none;scrollbar-width:none;}";try{a="none"===getComputedStyle(t,"::-webkit-scrollbar").display}catch(e){}var r=getComputedStyle(t);w="none"===r.msOverflowStyle,y="none"===r.scrollbarWidth,e.parentElement.removeChild(e),t.parentElement.removeChild(t)}();var H,t,T=0;(t=H||(H={}))[t.none=0]="none",t[t.ver=1]="ver",t[t.hor=2]="hor",t[t.both=3]="both";var W,k=H.none,r=function(){clearInterval(A),clearTimeout(D),T=0,x(d,b("drag")),W&&(x(W.parentElement,b("active")),W=null)};p(d,"mouseup",r),p(d,"mouseenter",function(e){g(e)&&r()});var z,M,j=0,E=0,C=0,S=0;p(d,"mousemove",function(e){if(1===T)k===H.ver?(S+=C*(e.clientY-E),O(W,void 0,Math.round(S),!0)):(S+=C*(e.clientX-j),O(W,Math.round(S),void 0,!0));else if(2===T&&k!==H.none){var t=e.clientX-j,r=e.clientY-E;if(k!==H.hor){var i=W.clientHeight;W.style.height=i+r+"px",W.style.height=getComputedStyle(W).height}if(k!==H.ver){var n=W.clientWidth;W.style.width=n+t+"px",W.style.width=getComputedStyle(W).width}}j=e.clientX,E=e.clientY}),(M=z||(z={}))[M.up=0]="up",M[M.right=1]="right",M[M.down=2]="down",M[M.left=3]="left";var D,A,N=function(e,t,r,i){if(!g(e))switch(r){case z.up:O(t,0,-i);break;case z.right:O(t,i,0);break;case z.down:O(t,0,i);break;case z.left:O(t,-i,0)}},X=b("scroll-none"),Y=b("scroll-ver"),q=b("scroll-hor"),F=b("scroll-both"),I=function(e,t){e.classList.contains(t)||(x(e,X),x(e,Y),x(e,q),x(e,F),L(e,t))},O=function(e,t,r,i,n){i?(void 0!==t&&(e.scrollLeft=t),void 0!==r&&(e.scrollTop=r)):(e.scrollLeft+=t%1==0?t:e.clientWidth*t,e.scrollTop+=r%1==0?r:e.clientHeight*r),n||i||(D=setTimeout(function(){A=setInterval(function(){O(e,t,r,i,!0)},s)},o-s))},B=[],R=b("button-inactive"),G=function(e,t){var r=t.clientHeight/t.scrollHeight,i=t.clientWidth/t.scrollWidth;1===r&&1===i?I(e,X):1!==r&&1===i?I(e,Y):1===r&&1!==i?I(e,q):1!==r&&1!==i&&I(e,F);var n=function(e,t,r){var i=e.children[t];return void 0!==r&&(i=i.children[r]),i},o=n(e,1,0),l=n(e,1,2),s=n(e,2,0),c=n(e,2,2);0===t.scrollTop?L(o,R):x(o,R),0===t.scrollLeft?L(s,R):x(s,R),t.scrollTop+t.clientHeight===t.scrollHeight?L(l,R):x(l,R),t.scrollLeft+t.clientWidth===t.scrollWidth?L(c,R):x(c,R);var a=n(e,1,1),h=n(a,0),u=n(a,1),d=n(a,2),v=n(e,2,1),f=n(v,0),p=n(v,1),g=n(v,2),b=a.clientHeight,m=v.clientWidth,w=Math.floor(b*(t.scrollTop/t.scrollHeight)),y=Math.floor(m*(t.scrollLeft/t.scrollWidth));h.style.height=w+"px",f.style.width=y+"px";var H=Math.ceil(b*r),T=Math.ceil(m*i);u.style.height=H+"px",p.style.width=T+"px";var W=b-w-H,k=m-y-T;d.style.height=W+"px",g.style.width=k+"px"},J=function(e){var t=e.children[0],r=e.clientHeight+","+e.clientWidth+"-"+t.scrollHeight+","+t.scrollWidth,i=t.scrollTop+","+t.scrollLeft,n=t.dataset.scrollbarjs.split(" ");if(n[0]!==r)!function(e,t){if(e.clientHeight<t.scrollHeight){var r=t.scrollTop;t.style.height="",e.clientHeight<t.scrollHeight?t.style.height=e.clientHeight+c+1+"px":t.style.height=e.clientHeight+c+"px",t.scrollTop=r}else t.style.height=e.clientHeight+c+"px"}(e,t),G(e,t);else{if(n[1]===i)return;G(e,t)}t.dataset.scrollbarjs=r+" "+i};return requestAnimationFrame(function e(){B.forEach(J),requestAnimationFrame(e)}),{add:function(n){if(!m)throw new Error("scrollbarjs has not been initialized yet");var e;e="BODY"===n.tagName?"div":"TEXTAREA"===n.tagName?"div":n.tagName;var c=function(e,t,r){void 0===r&&(r="div");var i=v(r);return i.className=b(e,t),i},a=c("viewport",void 0,e);a.dataset.scrollbarjs=" ",a.innerHTML=n.innerHTML,n.innerHTML="",f(n,a);var t=function(t,e,r){var i=function(t){var e=c("button",t);return p(e,"mousedown",function(e){return N(e,a,z[t],h)}),e},n=function(t){var e=c("track-piece","track-"+t);return p(e,"mousedown",function(e){return N(e,a,z[t],u)}),e},o=c("track","track-"+t),l=c("thumb","thumb-"+t);p(l,"mousedown",function(e){return function(e,t,r){if(!g(e)){L(d,b("drag")),L(t.parentElement,b("active"));var i=e.target.parentElement;T=1,W=t,C=(k=r)===H.ver?(S=t.scrollTop,t.scrollHeight/i.clientHeight):(S=t.scrollLeft,t.scrollWidth/i.clientWidth)}}(e,a,H[t])}),f(o,n(e)),f(o,l),f(o,n(r));var s=c("scrollbar",t,"aside");return f(s,i(e)),f(s,o),f(s,i(r)),s};f(n,t("ver","up","down")),f(n,t("hor","left","right"));var r=c("corner"),i=getComputedStyle(n).resize;if("both"===i||"horizontal"===i||"vertical"===i){var o;switch(L(n,b("resizable")),i){case"vertical":o="ver";break;case"horizontal":o="hor";break;case"both":o="both"}L(r,b("resize-"+o)),p(r,"mousedown",function(e){return t=e,r=n,i=H[o],void(g(t)||(L(d,b("drag")),T=2,k=i,W=r));var t,r,i})}f(n,r),L(n,l),B.push(n)},init:function(e){if(m)throw new Error("scrollbarjs cannot be initialized more than once");void 0!==e&&(e.prefix&&(l=e.prefix),e.buttonDistance&&(h=e.buttonDistance),e.trackDistance&&(u=e.trackDistance),e.delay&&(o=e.delay),e.repeat&&(s=e.repeat));var t=v("style");return t.innerHTML="body."+l+"{height:100vh;}."+b("drag")+"{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}."+l+"{overflow:hidden;position:relative;}."+b("viewport")+"{overflow:scroll;margin-right:"+-n+"px;margin-bottom:"+-c+"px;}."+b("resizable")+"{resize:none!important;}",f(i,t),m=!0,{nativeHeight:c,nativeWidth:n,nativeDisplaces:0<c||0<n,supportsWebkitStyling:a,supportsMsHiding:w,supportsScrollbarWidth:y}}}}();