dumogu-scrollbar/dist/dumogu-scrollbar.umd.js

A simple custom scrollbar plugin

/*!
 * dumogu-scrollbar v0.0.8
 * Copyright 2025 wuzhanggui https://github.com/wurencaideli
 * Licensed under MIT
 */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["dumogu-scrollbar"]={})}(this,function(t){"use strict";function e(t,e){t.classList.add(e)}function i(t,e){t.classList.remove(e)}function s(t){return t.getBoundingClientRect()}class o{isMounted=!1;isDestroyed=!1;constructor(){}destroy(){this.isDestroyed=!0}mount(){this.isMounted=!0}unmount(){this.isMounted=!1}}class r extends o{#t;#e;#i;#s;#o=!1;#r=!0;#n=!1;#l=!1;#a=!1;#h=!1;#_=!1;#d=!1;#u=0;#c=0;#g=0;#p;#E;#m;#v;#y;#w;#T;#M;#C;#b;#f;#S;constructor(t){super();const i=document.createElement("div"),s=document.createElement("div"),o=document.createElement("div");e(i,"dumogu-scrollbar-target-rail"),e(s,"dumogu-scrollbar-target-rail-container"),e(o,"dumogu-scrollbar-target-thumb"),e(i,"hidden"),i.appendChild(s),s.appendChild(o),this.#e=i,this.#i=s,this.#s=o,this.#l=t.stopClickPropagation,this.#r=t.isX,this.#n=t.keepShow,this.#D()}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.#D()}get isX(){return this.#r}set keepShow(t){this.#n=t,this.#D()}get keepShow(){return this.#n}set isDragging(t){this.#a=t,this.#D()}get isDragging(){return this.#a}set isHover(t){this.#_=t,this.#D()}get isHover(){return this.#_}set isTargetHover(t){this.#d=t,this.#D()}get isTargetHover(){return this.#d}set proportion(t){this.#u=t,this.#k(),this.#x()}get proportion(){return this.#u}bind(t){this.isDestroyed||(this.#t=t,this.#o=!t,this.#X(),this.#P())}#k(){if(this.isDestroyed)return;const t=this.#e;this.#u>=1?e(t,"hidden"):i(t,"hidden")}#D(){if(this.isDestroyed)return;const t=this.#e,s=this.#i,o=this.#s;this.#n?e(t,"keep-show"):i(t,"keep-show"),this.#a?e(t,"dragging"):i(t,"dragging"),this.#_?e(t,"hover"):i(t,"hover"),this.#d?e(t,"target-hover"):i(t,"target-hover"),this.#r?(i(t,"y"),i(s,"y"),i(o,"y"),e(t,"x"),e(s,"x"),e(o,"x")):(i(t,"x"),i(s,"x"),i(o,"x"),e(t,"y"),e(s,"y"),e(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=s(this.#s);this.#r?this.#c=(t.x-e.x)/e.width:this.#g=(t.y-e.y)/e.height}#Y(t){if(this.isDestroyed)return;if(!this.#a)return;const e=this.#L(),i=this.#i,o=this.#s,r=s(i),n=s(o),l=t.x,a=t.y;let h;h=this.#r?(l-r.x-n.width*this.#c)/(r.width-n.width):(a-r.y-n.height*this.#g)/(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(),i=s(this.#s);let o;this.#r?(t.x>i.x+i.width&&(o=!0),t.x<i.x&&(o=!1)):(t.y>i.y+i.height&&(o=!0),t.y<i.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.#w=function(t){o.#z(t)},o.#y=function(t){o.#B(t)},o.#T=function(t){o.#U(t)},o.#M=function(t){o.#N(t)},o.#f=function(t){o.#R(t)},o.#S=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.#y),this.#o?(window[r]("scroll",o.#w),document[r]("mouseenter",o.#C),document[r]("mouseleave",o.#b)):(t[r]("scroll",o.#w),t[r]("mouseenter",o.#C),t[r]("mouseleave",o.#b)),e[r]("mouseenter",o.#T),e[r]("mouseleave",o.#M),e[r]("transitionstart",o.#f),e[r]("transitionend",o.#S)}#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.#y),this.#o?(window[o]("scroll",this.#w),document[o]("mouseenter",this.#C),document[o]("mouseleave",this.#b)):(t[o]("scroll",this.#w),t[o]("mouseenter",this.#C),t[o]("mouseleave",this.#b)),e[o]("mouseenter",this.#T),e[o]("mouseleave",this.#M),e[o]("transitionstart",this.#f),e[o]("transitionend",this.#S)}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.#y=void 0,this.#w=void 0,this.#T=void 0,this.#M=void 0,this.#C=void 0,this.#b=void 0,this.#f=void 0,this.#S=void 0)}}t.DumoguScrollbar=class extends o{#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(t={}){super();const i=document.createElement("div"),s=document.createElement("div"),o=new r({isX:!0,keepShow:t.keepShow,stopClickPropagation:t.stopClickPropagation}),n=new r({isX:!1,keepShow:t.keepShow,stopClickPropagation:t.stopClickPropagation});e(i,"dumogu-scrollbar"),e(s,"dumogu-scrollbar-target"),s.appendChild(o.railEl),s.appendChild(n.railEl),i.appendChild(s),this.#K=i,this.#O=s,this.#Q=o,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.#D(),this.#Z())}unmount(){var t;this.isDestroyed||(super.unmount(),(t=this.#K)&&t.parentNode&&t.parentNode.removeChild(t))}#D(){if(this.isDestroyed)return;const t=this.#K;this.#J?e(t,"mounted-to-body"):i(t,"mounted-to-body"),this.#o?e(t,"is-window"):i(t,"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,i=this.#K,o=this.#O;if(this.#o)return o.style.width="100%",void(o.style.height="100%");if(this.#J){const e=s(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=s(i),n=s(t),l=s(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)}},t.Rail=r});
//# sourceMappingURL=dumogu-scrollbar.umd.js.map