dumogu-scrollbar/dist/dumogu-scrollbar.cjs.js

A simple custom scrollbar plugin

/*!
 * dumogu-scrollbar v0.0.8
 * Copyright 2025 wuzhanggui https://github.com/wurencaideli
 * Licensed under MIT
 */
"use strict";function t(t,e){t.classList.add(e)}function e(t,e){t.classList.remove(e)}function i(t){return t.getBoundingClientRect()}class s{isMounted=!1;isDestroyed=!1;constructor(){}destroy(){this.isDestroyed=!0}mount(){this.isMounted=!0}unmount(){this.isMounted=!1}}class o extends s{#t;#e;#i;#s;#o=!1;#r=!0;#n=!1;#l=!1;#a=!1;#h=!1;#_=!1;#d=!1;#u=0;#g=0;#c=0;#p;#E;#m;#v;#w;#y;#T;#M;#C;#b;#S;#D;constructor(e){super();const i=document.createElement("div"),s=document.createElement("div"),o=document.createElement("div");t(i,"dumogu-scrollbar-target-rail"),t(s,"dumogu-scrollbar-target-rail-container"),t(o,"dumogu-scrollbar-target-thumb"),t(i,"hidden"),i.appendChild(s),s.appendChild(o),this.#e=i,this.#i=s,this.#s=o,this.#l=e.stopClickPropagation,this.#r=e.isX,this.#n=e.keepShow,this.#k()}set targetEl(t){this.#t=t}get targetEl(){return this.#t}set railEl(t){this.#e=t}get railEl(){return this.#e}set railContainerEl(t){this.#i=t}get railContainerEl(){return this.#i}set thumbEl(t){this.#s=t}get thumbEl(){return this.#s}set targetIsWidow(t){this.#o=t}get targetIsWidow(){return this.#o}set stopClickPropagation(t){this.#l=t}get stopClickPropagation(){return this.#l}set isX(t){this.#r=t,this.#k()}get isX(){return this.#r}set keepShow(t){this.#n=t,this.#k()}get keepShow(){return this.#n}set isDragging(t){this.#a=t,this.#k()}get isDragging(){return this.#a}set isHover(t){this.#_=t,this.#k()}get isHover(){return this.#_}set isTargetHover(t){this.#d=t,this.#k()}get isTargetHover(){return this.#d}set proportion(t){this.#u=t,this.#f(),this.#x()}get proportion(){return this.#u}bind(t){this.isDestroyed||(this.#t=t,this.#o=!t,this.#X(),this.#P())}#f(){if(this.isDestroyed)return;const i=this.#e;this.#u>=1?t(i,"hidden"):e(i,"hidden")}#k(){if(this.isDestroyed)return;const i=this.#e,s=this.#i,o=this.#s;this.#n?t(i,"keep-show"):e(i,"keep-show"),this.#a?t(i,"dragging"):e(i,"dragging"),this.#_?t(i,"hover"):e(i,"hover"),this.#d?t(i,"target-hover"):e(i,"target-hover"),this.#r?(e(i,"y"),e(s,"y"),e(o,"y"),t(i,"x"),t(s,"x"),t(o,"x")):(e(i,"x"),e(s,"x"),e(o,"x"),t(i,"y"),t(s,"y"),t(o,"y"))}#L(){const t=this.#t,e=this.#o;let i=0,s=0,o=0;return this.#r?(i=e?window.innerWidth:t.clientWidth,s=e?document.documentElement.scrollWidth:t.scrollWidth,o=e?window.scrollX:t.scrollLeft):(i=e?window.innerHeight:t.clientHeight,s=e?document.documentElement.scrollHeight:t.scrollHeight,o=e?window.scrollY:t.scrollTop),{clientSize:i,scrollSize:s,scrollStart:o}}#H(t){if(this.isDestroyed)return;const e=this.#t,i=this.#o;this.#r?i?window.scrollTo(t,window.scrollY):e.scrollLeft=t:i?window.scrollTo(window.scrollX,t):e.scrollTop=t}update(){this.#W()}#W(){if(this.isDestroyed)return;const t=this.#L();let e=0,i=0;e=t.clientSize/t.scrollSize,i=t.scrollStart/(t.scrollSize-t.clientSize),this.#p=Math.min(i,1),this.proportion=Math.min(e,1)}#x(){if(this.isDestroyed)return;const t=this.#i,e=this.#s,i=this.#u,s=this.#p,o=this.#r?t.clientWidth:t.clientHeight,r=Math.max(o*i,30),n=(o-r)*s/o*100;this.#r?(e.style.width=r+"px",e.style.left=n+"%"):(e.style.height=r+"px",e.style.top=n+"%")}#I(t){if(this.isDestroyed)return;this.isDragging=!0,this.#h=!0;const e=i(this.#s);this.#r?this.#g=(t.x-e.x)/e.width:this.#c=(t.y-e.y)/e.height}#Y(t){if(this.isDestroyed)return;if(!this.#a)return;const e=this.#L(),s=this.#i,o=this.#s,r=i(s),n=i(o),l=t.x,a=t.y;let h;h=this.#r?(l-r.x-n.width*this.#g)/(r.width-n.width):(a-r.y-n.height*this.#c)/(r.height-n.height),h*=e.scrollSize-e.clientSize,this.#H(h)}#A(){this.isDestroyed||(this.isDragging=!1,setTimeout(()=>{this.#h=!1}))}#z(){this.isDestroyed||this.#W()}#B(t){if(this.isDestroyed)return;if(this.#h)return;this.#l&&t.stopPropagation();const e=this.#L(),s=i(this.#s);let o;this.#r?(t.x>s.x+s.width&&(o=!0),t.x<s.x&&(o=!1)):(t.y>s.y+s.height&&(o=!0),t.y<s.y&&(o=!1)),void 0!==o&&(o?this.#H(e.scrollStart+e.clientSize):this.#H(e.scrollStart-e.clientSize))}#U(){this.isHover=!0,this.#W()}#N(){this.isHover=!1,this.#W()}#R(t){const e=this.#e;t&&t.target===e&&"opacity"===t.propertyName&&this.#W()}#j(t){const e=this.#e;t&&t.target===e&&"opacity"===t.propertyName&&this.#W()}#q(){this.isTargetHover=!0,this.#W()}#F(){this.isTargetHover=!1,this.#W()}#P(){const t=this.#t,e=this.#e,i=this.#s,s=this.#i,o=this;o.#E=function(t){o.#I(t)},o.#m=function(t){o.#Y(t)},o.#v=function(t){o.#A(t)},o.#y=function(t){o.#z(t)},o.#w=function(t){o.#B(t)},o.#T=function(t){o.#U(t)},o.#M=function(t){o.#N(t)},o.#S=function(t){o.#R(t)},o.#D=function(t){o.#j(t)},o.#C=function(t){o.#q(t)},o.#b=function(t){o.#F(t)};const r="addEventListener";i[r]("mousedown",o.#E),document[r]("mousemove",o.#m),document[r]("mouseup",o.#v),s[r]("click",o.#w),this.#o?(window[r]("scroll",o.#y),document[r]("mouseenter",o.#C),document[r]("mouseleave",o.#b)):(t[r]("scroll",o.#y),t[r]("mouseenter",o.#C),t[r]("mouseleave",o.#b)),e[r]("mouseenter",o.#T),e[r]("mouseleave",o.#M),e[r]("transitionstart",o.#S),e[r]("transitionend",o.#D)}#X(){const t=this.#t,e=this.#e,i=this.#s,s=this.#i,o="removeEventListener";i[o]("mousedown",this.#E),document[o]("mousemove",this.#m),document[o]("mouseup",this.#v),s[o]("click",this.#w),this.#o?(window[o]("scroll",this.#y),document[o]("mouseenter",this.#C),document[o]("mouseleave",this.#b)):(t[o]("scroll",this.#y),t[o]("mouseenter",this.#C),t[o]("mouseleave",this.#b)),e[o]("mouseenter",this.#T),e[o]("mouseleave",this.#M),e[o]("transitionstart",this.#S),e[o]("transitionend",this.#D)}destroy(){this.isDestroyed||(super.unmount(),super.destroy(),this.#X(),this.#e=void 0,this.#i=void 0,this.#s=void 0,this.#E=void 0,this.#m=void 0,this.#v=void 0,this.#w=void 0,this.#y=void 0,this.#T=void 0,this.#M=void 0,this.#C=void 0,this.#b=void 0,this.#S=void 0,this.#D=void 0)}}exports.DumoguScrollbar=class extends s{#t;#G;#J=!0;#o=!0;#K;#O;#Q;#V;get targetEl(){return this.#t}set targetEl(t){this.#t=t}get mountContainerEl(){return this.#G}set mountContainerEl(t){this.#G=t}get mountedToBody(){return this.#J}set mountedToBody(t){this.#J=t}get targetIsWidow(){return this.#o}set targetIsWidow(t){this.#o=t}get scrollbarEl(){return this.#K}set scrollbarEl(t){this.#K=t}get scrollbarTargetEl(){return this.#O}set scrollbarTargetEl(t){this.#O=t}get railX(){return this.#Q}set railX(t){this.#Q=t}get railY(){return this.#V}set railY(t){this.#V=t}constructor(e={}){super();const i=document.createElement("div"),s=document.createElement("div"),r=new o({isX:!0,keepShow:e.keepShow,stopClickPropagation:e.stopClickPropagation}),n=new o({isX:!1,keepShow:e.keepShow,stopClickPropagation:e.stopClickPropagation});t(i,"dumogu-scrollbar"),t(s,"dumogu-scrollbar-target"),s.appendChild(r.railEl),s.appendChild(n.railEl),i.appendChild(s),this.#K=i,this.#O=s,this.#Q=r,this.#V=n}bind(t){this.isDestroyed||(this.#t=t,this.#o=!t,this.#Q.bind(t),this.#V.bind(t))}mount(t){this.isDestroyed||(super.mount(),this.#G=t,t?(t.appendChild(this.#K),this.#J=!1):(document.body.appendChild(this.#K),this.#J=!0),this.#k(),this.#Z())}unmount(){var t;this.isDestroyed||(super.unmount(),(t=this.#K)&&t.parentNode&&t.parentNode.removeChild(t))}#k(){if(this.isDestroyed)return;const i=this.#K;this.#J?t(i,"mounted-to-body"):e(i,"mounted-to-body"),this.#o?t(i,"is-window"):e(i,"is-window")}update(){if(this.isDestroyed)return;const t=this.#Q,e=this.#V;this.#Z(),t.isDragging||t.update(),e.isDragging||e.update()}#Z(){if(this.isDestroyed)return;const t=this.#t,e=this.#G,s=this.#K,o=this.#O;if(this.#o)return o.style.width="100%",void(o.style.height="100%");if(this.#J){const e=i(t);return o.style.width=e.width+"px",o.style.height=e.height+"px",o.style.top=e.y+"px",void(o.style.left=e.x+"px")}const r=i(s),n=i(t),l=i(e);o.style.width=n.width+"px",o.style.height=n.height+"px",o.style.top=n.y-l.y-(r.y-l.y)+"px",o.style.left=n.x-l.x-(r.x-l.x)+"px"}destroy(){this.isDestroyed||(this.unmount(),super.destroy(),this.#Q.destroy(),this.#V.destroy(),this.#Q=void 0,this.#V=void 0,this.#t=void 0,this.#G=void 0,this.#K=void 0,this.#O=void 0)}},exports.Rail=o;
//# sourceMappingURL=dumogu-scrollbar.cjs.js.map