P?bt(u,y,m,!0,!1,V):Y(f,p,b,y,m,O,E,S,V)},mt=(u,f,p,b,y,m,O,E,S)=>{let _=0;const P=f.length;let V=u.length-1,z=P-1;for(;_<=V&&_<=z;){const Z=u[_],st=f[_]=S?we(f[_]):ce(f[_]);if(pn(Z,st))x(Z,st,p,null,y,m,O,E,S);else break;_++}for(;_<=V&&_<=z;){const Z=u[V],st=f[z]=S?we(f[z]):ce(f[z]);if(pn(Z,st))x(Z,st,p,null,y,m,O,E,S);else break;V--,z--}if(_>V){if(_<=z){const Z=z+1,st=Zz)for(;_<=V;)lt(u[_],y,m,!0),_++;else{const Z=_,st=_,dt=new Map;for(_=st;_<=z;_++){const It=f[_]=S?we(f[_]):ce(f[_]);It.key!=null&&dt.set(It.key,_)}let it,_t=0;const Ct=z-st+1;let se=!1,Yt=0;const de=new Array(Ct);for(_=0;_=Ct){lt(It,y,m,!0);continue}let Mt;if(It.key!=null)Mt=dt.get(It.key);else for(it=st;it<=z;it++)if(de[it-st]===0&&pn(It,f[it])){Mt=it;break}Mt===void 0?lt(It,y,m,!0):(de[Mt-st]=_+1,Mt>=Yt?Yt=Mt:se=!0,x(It,f[Mt],p,null,y,m,O,E,S),_t++)}const be=se?vu(de):Ge;for(it=be.length-1,_=Ct-1;_>=0;_--){const It=st+_,Mt=f[It],_e=It+1{const{el:m,type:O,transition:E,children:S,shapeFlag:_}=u;if(_&6){gt(u.component.subTree,f,p,b);return}if(_&128){u.suspense.move(f,p,b);return}if(_&64){O.move(u,f,p,I);return}if(O===Et){s(m,f,p);for(let V=0;VE.enter(m),y);else{const{leave:V,delayLeave:z,afterLeave:Z}=E,st=()=>s(m,f,p),dt=()=>{V(m,()=>{st(),Z&&Z()})};z?z(m,st,dt):dt()}else s(m,f,p)},lt=(u,f,p,b=!1,y=!1)=>{const{type:m,props:O,ref:E,children:S,dynamicChildren:_,shapeFlag:P,patchFlag:V,dirs:z}=u;if(E!=null&&Xs(E,null,p,u,!0),P&256){f.ctx.deactivate(u);return}const Z=P&1&&z,st=!bn(u);let dt;if(st&&(dt=O&&O.onVnodeBeforeUnmount)&&oe(dt,f,u),P&6)yt(u.component,p,b);else{if(P&128){u.suspense.unmount(p,b);return}Z&&Me(u,null,f,"beforeUnmount"),P&64?u.type.remove(u,f,p,y,I,b):_&&(m!==Et||V>0&&V&64)?bt(_,f,p,!1,!0):(m===Et&&V&384||!y&&P&16)&&bt(S,f,p),b&&X(u)}(st&&(dt=O&&O.onVnodeUnmounted)||Z)&&Dt(()=>{dt&&oe(dt,f,u),Z&&Me(u,null,f,"unmounted")},p)},X=u=>{const{type:f,el:p,anchor:b,transition:y}=u;if(f===Et){at(p,b);return}if(f===Ms){F(u);return}const m=()=>{o(p),y&&!y.persisted&&y.afterLeave&&y.afterLeave()};if(u.shapeFlag&1&&y&&!y.persisted){const{leave:O,delayLeave:E}=y,S=()=>O(p,m);E?E(u.el,m,S):S()}else m()},at=(u,f)=>{let p;for(;u!==f;)p=g(u),o(u),u=p;o(f)},yt=(u,f,p)=>{const{bum:b,scope:y,update:m,subTree:O,um:E}=u;b&&Ts(b),y.stop(),m&&(m.active=!1,lt(O,u,f,p)),E&&Dt(E,f),Dt(()=>{u.isUnmounted=!0},f),f&&f.pendingBranch&&!f.isUnmounted&&u.asyncDep&&!u.asyncResolved&&u.suspenseId===f.pendingId&&(f.deps--,f.deps===0&&f.resolve())},bt=(u,f,p,b=!1,y=!1,m=0)=>{for(let O=m;Ou.shapeFlag&6?C(u.component.subTree):u.shapeFlag&128?u.suspense.next():g(u.anchor||u.el);let A=!1;const R=(u,f,p)=>{u==null?f._vnode&<(f._vnode,null,null,!0):x(f._vnode||null,u,f,null,null,null,p),A||(A=!0,rr(),xc(),A=!1),f._vnode=u},I={p:x,um:lt,m:gt,r:X,mt:B,mc:Y,pc:N,pbc:D,n:C,o:t};let k,G;return e&&([k,G]=e(I)),{render:R,hydrate:k,createApp:uu(R,k)}}function Rs({type:t,props:e},n){return n==="svg"&&t==="foreignObject"||n==="mathml"&&t==="annotation-xml"&&e&&e.encoding&&e.encoding.includes("html")?void 0:n}function Le({effect:t,update:e},n){t.allowRecurse=e.allowRecurse=n}function yu(t,e){return(!t||t&&!t.pendingBranch)&&e&&!e.persisted}function Uc(t,e,n=!1){const s=t.children,o=e.children;if(et(s)&&et(o))for(let r=0;r>1,t[n[l]]0&&(e[s]=n[r-1]),n[r]=s)}}for(r=n.length,c=n[r-1];r-- >0;)n[r]=c,c=e[c];return n}function Bc(t){const e=t.subTree.component;if(e)return e.asyncDep&&!e.asyncResolved?e:Bc(e)}const wu=t=>t.__isTeleport,Et=Symbol.for("v-fgt"),ds=Symbol.for("v-txt"),Ie=Symbol.for("v-cmt"),Ms=Symbol.for("v-stc"),vn=[];let Qt=null;function Tt(t=!1){vn.push(Qt=t?null:[])}function xu(){vn.pop(),Qt=vn[vn.length-1]||null}let En=1;function mr(t){En+=t}function zc(t){return t.dynamicChildren=En>0?Qt||Ge:null,xu(),En>0&&Qt&&Qt.push(t),t}function Lt(t,e,n,s,o,r){return zc(wt(t,e,n,s,o,r,!0))}function hs(t,e,n,s,o){return zc(ie(t,e,n,s,o,!0))}function kc(t){return t?t.__v_isVNode===!0:!1}function pn(t,e){return t.type===e.type&&t.key===e.key}const ps="__vInternal",Kc=({key:t})=>t??null,jn=({ref:t,ref_key:e,ref_for:n})=>(typeof t=="number"&&(t=""+t),t!=null?At(t)||Nt(t)||ot(t)?{i:Ft,r:t,k:e,f:!!n}:t:null);function wt(t,e=null,n=null,s=0,o=null,r=t===Et?0:1,c=!1,l=!1){const i={__v_isVNode:!0,__v_skip:!0,type:t,props:e,key:e&&Kc(e),ref:e&&jn(e),scopeId:Ec,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:r,patchFlag:s,dynamicProps:o,dynamicChildren:null,appContext:null,ctx:Ft};return l?(Ho(i,n),r&128&&t.normalize(i)):n&&(i.shapeFlag|=At(n)?8:16),En>0&&!c&&Qt&&(i.patchFlag>0||r&6)&&i.patchFlag!==32&&Qt.push(i),i}const ie=Su;function Su(t,e=null,n=null,s=0,o=null,r=!1){if((!t||t===Ac)&&(t=Ie),kc(t)){const l=nn(t,e,!0);return n&&Ho(l,n),En>0&&!r&&Qt&&(l.shapeFlag&6?Qt[Qt.indexOf(t)]=l:Qt.push(l)),l.patchFlag|=-2,l}if(Lu(t)&&(t=t.__vccOpts),e){e=Ou(e);let{class:l,style:i}=e;l&&!At(l)&&(e.class=ls(l)),Ot(i)&&(pc(i)&&!et(i)&&(i=Pt({},i)),e.style=cs(i))}const c=At(t)?1:Ni(t)?128:wu(t)?64:Ot(t)?4:ot(t)?2:0;return wt(t,e,n,s,o,c,r,!0)}function Ou(t){return t?pc(t)||ps in t?Pt({},t):t:null}function nn(t,e,n=!1){const{props:s,ref:o,patchFlag:r,children:c}=t,l=e?Eu(s||{},e):s;return{__v_isVNode:!0,__v_skip:!0,type:t.type,props:l,key:l&&Kc(l),ref:e&&e.ref?n&&o?et(o)?o.concat(jn(e)):[o,jn(e)]:jn(e):o,scopeId:t.scopeId,slotScopeIds:t.slotScopeIds,children:c,target:t.target,targetAnchor:t.targetAnchor,staticCount:t.staticCount,shapeFlag:t.shapeFlag,patchFlag:e&&t.type!==Et?r===-1?16:r|16:r,dynamicProps:t.dynamicProps,dynamicChildren:t.dynamicChildren,appContext:t.appContext,dirs:t.dirs,transition:t.transition,component:t.component,suspense:t.suspense,ssContent:t.ssContent&&nn(t.ssContent),ssFallback:t.ssFallback&&nn(t.ssFallback),el:t.el,anchor:t.anchor,ctx:t.ctx,ce:t.ce}}function jt(t=" ",e=0){return ie(ds,null,t,e)}function Ls(t="",e=!1){return e?(Tt(),hs(Ie,null,t)):ie(Ie,null,t)}function ce(t){return t==null||typeof t=="boolean"?ie(Ie):et(t)?ie(Et,null,t.slice()):typeof t=="object"?we(t):ie(ds,null,String(t))}function we(t){return t.el===null&&t.patchFlag!==-1||t.memo?t:nn(t)}function Ho(t,e){let n=0;const{shapeFlag:s}=t;if(e==null)e=null;else if(et(e))n=16;else if(typeof e=="object")if(s&65){const o=e.default;o&&(o._c&&(o._d=!1),Ho(t,o()),o._c&&(o._d=!0));return}else{n=32;const o=e._;!o&&!(ps in e)?e._ctx=Ft:o===3&&Ft&&(Ft.slots._===1?e._=1:(e._=2,t.patchFlag|=1024))}else ot(e)?(e={default:e,_ctx:Ft},n=32):(e=String(e),s&64?(n=16,e=[jt(e)]):n=8);t.children=e,t.shapeFlag|=n}function Eu(...t){const e={};for(let n=0;n{let o;return(o=t[n])||(o=t[n]=[]),o.push(s),r=>{o.length>1?o.forEach(c=>c(r)):o[0](r)}};Yn=e("__VUE_INSTANCE_SETTERS__",n=>Rt=n),Zs=e("__VUE_SSR_SETTERS__",n=>gs=n)}const Tn=t=>{const e=Rt;return Yn(t),t.scope.on(),()=>{t.scope.off(),Yn(e)}},br=()=>{Rt&&Rt.scope.off(),Yn(null)};function Wc(t){return t.vnode.shapeFlag&4}let gs=!1;function Iu(t,e=!1){e&&Zs(e);const{props:n,children:s}=t.vnode,o=Wc(t);au(t,n,o,e),pu(t,s);const r=o?Pu(t,e):void 0;return e&&Zs(!1),r}function Pu(t,e){const n=t.type;t.accessCache=Object.create(null),t.proxy=gc(new Proxy(t.ctx,nu));const{setup:s}=n;if(s){const o=t.setupContext=s.length>1?Ru(t):null,r=Tn(t);Be();const c=Ae(s,t,0,[t.props,o]);if(ze(),r(),Xr(c)){if(c.then(br,br),e)return c.then(l=>{_r(t,l,e)}).catch(l=>{us(l,t,0)});t.asyncDep=c}else _r(t,c,e)}else qc(t,e)}function _r(t,e,n){ot(e)?t.type.__ssrInlineRender?t.ssrRender=e:t.render=e:Ot(e)&&(t.setupState=yc(e)),qc(t,n)}let yr;function qc(t,e,n){const s=t.type;if(!t.render){if(!e&&yr&&!s.render){const o=s.template||Mo(t).template;if(o){const{isCustomElement:r,compilerOptions:c}=t.appContext.config,{delimiters:l,compilerOptions:i}=s,a=Pt(Pt({isCustomElement:r,delimiters:l},c),i);s.render=yr(o,a)}}t.render=s.render||Kt}{const o=Tn(t);Be();try{su(t)}finally{ze(),o()}}}function $u(t){return t.attrsProxy||(t.attrsProxy=new Proxy(t.attrs,{get(e,n){return Vt(t,"get","$attrs"),e[n]}}))}function Ru(t){const e=n=>{t.exposed=n||{}};return{get attrs(){return $u(t)},slots:t.slots,emit:t.emit,expose:e}}function Fo(t){if(t.exposed)return t.exposeProxy||(t.exposeProxy=new Proxy(yc(gc(t.exposed)),{get(e,n){if(n in e)return e[n];if(n in _n)return _n[n](t)},has(e,n){return n in e||n in _n}}))}function Mu(t,e=!0){return ot(t)?t.displayName||t.name:t.name||e&&t.__name}function Lu(t){return ot(t)&&"__vccOpts"in t}const Gc=(t,e)=>_i(t,e,gs),Hu="3.4.21";/**
+* @vue/runtime-dom v3.4.21
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/const Fu="http://www.w3.org/2000/svg",Nu="http://www.w3.org/1998/Math/MathML",xe=typeof document<"u"?document:null,vr=xe&&xe.createElement("template"),Du={insert:(t,e,n)=>{e.insertBefore(t,n||null)},remove:t=>{const e=t.parentNode;e&&e.removeChild(t)},createElement:(t,e,n,s)=>{const o=e==="svg"?xe.createElementNS(Fu,t):e==="mathml"?xe.createElementNS(Nu,t):xe.createElement(t,n?{is:n}:void 0);return t==="select"&&s&&s.multiple!=null&&o.setAttribute("multiple",s.multiple),o},createText:t=>xe.createTextNode(t),createComment:t=>xe.createComment(t),setText:(t,e)=>{t.nodeValue=e},setElementText:(t,e)=>{t.textContent=e},parentNode:t=>t.parentNode,nextSibling:t=>t.nextSibling,querySelector:t=>xe.querySelector(t),setScopeId(t,e){t.setAttribute(e,"")},insertStaticContent(t,e,n,s,o,r){const c=n?n.previousSibling:e.lastChild;if(o&&(o===r||o.nextSibling))for(;e.insertBefore(o.cloneNode(!0),n),!(o===r||!(o=o.nextSibling)););else{vr.innerHTML=s==="svg"?``:s==="mathml"?``:t;const l=vr.content;if(s==="svg"||s==="mathml"){const i=l.firstChild;for(;i.firstChild;)l.appendChild(i.firstChild);l.removeChild(i)}e.insertBefore(l,n)}return[c?c.nextSibling:e.firstChild,n?n.previousSibling:e.lastChild]}},Vu=Symbol("_vtc");function ju(t,e,n){const s=t[Vu];s&&(e=(e?[e,...s]:[...s]).join(" ")),e==null?t.removeAttribute("class"):n?t.setAttribute("class",e):t.className=e}const wr=Symbol("_vod"),Uu=Symbol("_vsh"),Bu=Symbol(""),zu=/(^|;)\s*display\s*:/;function ku(t,e,n){const s=t.style,o=At(n);let r=!1;if(n&&!o){if(e)if(At(e))for(const c of e.split(";")){const l=c.slice(0,c.indexOf(":")).trim();n[l]==null&&Un(s,l,"")}else for(const c in e)n[c]==null&&Un(s,c,"");for(const c in n)c==="display"&&(r=!0),Un(s,c,n[c])}else if(o){if(e!==n){const c=s[Bu];c&&(n+=";"+c),s.cssText=n,r=zu.test(n)}}else e&&t.removeAttribute("style");wr in t&&(t[wr]=r?s.display:"",t[Uu]&&(s.display="none"))}const xr=/\s*!important$/;function Un(t,e,n){if(et(n))n.forEach(s=>Un(t,e,s));else if(n==null&&(n=""),e.startsWith("--"))t.setProperty(e,n);else{const s=Ku(t,e);xr.test(n)?t.setProperty(an(s),n.replace(xr,""),"important"):t[s]=n}}const Sr=["Webkit","Moz","ms"],Hs={};function Ku(t,e){const n=Hs[e];if(n)return n;let s=fe(e);if(s!=="filter"&&s in t)return Hs[e]=s;s=rs(s);for(let o=0;oFs||(Zu.then(()=>Fs=0),Fs=Date.now());function tf(t,e){const n=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=n.attached)return;te(ef(s,n.value),e,5,[s])};return n.value=t,n.attached=Qu(),n}function ef(t,e){if(et(e)){const n=t.stopImmediatePropagation;return t.stopImmediatePropagation=()=>{n.call(t),t._stopped=!0},e.map(s=>o=>!o._stopped&&s&&s(o))}else return e}const Ar=t=>t.charCodeAt(0)===111&&t.charCodeAt(1)===110&&t.charCodeAt(2)>96&&t.charCodeAt(2)<123,nf=(t,e,n,s,o,r,c,l,i)=>{const a=o==="svg";e==="class"?ju(t,s,a):e==="style"?ku(t,n,s):ns(e)?mo(e)||Ju(t,e,n,s,c):(e[0]==="."?(e=e.slice(1),!0):e[0]==="^"?(e=e.slice(1),!1):sf(t,e,s,a))?qu(t,e,s,r,c,l,i):(e==="true-value"?t._trueValue=s:e==="false-value"&&(t._falseValue=s),Wu(t,e,s,a))};function sf(t,e,n,s){if(s)return!!(e==="innerHTML"||e==="textContent"||e in t&&Ar(e)&&ot(n));if(e==="spellcheck"||e==="draggable"||e==="translate"||e==="form"||e==="list"&&t.tagName==="INPUT"||e==="type"&&t.tagName==="TEXTAREA")return!1;if(e==="width"||e==="height"){const o=t.tagName;if(o==="IMG"||o==="VIDEO"||o==="CANVAS"||o==="SOURCE")return!1}return Ar(e)&&At(n)?!1:e in t}const of=Pt({patchProp:nf},Du);let Tr;function rf(){return Tr||(Tr=bu(of))}const cf=(...t)=>{const e=rf().createApp(...t),{mount:n}=e;return e.mount=s=>{const o=uf(s);if(!o)return;const r=e._component;!ot(r)&&!r.render&&!r.template&&(r.template=o.innerHTML),o.innerHTML="";const c=n(o,!1,lf(o));return o instanceof Element&&(o.removeAttribute("v-cloak"),o.setAttribute("data-v-app","")),c},e};function lf(t){if(t instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&t instanceof MathMLElement)return"mathml"}function uf(t){return At(t)?document.querySelector(t):t}/*!
+ * OverlayScrollbars
+ * Version: 2.6.1
+ *
+ * Copyright (c) Rene Haas | KingSora.
+ * https://github.com/KingSora
+ *
+ * Released under the MIT license.
+ */const Zt=(t,e)=>{const{o:n,u:s,_:o}=t;let r=n,c;const l=(d,h)=>{const g=r,v=d,T=h||(s?!s(g,v):g!==v);return(T||o)&&(r=v,c=g),[r,T,c]};return[e?d=>l(e(r,c),d):l,d=>[r,!!d,c]]},No=typeof window<"u",Wt=No?window:{},Bn=Math.max,ff=Math.min,Qs=Math.round,Yc=Wt.cancelAnimationFrame,Jc=Wt.requestAnimationFrame,to=Wt.setTimeout,eo=Wt.clearTimeout,ms=t=>typeof Wt[t]<"u"?Wt[t]:void 0,af=ms("MutationObserver"),Ir=ms("IntersectionObserver"),Jn=ms("ResizeObserver"),no=ms("ScrollTimeline"),Xc=No&&Node.ELEMENT_NODE,{toString:df,hasOwnProperty:Ns}=Object.prototype,hf=/^\[object (.+)\]$/,In=t=>t===void 0,bs=t=>t===null,pf=t=>In(t)||bs(t)?`${t}`:df.call(t).replace(hf,"$1").toLowerCase(),ue=t=>typeof t=="number",_s=t=>typeof t=="string",Zc=t=>typeof t=="boolean",ae=t=>typeof t=="function",ne=t=>Array.isArray(t),Cn=t=>typeof t=="object"&&!ne(t)&&!bs(t),ys=t=>{const e=!!t&&t.length,n=ue(e)&&e>-1&&e%1==0;return ne(t)||!ae(t)&&n?e>0&&Cn(t)?e-1 in t:!0:!1},Xn=t=>{if(!t||!Cn(t)||pf(t)!=="object")return!1;let e;const n="constructor",s=t[n],o=s&&s.prototype,r=Ns.call(t,n),c=o&&Ns.call(o,"isPrototypeOf");if(s&&!r&&!c)return!1;for(e in t);return In(e)||Ns.call(t,e)},Zn=t=>{const e=HTMLElement;return t?e?t instanceof e:t.nodeType===Xc:!1},vs=t=>{const e=Element;return t?e?t instanceof e:t.nodeType===Xc:!1};function ht(t,e){if(ys(t))for(let n=0;ne(t[n],n,t));return t}const ws=(t,e)=>t.indexOf(e)>=0,he=(t,e)=>t.concat(e),vt=(t,e,n)=>(!n&&!_s(e)&&ys(e)?Array.prototype.push.apply(t,e):t.push(e),t),ke=t=>Array.from(t||[]),Qc=t=>ne(t)?t:[t],so=t=>!!t&&!t.length,Pr=t=>ke(new Set(t)),qt=(t,e,n)=>{ht(t,o=>o&&o.apply(void 0,e||[])),!n&&(t.length=0)},tl="paddingTop",el="paddingRight",nl="paddingLeft",sl="paddingBottom",ol="marginLeft",rl="marginRight",cl="marginBottom",xs="overflowX",Ss="overflowY",sn="width",on="height",rn="hidden",ll="visible",Do=(t,e,n,s)=>{if(t&&e){let o=!0;return ht(n,r=>{const c=s?s(t[r]):t[r],l=s?s(e[r]):e[r];c!==l&&(o=!1)}),o}return!1},il=(t,e)=>Do(t,e,["w","h"]),ul=(t,e)=>Do(t,e,["x","y"]),gf=(t,e)=>Do(t,e,["t","r","b","l"]),ee=()=>{},tt=(t,...e)=>t.bind(0,...e),Se=t=>{let e;const n=t?to:Jc,s=t?eo:Yc;return[o=>{s(e),e=n(o,ae(t)?t():t)},()=>s(e)]},fl=(t,e)=>{let n,s,o,r=ee;const{v:c,p:l,S:i}=e||{},a=function(T){r(),eo(n),n=s=void 0,r=ee,t.apply(this,T)},d=v=>i&&s?i(s,v):v,h=()=>{r!==ee&&a(d(o)||o)},g=function(){const T=ke(arguments),x=ae(c)?c():c;if(ue(x)&&x>=0){const $=ae(l)?l():l,H=ue($)&&$>=0,w=x>0?to:Jc,F=x>0?eo:Yc,M=d(T)||T,J=a.bind(0,M);r();const Y=w(J,x);r=()=>F(Y),H&&!n&&(n=to(h,$)),s=o=M}else a(T)};return g.m=h,g},al=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),Pe=t=>t?Object.keys(t):[],ft=(t,e,n,s,o,r,c)=>{const l=[e,n,s,o,r,c];return(typeof t!="object"||bs(t))&&!ae(t)&&(t={}),ht(l,i=>{ht(i,(a,d)=>{const h=i[d];if(t===h)return!0;const g=ne(h);if(h&&Xn(h)){const v=t[d];let T=v;g&&!ne(v)?T=[]:!g&&!Xn(v)&&(T={}),t[d]=ft(T,h)}else t[d]=g?h.slice():h})}),t},dl=(t,e)=>ht(ft({},t),(n,s,o)=>{n===void 0?delete o[s]:e&&n&&Xn(n)&&(o[s]=dl(n,e))}),Vo=t=>{for(const e in t)return!1;return!0},oo=(t,e,n)=>Bn(t,ff(e,n)),je=t=>ke(new Set((ne(t)?t:(t||"").split(" ")).filter(e=>e))),Os=(t,e)=>t&&t.getAttribute(e),Xt=(t,e,n)=>{ht(je(e),s=>{t&&t.setAttribute(s,n||"")})},re=(t,e)=>{ht(je(e),n=>t&&t.removeAttribute(n))},Es=(t,e)=>{const n=je(Os(t,e)),s=tt(Xt,t,e),o=(r,c)=>{const l=new Set(n);return ht(je(r),i=>l[c](i)),ke(l).join(" ")};return{O:r=>s(o(r,"delete")),$:r=>s(o(r,"add")),C:r=>{const c=je(r);return c.reduce((l,i)=>l&&n.includes(i),c.length>0)}}},hl=(t,e,n)=>{Es(t,e).O(n)},An=(t,e,n)=>(Es(t,e).$(n),tt(hl,t,e,n)),zn=(t,e,n,s)=>{(s?An:hl)(t,e,n)},mf=(t,e,n)=>Es(t,e).C(n),pl=t=>Es(t,"class"),jo=(t,e)=>{pl(t).O(e)},Qn=(t,e)=>(pl(t).$(e),tt(jo,t,e)),$r=No&&Element.prototype,gl=(t,e)=>{const n=[],s=e?vs(e)&&e:document;return s?vt(n,s.querySelectorAll(t)):n},bf=(t,e)=>{const n=e?vs(e)&&e:document;return n?n.querySelector(t):null},ro=(t,e)=>vs(t)?($r.matches||$r.msMatchesSelector).call(t,e):!1,co=t=>t?ke(t.childNodes):[],cn=t=>t&&t.parentElement,qe=(t,e)=>vs(t)&&t.closest(e),_f=(t,e,n)=>{const s=qe(t,e),o=t&&bf(n,s),r=qe(o,e)===s;return s&&o?s===t||o===t||r&&qe(qe(t,n),e)!==s:!1},$e=t=>{if(ys(t))ht(ke(t),e=>$e(e));else if(t){const e=cn(t);e&&e.removeChild(t)}},ml=(t,e,n)=>{if(n&&t){let s=e,o;return ys(n)?(o=document.createDocumentFragment(),ht(n,r=>{r===s&&(s=r.previousSibling),o.appendChild(r)})):o=n,e&&(s?s!==e&&(s=s.nextSibling):s=t.firstChild),t.insertBefore(o,s||null),()=>$e(n)}return ee},kt=(t,e)=>ml(t,null,e),Rr=(t,e)=>ml(cn(t),t&&t.nextSibling,e),Ze=t=>{const e=document.createElement("div");return Xt(e,"class",t),e},bl=t=>{const e=Ze();return e.innerHTML=t.trim(),ht(co(e),n=>$e(n))},yf=/^--/,Mr=(t,e)=>t.getPropertyValue(e)||t[e]||"",Uo=t=>{const e=t||0;return isFinite(e)?e:0},Nn=t=>Uo(parseFloat(t||"")),Lr=t=>`${(Uo(t)*100).toFixed(3)}%`,lo=t=>`${Uo(t)}px`;function ln(t,e){t&&ht(e,(n,s)=>{try{const o=t.style,r=ue(n)?lo(n):(n||"")+"";yf.test(s)?o.setProperty(s,r):o[s]=r}catch{}})}function Ue(t,e,n){const s=_s(e);let o=s?"":{};if(t){const r=Wt.getComputedStyle(t,n)||t.style;o=s?Mr(r,e):e.reduce((c,l)=>(c[l]=Mr(r,l),c),o)}return o}const Ee=t=>Ue(t,"direction")==="rtl",Hr=(t,e,n)=>{const s=e?`${e}-`:"",o=n?`-${n}`:"",r=`${s}top${o}`,c=`${s}right${o}`,l=`${s}bottom${o}`,i=`${s}left${o}`,a=Ue(t,[r,c,l,i]);return{t:Nn(a[r]),r:Nn(a[c]),b:Nn(a[l]),l:Nn(a[i])}},Ds=(t,e)=>`translate${Cn(t)?`(${t.x},${t.y})`:`${e?"X":"Y"}(${t})`}`,vf={w:0,h:0},Cs=(t,e)=>e?{w:e[`${t}Width`],h:e[`${t}Height`]}:vf,wf=t=>Cs("inner",t||Wt),wn=tt(Cs,"offset"),_l=tt(Cs,"client"),io=tt(Cs,"scroll"),Bo=t=>{const e=parseFloat(Ue(t,sn))||0,n=parseFloat(Ue(t,on))||0;return{w:e-Qs(e),h:n-Qs(n)}},Qe=t=>t.getBoundingClientRect(),uo=t=>!!(t&&(t[on]||t[sn])),yl=(t,e)=>{const n=uo(t);return!uo(e)&&n},Fr=(t,e,n,s)=>{ht(je(e),o=>{t.removeEventListener(o,n,s)})},St=(t,e,n,s)=>{var o;const r=(o=s&&s.H)!=null?o:!0,c=s&&s.I||!1,l=s&&s.A||!1,i={passive:r,capture:c};return tt(qt,je(e).map(a=>{const d=l?h=>{Fr(t,a,d,c),n(h)}:n;return t.addEventListener(a,d,i),tt(Fr,t,a,d,c)}))},zo=t=>t.stopPropagation(),Nr=t=>t.preventDefault(),xf={x:0,y:0},Vs=t=>{const e=t&&Qe(t);return e?{x:e.left+Wt.scrollX,y:e.top+Wt.scrollY}:xf},ts=(t,e,n)=>n?n.n?-t+0:n.i?e-t:t:t,Dr=(t,e)=>[ts(0,t,e),ts(t,t,e)],Vr=(t,e,n)=>oo(0,1,ts(t,e,n)/e||0),Re=(t,e)=>{const{x:n,y:s}=ue(e)?{x:e,y:e}:e||{};ue(n)&&(t.scrollLeft=n),ue(s)&&(t.scrollTop=s)},un=t=>({x:t.scrollLeft,y:t.scrollTop}),jr=(t,e)=>{ht(Qc(e),t)},fo=t=>{const e=new Map,n=(r,c)=>{if(r){const l=e.get(r);jr(i=>{l&&l[i?"delete":"clear"](i)},c)}else e.forEach(l=>{l.clear()}),e.clear()},s=(r,c)=>{if(_s(r)){const a=e.get(r)||new Set;return e.set(r,a),jr(d=>{ae(d)&&a.add(d)},c),tt(n,r,c)}Zc(c)&&c&&n();const l=Pe(r),i=[];return ht(l,a=>{const d=r[a];d&&vt(i,s(a,d))}),tt(qt,i)},o=(r,c)=>{ht(ke(e.get(r)),l=>{c&&!so(c)?l.apply(0,c):l()})};return s(t||{}),[s,n,o]},Ur=t=>JSON.stringify(t,(e,n)=>{if(ae(n))throw 0;return n}),Br=(t,e)=>t?`${e}`.split(".").reduce((n,s)=>n&&al(n,s)?n[s]:void 0,t):void 0,Sf={paddingAbsolute:!1,showNativeOverlaidScrollbars:!1,update:{elementEvents:[["img","load"]],debounce:[0,33],attributes:null,ignoreMutation:null},overflow:{x:"scroll",y:"scroll"},scrollbars:{theme:"os-theme-dark",visibility:"auto",autoHide:"never",autoHideDelay:1300,autoHideSuspend:!1,dragScroll:!0,clickScroll:!1,pointers:["mouse","touch","pen"]}},vl=(t,e)=>{const n={},s=he(Pe(e),Pe(t));return ht(s,o=>{const r=t[o],c=e[o];if(Cn(r)&&Cn(c))ft(n[o]={},vl(r,c)),Vo(n[o])&&delete n[o];else if(al(e,o)&&c!==r){let l=!0;if(ne(r)||ne(c))try{Ur(r)===Ur(c)&&(l=!1)}catch{}l&&(n[o]=c)}}),n},zr=(t,e,n)=>s=>[Br(t,s),n||Br(e,s)!==void 0],Pn="data-overlayscrollbars",wl="os-environment",Of=`${wl}-scrollbar-hidden`,js=`${Pn}-initialize`,zt=Pn,xl=`${zt}-overflow-x`,Sl=`${zt}-overflow-y`,Ol="overflowVisible",Ef="scrollbarPressed",ao="updating",Cf="body",Oe=`${Pn}-viewport`,Af="arrange",El="scrollbarHidden",tn=Ol,ho=`${Pn}-padding`,Tf=tn,kr=`${Pn}-content`,ko="os-size-observer",If=`${ko}-appear`,Pf=`${ko}-listener`,$f="os-trinsic-observer",Rf="os-theme-none",Ut="os-scrollbar",Mf=`${Ut}-rtl`,Lf=`${Ut}-horizontal`,Hf=`${Ut}-vertical`,Cl=`${Ut}-track`,Ko=`${Ut}-handle`,Ff=`${Ut}-visible`,Nf=`${Ut}-cornerless`,Kr=`${Ut}-interaction`,Wr=`${Ut}-unusable`,po=`${Ut}-auto-hide`,qr=`${po}-hidden`,Gr=`${Ut}-wheel`,Df=`${Cl}-interactive`,Vf=`${Ko}-interactive`,Al={},Tl={},jf=t=>{ht(t,e=>ht(e,(n,s)=>{Al[s]=e[s]}))},Il=(t,e,n)=>Pe(t).map(s=>{const{static:o,instance:r}=t[s],[c,l,i]=n||[],a=n?r:o;if(a){const d=n?a(c,l,e):a(e);return(i||Tl)[s]=d}}),dn=t=>Tl[t],Uf="__osOptionsValidationPlugin",Bf="__osSizeObserverPlugin",zf=(t,e)=>{const{T:n}=e,[s,o]=t("showNativeOverlaidScrollbars");return[s&&n.x&&n.y,o]},es=t=>t.indexOf(ll)===0,Pl=(t,e)=>{const{D:n}=t,s=i=>{const a=Ue(n,i),h=(e?e[i]:a)==="scroll";return[a,h]},[o,r]=s(xs),[c,l]=s(Ss);return{k:{x:o,y:c},R:{x:r,y:l}}},kf=(t,e,n,s)=>{const o=e.x||e.y,r=(d,h)=>{const g=es(d),v=g&&o?"hidden":"",T=h&&g&&d.replace(`${ll}-`,"")||v;return[h&&!g?d:"",es(T)?"hidden":T]},[c,l]=r(n.x,e.x),[i,a]=r(n.y,e.y);return s[xs]=l&&i?l:c,s[Ss]=a&&c?a:i,Pl(t,s)},Wo="__osScrollbarsHidingPlugin",Kf="__osClickScrollPlugin";let Us;const Wf=()=>{const t=(w,F,K,M)=>{kt(w,F);const J=_l(F),Y=wn(F),Q=Bo(K);return M&&$e(F),{x:Y.h-J.h+Q.h,y:Y.w-J.w+Q.w}},e=w=>{let F=!1;const K=Qn(w,Of);try{F=Ue(w,"scrollbar-width")==="none"||Ue(w,"display","::-webkit-scrollbar")==="none"}catch{}return K(),F},n=(w,F)=>{ln(w,{[xs]:rn,[Ss]:rn,direction:"rtl"}),Re(w,{x:0});const K=Vs(w),M=Vs(F);Re(w,{x:-999});const J=Vs(F);return{i:K.x===M.x,n:M.x!==J.x}},{body:s}=document,r=bl(``)[0],c=r.firstChild,[l,,i]=fo(),[a,d]=Zt({o:t(s,r,c),u:ul},tt(t,s,r,c,!0)),[h]=d(),g=e(r),v={x:h.x===0,y:h.y===0},T={elements:{host:null,padding:!g,viewport:w=>g&&w===w.ownerDocument.body&&w,content:!1},scrollbars:{slot:!0},cancel:{nativeScrollbarsOverlaid:!1,body:null}},x=ft({},Sf),L=tt(ft,{},x),$=tt(ft,{},T),H={P:h,T:v,L:g,J:!!no,K:n(r,c),Z:tt(l,"r"),G:$,tt:w=>ft(T,w)&&$(),nt:L,ot:w=>ft(x,w)&&L(),st:ft({},T),et:ft({},x)};return re(r,"style"),$e(r),Wt.addEventListener("resize",()=>{let w;if(!g&&(!v.x||!v.y)){const F=dn(Wo);w=!!(F?F.Y():ee)(H,a)}i("r",[w])}),H},Gt=()=>(Us||(Us=Wf()),Us),$l=(t,e)=>ae(e)?e.apply(0,t):e,qf=(t,e,n,s)=>{const o=In(s)?n:s;return $l(t,o)||e.apply(0,t)},Rl=(t,e,n,s)=>{const o=In(s)?n:s,r=$l(t,o);return!!r&&(Zn(r)?r:e.apply(0,t))},Gf=(t,e)=>{const{nativeScrollbarsOverlaid:n,body:s}=e||{},{T:o,L:r,G:c}=Gt(),{nativeScrollbarsOverlaid:l,body:i}=c().cancel,a=n??l,d=In(s)?i:s,h=(o.x||o.y)&&a,g=t&&(bs(d)?!r:d);return!!h||!!g},qo=new WeakMap,Yf=(t,e)=>{qo.set(t,e)},Jf=t=>{qo.delete(t)},Ml=t=>qo.get(t),Xf=(t,e,n)=>{let s=!1;const o=n?new WeakMap:!1,r=()=>{s=!0},c=l=>{if(o&&n){const i=n.map(a=>{const[d,h]=a||[];return[h&&d?(l||gl)(d,t):[],h]});ht(i,a=>ht(a[0],d=>{const h=a[1],g=o.get(d)||[];if(t.contains(d)&&h){const T=St(d,h,x=>{s?(T(),o.delete(d)):e(x)});o.set(d,vt(g,T))}else qt(g),o.delete(d)}))}};return c(),[r,c]},Yr=(t,e,n,s)=>{let o=!1;const{ct:r,rt:c,lt:l,it:i,ut:a,ft:d}=s||{},h=fl(()=>o&&n(!0),{v:33,p:99}),[g,v]=Xf(t,h,l),T=r||[],x=c||[],L=he(T,x),$=(w,F)=>{if(!so(F)){const K=a||ee,M=d||ee,J=[],Y=[];let Q=!1,D=!1;if(ht(F,j=>{const{attributeName:W,target:U,type:B,oldValue:rt,addedNodes:nt,removedNodes:q}=j,N=B==="attributes",ct=B==="childList",mt=t===U,gt=N&&W,lt=gt&&Os(U,W||"")||null,X=gt&&rt!==lt,at=ws(x,W)&&X;if(e&&(ct||!mt)){const yt=N&&X,bt=yt&&i&&ro(U,i),A=(bt?!K(U,W,rt,lt):!N||yt)&&!M(j,!!bt,t,s);ht(nt,R=>vt(J,R)),ht(q,R=>vt(J,R)),D=D||A}!e&&mt&&X&&!K(U,W,rt,lt)&&(vt(Y,W),Q=Q||at)}),v(j=>Pr(J).reduce((W,U)=>(vt(W,gl(j,U)),ro(U,j)?vt(W,U):W),[])),e)return!w&&D&&n(!1),[!1];if(!so(Y)||Q){const j=[Pr(Y),Q];return!w&&n.apply(0,j),j}}},H=new af(tt($,!1));return[()=>(H.observe(t,{attributes:!0,attributeOldValue:!0,attributeFilter:L,subtree:e,childList:e,characterData:e}),o=!0,()=>{o&&(g(),H.disconnect(),o=!1)}),()=>{if(o)return h.m(),$(!0,H.takeRecords())}]},Ll=(t,e,n)=>{const{_t:o,dt:r}=n||{},c=dn(Bf),{K:l}=Gt(),i=tt(Ee,t),[a]=Zt({o:!1,_:!0});return()=>{const d=[],g=bl(``)[0],v=g.firstChild,T=x=>{const L=x instanceof ResizeObserverEntry,$=!L&&ne(x);let H=!1,w=!1,F=!0;if(L){const[K,,M]=a(x.contentRect),J=uo(K),Y=yl(K,M);w=!M||Y,H=!w&&!J,F=!H}else $?[,F]=x:w=x===!0;if(o&&F){const K=$?x[0]:Ee(g);Re(g,{x:ts(3333333,3333333,K&&l),y:3333333})}H||e({vt:$?x:void 0,ht:!$,dt:w})};if(Jn){const x=new Jn(L=>T(L.pop()));x.observe(v),vt(d,()=>{x.disconnect()})}else if(c){const[x,L]=c(v,T,r);vt(d,he([Qn(g,If),St(g,"animationstart",x)],L))}else return ee;if(o){const[x]=Zt({o:void 0},i);vt(d,St(g,"scroll",L=>{const $=x(),[H,w,F]=$;w&&(jo(v,"ltr rtl"),Qn(v,H?"rtl":"ltr"),T([!!H,w,F])),zo(L)}))}return tt(qt,vt(d,kt(t,g)))}},Zf=(t,e)=>{let n;const s=i=>i.h===0||i.isIntersecting||i.intersectionRatio>0,o=Ze($f),[r]=Zt({o:!1}),c=(i,a)=>{if(i){const d=r(s(i)),[,h]=d;return h&&!a&&e(d)&&[d]}},l=(i,a)=>c(a.pop(),i);return[()=>{const i=[];if(Ir)n=new Ir(tt(l,!1),{root:t}),n.observe(o),vt(i,()=>{n.disconnect()});else{const a=()=>{const d=wn(o);c(d)};vt(i,Ll(o,a)()),a()}return tt(qt,vt(i,kt(t,o)))},()=>n&&l(!0,n.takeRecords())]},Qf=(t,e,n,s)=>{let o,r,c,l,i,a;const{L:d}=Gt(),h=`[${zt}]`,g=`[${Oe}]`,v=["tabindex"],T=["wrap","cols","rows"],x=["id","class","style","open"],{gt:L,bt:$,D:H,wt:w,St:F,V:K,yt:M,Ot:J}=t,Y={$t:!1,N:Ee(L)},Q=Gt(),D=dn(Wo),[j]=Zt({u:il,o:{w:0,h:0}},()=>{const C=D&&D.M(t,e,Y,Q,n).W,A=M(tn),R=!K&&M(Af),I=R&&un(H);J(tn),K&&J(ao,!0);const k=R&&C&&C()[0],G=io(w),u=io(H),f=Bo(H);return J(tn,A),K&&J(ao),k&&k(),Re(H,I),{w:u.w+G.w+f.w,h:u.h+G.h+f.h}}),W=F?T:he(x,T),U=fl(s,{v:()=>o,p:()=>r,S(C,A){const[R]=C,[I]=A;return[he(Pe(R),Pe(I)).reduce((k,G)=>(k[G]=R[G]||I[G],k),{})]}}),B=C=>{if(K){const A=Ee(L);ft(C,{Ct:a!==A}),ft(Y,{N:A}),a=A}},rt=C=>{ht(C||v,A=>{if(ws(v,A)){const R=Os($,A);_s(R)?Xt(H,A,R):re(H,A)}})},nt=(C,A)=>{const[R,I]=C,k={xt:I};return ft(Y,{$t:R}),!A&&s(k),k},q=({ht:C,vt:A,dt:R})=>{const k=!(C&&!R&&!A)&&d?U:s,[G,u]=A||[],f={ht:C||R,dt:R,Ct:u};B(f),A&&ft(Y,{N:G}),k(f)},N=(C,A)=>{const[,R]=j(),I={Ht:R};return B(I),R&&!A&&(C?s:U)(I),I},ct=(C,A,R)=>{const I={zt:A};return B(I),A&&!R?U(I):K||rt(C),I},{Z:mt}=Q,[gt,lt]=w?Zf($,nt):[],X=!K&&Ll($,q,{dt:!0,_t:!0}),[at,yt]=Yr($,!1,ct,{rt:x,ct:he(x,v)}),bt=K&&Jn&&new Jn(C=>{const A=C[C.length-1].contentRect;q({ht:!0,dt:yl(A,i)}),i=A});return[()=>{rt(),bt&&bt.observe($);const C=X&&X(),A=gt&>(),R=at(),I=mt(k=>{const[,G]=j();U({Et:k,Ht:G})});return()=>{bt&&bt.disconnect(),C&&C(),A&&A(),l&&l(),R(),I()}},({It:C,At:A,Tt:R})=>{const I={},[k]=C("update.ignoreMutation"),[G,u]=C("update.attributes"),[f,p]=C("update.elementEvents"),[b,y]=C("update.debounce"),m=p||u,O=A||R,E=S=>ae(k)&&k(S);if(m){c&&c(),l&&l();const[S,_]=Yr(w||H,!0,N,{ct:he(W,G||[]),lt:f,it:h,ft:(P,V)=>{const{target:z,attributeName:Z}=P;return(!V&&Z&&!K?_f(z,h,g):!1)||!!qe(z,`.${Ut}`)||!!E(P)}});l=S(),c=_}if(y)if(U.m(),ne(b)){const S=b[0],_=b[1];o=ue(S)&&S,r=ue(_)&&_}else ue(b)?(o=b,r=!1):(o=!1,r=!1);if(O){const S=yt(),_=lt&<(),P=c&&c();S&&ft(I,ct(S[0],S[1],O)),_&&ft(I,nt(_[0],O)),P&&ft(I,N(P[0],O))}return B(I),I},Y]},ta=(t,e,n,s)=>{const{G:o,K:r}=Gt(),{scrollbars:c}=o(),{slot:l}=c,{gt:i,bt:a,D:d,Dt:h,kt:g,Rt:v,V:T}=e,{scrollbars:x}=h?{}:t,{slot:L}=x||{},$=new Map,H=C=>no&&new no({source:g,axis:C}),w=H("x"),F=H("y"),K=Rl([i,a,d],()=>T&&v?i:a,l,L),M=(C,A)=>{if(A){const f=C?sn:on,{Mt:p,Vt:b}=A,y=Qe(b)[f],m=Qe(p)[f];return oo(0,1,y/m||0)}const R=C?"x":"y",{Lt:I,Pt:k}=n,G=k[R],u=I[R];return oo(0,1,G/(G+u)||0)},J=(C,A,R,I)=>{const k=M(R,C);return 1/k*(1-k)*(I?1-A:A)||0},Y=(C,A)=>ft(C,A?{clear:["left"]}:{}),Q=C=>{$.forEach((A,R)=>{(C?ws(Qc(C),R):!0)&&(ht(A||[],k=>{k&&k.cancel()}),$.delete(R))})},D=(C,A,R,I)=>{const k=$.get(C)||[],G=k.find(u=>u&&u.timeline===A);G?G.effect=new KeyframeEffect(C,R,{composite:I}):$.set(C,he(k,[C.animate(R,{timeline:A,composite:I})]))},j=(C,A,R)=>{const I=R?Qn:jo;ht(C,k=>{I(k.Ut,A)})},W=(C,A)=>{ht(C,R=>{const[I,k]=A(R);ln(I,k)})},U=(C,A)=>{W(C,R=>{const{Vt:I}=R;return[I,{[A?sn:on]:Lr(M(A))}]})},B=(C,A)=>{const{Lt:R}=n,I=A?R.x:R.y,k=(G,u,f)=>Ds(Lr(J(G,Vr(u,I,f),A,f)),A);if(w&&F)ht(C,G=>{const{Ut:u,Vt:f}=G,p=A&&Ee(u)&&r;D(f,A?w:F,Y({transform:Dr(I,p).map(b=>k(G,b,p))},p))});else{const G=un(g);W(C,u=>{const{Vt:f,Ut:p}=u;return[f,{transform:k(u,A?G.x:G.y,A&&Ee(p)&&r)}]})}},rt=C=>T&&!v&&cn(C)===d,nt=[],q=[],N=[],ct=(C,A,R)=>{const I=Zc(R),k=I?R:!0,G=I?!R:!0;k&&j(q,C,A),G&&j(N,C,A)},mt=()=>{U(q,!0),U(N)},gt=()=>{B(q,!0),B(N)},lt=()=>{if(T){const{Lt:C}=n,A=.5;if(w&&F)ht(he(N,q),({Ut:R})=>{if(rt(R)){const I=(k,G,u)=>{const f=u&&Ee(R)&&r;D(R,k,Y({transform:Dr(G-A,f).map(p=>Ds(lo(p),u))},f),"add")};I(w,C.x,!0),I(F,C.y)}else Q(R)});else{const R=un(g),I=k=>{const{Ut:G}=k,u=rt(G)&&G,f=(p,b,y)=>{const m=Vr(p,b,y),O=b*m;return lo(y?-O:O)};return[u,{transform:u?Ds({x:f(R.x,C.x,Ee(G)&&r),y:f(R.y,C.y)}):""}]};W(q,I),W(N,I)}}},X=C=>{const R=Ze(`${Ut} ${C?Lf:Hf}`),I=Ze(Cl),k=Ze(Ko),G={Ut:R,Mt:I,Vt:k};return vt(C?q:N,G),vt(nt,[kt(R,I),kt(I,k),tt($e,R),Q,s(G,ct,B,C)]),G},at=tt(X,!0),yt=tt(X,!1),bt=()=>(kt(K,q[0].Ut),kt(K,N[0].Ut),tt(qt,nt));return at(),yt(),[{Bt:mt,Nt:gt,jt:lt,Ft:ct,qt:{J:w,Wt:q,Xt:at,Yt:tt(W,q)},Jt:{J:F,Wt:N,Xt:yt,Yt:tt(W,N)}},bt]},ea=(t,e,n)=>{const{bt:s,kt:o,Kt:r}=e;return(c,l,i,a)=>{const{Ut:d,Mt:h,Vt:g}=c,[v,T]=Se(333),[x,L]=Se(),$=tt(i,[c],a),H=!!o.scrollBy,w=`client${a?"X":"Y"}`,F=a?sn:on,K=a?"left":"top",M=a?"w":"h",J=a?"x":"y",Y=j=>j.propertyName.indexOf(F)>-1,Q=()=>{const j="pointerup pointerleave pointercancel lostpointercapture",W=(U,B)=>rt=>{const{Lt:nt}=n,q=wn(h)[M]-wn(g)[M],ct=B*rt/q*nt[J];Re(o,{[J]:U+ct})};return St(h,"pointerdown",U=>{const B=qe(U.target,`.${Ko}`)===g,rt=B?g:h,nt=t.scrollbars,{button:q,isPrimary:N,pointerType:ct}=U,{pointers:mt}=nt;if(q===0&&N&&nt[B?"dragScroll":"clickScroll"]&&(mt||[]).includes(ct)){const lt=!B&&U.shiftKey,X=tt(Qe,g),at=tt(Qe,h),yt=(m,O)=>(m||X())[K]-(O||at())[K],bt=Qs(Qe(o)[F])/wn(o)[M]||1,C=W(un(o)[J]||0,1/bt),A=U[w],R=X(),I=at(),k=R[F],G=yt(R,I)+k/2,u=A-I[K],f=B?0:u-G,p=m=>{qt(y),rt.releasePointerCapture(m.pointerId)},y=[An(s,zt,Ef),St(r,j,p),St(r,"selectstart",m=>Nr(m),{H:!1}),St(h,j,p),St(h,"pointermove",m=>{const O=m[w]-A;(B||lt)&&C(f+O)})];if(rt.setPointerCapture(U.pointerId),lt)C(f);else if(!B){const m=dn(Kf);m&&vt(y,m(C,yt,f,k,u))}}})};let D=!0;return tt(qt,[St(d,"pointerenter",()=>{l(Kr,!0)}),St(d,"pointerleave pointercancel",()=>{l(Kr,!1)}),St(d,"wheel",j=>{const{deltaX:W,deltaY:U,deltaMode:B}=j;H&&D&&B===0&&cn(d)===s&&o.scrollBy({left:W,top:U,behavior:"smooth"}),D=!1,l(Gr,!0),v(()=>{D=!0,l(Gr)}),Nr(j)},{H:!1,I:!0}),St(g,"transitionstart",j=>{if(Y(j)){const W=()=>{$(),x(W)};W()}}),St(g,"transitionend transitioncancel",j=>{Y(j)&&(L(),$())}),St(d,"mousedown",tt(St,r,"click",zo,{A:!0,I:!0}),{I:!0}),Q(),T,L])}},na=(t,e,n,s,o,r)=>{let c,l,i,a,d,h=ee,g=0;const[v,T]=Se(),[x,L]=Se(),[$,H]=Se(100),[w,F]=Se(100),[K,M]=Se(100),[J,Y]=Se(()=>g),[Q,D]=ta(t,o,s,ea(e,o,s)),{bt:j,Zt:W,Rt:U}=o,{Ft:B,Bt:rt,Nt:nt,jt:q}=Q,N=X=>{B(po,X,!0),B(po,X,!1)},ct=(X,at)=>{if(Y(),X)B(qr);else{const yt=tt(B,qr,!0);g>0&&!at?J(yt):yt()}},mt=X=>X.pointerType==="mouse",gt=X=>{mt(X)&&(a=l,a&&ct(!0))},lt=[H,Y,F,M,L,T,()=>h(),St(j,"pointerover",gt,{A:!0}),St(j,"pointerenter",gt),St(j,"pointerleave",X=>{mt(X)&&(a=!1,l&&ct(!1))}),St(j,"pointermove",X=>{mt(X)&&c&&v(()=>{H(),ct(!0),w(()=>{c&&ct(!1)})})}),St(W,"scroll",X=>{x(()=>{nt(),i&&ct(!0),$(()=>{i&&!a&&ct(!1)})}),r(X),q()})];return[()=>tt(qt,vt(lt,D())),({It:X,Tt:at,Gt:yt,Qt:bt})=>{const{tn:C,nn:A,sn:R}=bt||{},{Ct:I,dt:k}=yt||{},{N:G}=n,{T:u}=Gt(),{k:f,en:p}=s,[b,y]=X("showNativeOverlaidScrollbars"),[m,O]=X("scrollbars.theme"),[E,S]=X("scrollbars.visibility"),[_,P]=X("scrollbars.autoHide"),[V,z]=X("scrollbars.autoHideSuspend"),[Z]=X("scrollbars.autoHideDelay"),[st,dt]=X("scrollbars.dragScroll"),[it,_t]=X("scrollbars.clickScroll"),[Ct,se]=X("overflow"),Yt=k&&!at,de=p.x||p.y,be=C||A||I||at,It=R||S||se,Mt=b&&u.x&&u.y,_e=(hn,Ke,Go)=>{const Yo=hn.includes("scroll")&&(E==="visible"||E==="auto"&&Ke==="scroll");return B(Ff,Yo,Go),Yo};if(g=Z,Yt&&(V&&de?(N(!1),h(),K(()=>{h=St(W,"scroll",tt(N,!0),{A:!0})})):N(!0)),y&&B(Rf,Mt),O&&(B(d),B(m,!0),d=m),z&&!V&&N(!0),P&&(c=_==="move",l=_==="leave",i=_!=="never",ct(!i,!0)),dt&&B(Vf,st),_t&&B(Df,it),It){const hn=_e(Ct.x,f.x,!0),Ke=_e(Ct.y,f.y,!1);B(Nf,!(hn&&Ke))}be&&(rt(),nt(),q(),B(Wr,!p.x,!0),B(Wr,!p.y,!1),B(Mf,G&&!U))},{},Q]},sa=t=>{const e=Gt(),{G:n,L:s}=e,{elements:o}=n(),{host:r,padding:c,viewport:l,content:i}=o,a=Zn(t),d=a?{}:t,{elements:h}=d,{host:g,padding:v,viewport:T,content:x}=h||{},L=a?t:d.target,$=ro(L,"textarea"),H=L.ownerDocument,w=H.documentElement,F=L===H.body,K=H.defaultView,M=()=>H.activeElement,J=m=>{m&&m.focus&&m.focus()},Y=tt(qf,[L]),Q=tt(Rl,[L]),D=tt(Ze,""),j=tt(Y,D,l),W=tt(Q,D,i),U=j(T),B=U===L,rt=B&&F,nt=!B&&W(x),q=!B&&U===nt,N=rt?w:U,ct=$?Y(D,r,g):L,mt=rt?N:ct,gt=!B&&Q(D,c,v),lt=!q&&nt,X=[lt,N,gt,mt].map(m=>Zn(m)&&!cn(m)&&m),at=m=>m&&ws(X,m),yt=at(N)?L:N,bt={gt:L,bt:mt,D:N,cn:gt,wt:lt,kt:rt?w:N,Zt:rt?H:N,rn:F?w:yt,ln:K,Kt:H,St:$,Rt:F,Dt:a,V:B,yt:m=>mf(N,B?zt:Oe,m),Ot:(m,O)=>zn(N,B?zt:Oe,m,O)},{gt:C,bt:A,cn:R,D:I,wt:k}=bt,G=[()=>{re(A,[zt,js]),re(C,js),F&&re(w,[js,zt])}],u=$&&at(A);let f=$?C:co([k,I,R,A,C].find(m=>m&&!at(m)));const p=rt?C:k||I,b=tt(qt,G);return[bt,()=>{const m=M(),O=_=>{kt(cn(_),co(_)),$e(_)},E=_=>_?St(_,"focusin focusout focus blur",P=>{zo(P),P.stopImmediatePropagation()},{I:!0,H:!1}):ee,S=E(m);if(Xt(A,zt,B?"viewport":"host"),Xt(R,ho,""),Xt(k,kr,""),B||(Xt(I,Oe,""),F&&An(w,zt,Cf)),u&&(Rr(C,A),vt(G,()=>{Rr(A,C),$e(A)})),kt(p,f),kt(A,R),kt(R||A,!B&&I),kt(I,k),vt(G,[S,()=>{const _=M(),P=E(_);re(R,ho),re(k,kr),re(I,[xl,Sl,Oe]),at(k)&&O(k),at(I)&&O(I),at(R)&&O(R),J(_),P()}]),s&&!B&&(An(I,Oe,El),vt(G,tt(re,I,Oe))),!B&&K.top===K&&m===L){const _="tabindex",P=Os(I,_);Xt(I,_,"-1"),J(I);const V=()=>P?Xt(I,_,P):re(I,_),z=St(H,"pointerdown keydown",()=>{V(),z()});vt(G,[V,z])}else J(m);return S(),f=0,b},b]},oa=({wt:t})=>({Gt:e,an:n,Tt:s})=>{const{xt:o}=e||{},{$t:r}=n;t&&(o||s)&&ln(t,{[on]:r&&"100%"})},ra=({bt:t,cn:e,D:n,V:s},o)=>{const[r,c]=Zt({u:gf,o:Hr()},tt(Hr,t,"padding",""));return({It:l,Gt:i,an:a,Tt:d})=>{let[h,g]=c(d);const{L:v}=Gt(),{ht:T,Ht:x,Ct:L}=i||{},{N:$}=a,[H,w]=l("paddingAbsolute");(T||g||(d||x))&&([h,g]=r(d));const K=!s&&(w||L||g);if(K){const M=!H||!e&&!v,J=h.r+h.l,Y=h.t+h.b,Q={[rl]:M&&!$?-J:0,[cl]:M?-Y:0,[ol]:M&&$?-J:0,top:M?-h.t:0,right:M?$?-h.r:"auto":0,left:M?$?"auto":-h.l:0,[sn]:M&&`calc(100% + ${J}px)`},D={[tl]:M?h.t:0,[el]:M?h.r:0,[sl]:M?h.b:0,[nl]:M?h.l:0};ln(e||n,Q),ln(n,D),ft(o,{cn:h,un:!M,j:e?D:ft({},Q,D)})}return{fn:K}}},ca=(t,e)=>{const n=Gt(),{bt:s,cn:o,D:r,V:c,Ot:l,Rt:i,ln:a}=t,{L:d}=n,h=i&&c,g=tt(Bn,0),v={u:il,o:{w:0,h:0}},T={u:ul,o:{x:rn,y:rn}},x=(D,j)=>{const W=Wt.devicePixelRatio%1!==0?1:0,U={w:g(D.w-j.w),h:g(D.h-j.h)};return{w:U.w>W?U.w:0,h:U.h>W?U.h:0}},[L,$]=Zt(v,tt(Bo,r)),[H,w]=Zt(v,tt(io,r)),[F,K]=Zt(v),[M,J]=Zt(v),[Y]=Zt(T),Q=dn(Wo);return({It:D,Gt:j,an:W,Tt:U},{fn:B})=>{const{ht:rt,Ht:nt,Ct:q,Et:N}=j||{},ct=Q&&Q.M(t,e,W,n,D),{q:mt,W:gt,X:lt}=ct||{},[X,at]=zf(D,n),[yt,bt]=D("overflow"),C=rt||B||nt||q||N||at,A=es(yt.x),R=es(yt.y),I=A||R;let k=$(U),G=w(U),u=K(U),f=J(U),p;if(at&&d&&l(El,!X),C){I&&l(tn,!1);const[it,_t]=gt?gt(p):[],[Ct,se]=k=L(U),[Yt,de]=G=H(U),be=_l(r),It=Yt,Mt=be;it&&it(),(de||se||at)&&_t&&!X&&mt&&mt(_t,Yt,Ct);const _e=wf(a),hn={w:g(Bn(Yt.w,It.w)+Ct.w),h:g(Bn(Yt.h,It.h)+Ct.h)},Ke={w:g((h?_e.w:Mt.w+g(be.w-Yt.w))+Ct.w),h:g((h?_e.h:Mt.h+g(be.h-Yt.h))+Ct.h)};f=M(Ke),u=F(x(hn,Ke),U)}const[b,y]=f,[m,O]=u,[E,S]=G,[_,P]=k,V={x:m.w>0,y:m.h>0},z=A&&R&&(V.x||V.y)||A&&V.x&&!V.y||R&&V.y&&!V.x;if(B||q||N||P||S||y||O||bt||at||C){const it={},_t=kf(t,V,yt,it);lt&<(_t,W,!!mt&&mt(_t,E,_),it),c?(Xt(s,xl,it[xs]),Xt(s,Sl,it[Ss])):ln(r,it)}zn(s,zt,Ol,z),zn(o,ho,Tf,z),c||zn(r,Oe,tn,I);const[st,dt]=Y(Pl(t).k);return ft(e,{k:st,Pt:{x:b.w,y:b.h},Lt:{x:m.w,y:m.h},en:V}),{sn:dt,tn:y,nn:O}}},la=t=>{const[e,n,s]=sa(t),o={cn:{t:0,r:0,b:0,l:0},un:!1,j:{[rl]:0,[cl]:0,[ol]:0,[tl]:0,[el]:0,[sl]:0,[nl]:0},Pt:{x:0,y:0},Lt:{x:0,y:0},k:{x:rn,y:rn},en:{x:!1,y:!1}},{gt:r,D:c,V:l}=e,{L:i,T:a}=Gt(),d=!i&&(a.x||a.y),h=[oa(e),ra(e,o),ca(e,o)];return[n,g=>{const v={},x=d&&un(c),L=l?An(c,zt,ao):ee;return ht(h,$=>{ft(v,$(g,v)||{})}),L(),Re(c,x),!l&&Re(r,0),v},o,e,s]},ia=(t,e,n,s)=>{const o=zr(e,{}),[r,c,l,i,a]=la(t),[d,h,g]=Qf(i,l,o,H=>{$({},H)}),[v,T,,x]=na(t,e,g,l,i,s),L=H=>Pe(H).some(w=>!!H[w]),$=(H,w)=>{const{_n:F,Tt:K,At:M,dn:J}=H,Y=F||{},Q=!!K,D={It:zr(e,Y,Q),_n:Y,Tt:Q};if(J)return T(D),!1;const j=w||h(ft({},D,{At:M})),W=c(ft({},D,{an:g,Gt:j}));T(ft({},D,{Gt:j,Qt:W}));const U=L(j),B=L(W),rt=U||B||!Vo(Y)||Q;return rt&&n(H,{Gt:j,Qt:W}),rt};return[()=>{const{rn:H,D:w}=i,F=un(H),K=[d(),r(),v()];return Re(w,F),tt(qt,K)},$,()=>({vn:g,hn:l}),{pn:i,gn:x},a]},pe=(t,e,n)=>{const{nt:s}=Gt(),o=Zn(t),r=o?t:t.target,c=Ml(r);if(e&&!c){let l=!1;const i=[],a={},d=D=>{const j=dl(D,!0),W=dn(Uf);return W?W(j,!0):j},h=ft({},s(),d(e)),[g,v,T]=fo(),[x,L,$]=fo(n),H=(D,j)=>{$(D,j),T(D,j)},[w,F,K,M,J]=ia(t,h,({_n:D,Tt:j},{Gt:W,Qt:U})=>{const{ht:B,Ct:rt,xt:nt,Ht:q,zt:N,dt:ct}=W,{tn:mt,nn:gt,sn:lt}=U;H("updated",[Q,{updateHints:{sizeChanged:!!B,directionChanged:!!rt,heightIntrinsicChanged:!!nt,overflowEdgeChanged:!!mt,overflowAmountChanged:!!gt,overflowStyleChanged:!!lt,contentMutation:!!q,hostMutation:!!N,appear:!!ct},changedOptions:D||{},force:!!j}])},D=>H("scroll",[Q,D])),Y=D=>{Jf(r),qt(i),l=!0,H("destroyed",[Q,D]),v(),L()},Q={options(D,j){if(D){const W=j?s():{},U=vl(h,ft(W,d(D)));Vo(U)||(ft(h,U),F({_n:U}))}return ft({},h)},on:x,off:(D,j)=>{D&&j&&L(D,j)},state(){const{vn:D,hn:j}=K(),{N:W}=D,{Pt:U,Lt:B,k:rt,en:nt,cn:q,un:N}=j;return ft({},{overflowEdge:U,overflowAmount:B,overflowStyle:rt,hasOverflow:nt,padding:q,paddingAbsolute:N,directionRTL:W,destroyed:l})},elements(){const{gt:D,bt:j,cn:W,D:U,wt:B,kt:rt,Zt:nt}=M.pn,{qt:q,Jt:N}=M.gn,ct=gt=>{const{Vt:lt,Mt:X,Ut:at}=gt;return{scrollbar:at,track:X,handle:lt}},mt=gt=>{const{Wt:lt,Xt:X}=gt,at=ct(lt[0]);return ft({},at,{clone:()=>{const yt=ct(X());return F({dn:!0}),yt}})};return ft({},{target:D,host:j,padding:W||U,viewport:U,content:B||U,scrollOffsetElement:rt,scrollEventElement:nt,scrollbarHorizontal:mt(q),scrollbarVertical:mt(N)})},update:D=>F({Tt:D,At:!0}),destroy:tt(Y,!1),plugin:D=>a[Pe(D)[0]]};return vt(i,[J]),Yf(r,Q),Il(Al,pe,[Q,g,a]),Gf(M.pn.Rt,!o&&t.cancel)?(Y(!0),Q):(vt(i,w()),H("initialized",[Q]),Q.update(!0),Q)}return c};pe.plugin=t=>{const e=ne(t),n=e?t:[t],s=n.map(o=>Il(o,pe)[0]);return jf(n),e?s:s[0]};pe.valid=t=>{const e=t&&t.elements,n=ae(e)&&e();return Xn(n)&&!!Ml(n.target)};pe.env=()=>{const{P:t,T:e,L:n,K:s,J:o,st:r,et:c,G:l,tt:i,nt:a,ot:d}=Gt();return ft({},{scrollbarsSize:t,scrollbarsOverlaid:e,scrollbarsHiding:n,rtlScrollBehavior:s,scrollTimeline:o,staticDefaultInitialization:r,staticDefaultOptions:c,getDefaultInitialization:l,setDefaultInitialization:i,getDefaultOptions:a,setDefaultOptions:d})};const ua=()=>{if(typeof window>"u"){const a=()=>{};return[a,a]}let t,e;const n=window,s=typeof n.requestIdleCallback=="function",o=n.requestAnimationFrame,r=n.cancelAnimationFrame,c=s?n.requestIdleCallback:o,l=s?n.cancelIdleCallback:r,i=()=>{l(t),r(e)};return[(a,d)=>{i(),t=c(s?()=>{i(),e=o(a)}:a,typeof d=="object"?d:{timeout:2233})},i]},Hl=t=>{let e=null,n,s,o;const r=Ks(t||{}),[c,l]=ua();return Ve(()=>{var i;return Bt((i=r.value)==null?void 0:i.defer)},i=>{o=i},{deep:!0,immediate:!0}),Ve(()=>{var i;return Bt((i=r.value)==null?void 0:i.options)},i=>{n=i,pe.valid(e)&&e.options(n||{},!0)},{deep:!0,immediate:!0}),Ve(()=>{var i;return Bt((i=r.value)==null?void 0:i.events)},i=>{s=i,pe.valid(e)&&e.on(s||{},!0)},{deep:!0,immediate:!0}),Ro(()=>{l(),e==null||e.destroy()}),[i=>{if(pe.valid(e))return e;const a=()=>e=pe(i,n||{},s||{});o?c(a,o):a()},()=>e]},fa=Ic({__name:"OverlayScrollbarsComponent",props:{element:{type:String,default:"div"},options:{type:Object},events:{type:Object},defer:{type:[Boolean,Object]}},emits:["osInitialized","osUpdated","osDestroyed","osScroll"],setup(t,{expose:e,emit:n}){const s=t,o={initialized:"osInitialized",updated:"osUpdated",destroyed:"osDestroyed",scroll:"osScroll"},{element:r,options:c,events:l,defer:i}=wi(s),a=Ks(null),d=Ks(null),h=He(),[g,v]=Hl({options:c,events:h,defer:i});return e({osInstance:v,getElement:()=>a.value}),Ui(T=>{const{value:x}=a,{value:L}=d;x&&L&&(g({target:x,elements:{viewport:L,content:L}}),T(()=>{var $;return($=v())==null?void 0:$.destroy()}))}),Ve(()=>Bt(l),T=>{const x=T||{};h.value=Object.keys(o).reduce((L,$)=>{const H=x[$];return L[$]=[(...w)=>n(o[$],...w),...(Array.isArray(H)?H:[H]).filter(Boolean)],L},{})},{deep:!0,immediate:!0}),(T,x)=>(Tt(),hs(Hi(Bt(r)),{"data-overlayscrollbars-initialize":"",ref_key:"elementRef",ref:a},{default:Po(()=>[wt("div",{"data-overlayscrollbars-contents":"",ref_key:"slotRef",ref:d},[eu(T.$slots,"default")],512)]),_:3},512))}}),aa=()=>{const t=He([]),e={},n={},s=c=>{const l=e[c];e[c]=typeof l=="number"?l+1:1,t.value=Array.from(new Set([...t.value,c])),clearTimeout(n[c]),n[c]=setTimeout(()=>{const i=new Set(t.value);i.delete(c),t.value=Array.from(i)},500)},o=c=>({active:t.value.includes(c),count:e[c]||0});return[Gc(()=>({initialized:o("initialized"),destroyed:o("destroyed"),updated:o("updated"),scroll:o("scroll")})),s]},da=wt("h1",null,[wt("a",{href:"https://www.npmjs.com/package/overlayscrollbars-vue",target:"_blank"}," OverlayScrollbars Vue ")],-1),ha={class:"slot"},pa={key:0,class:"logo"},ga=wt("img",{alt:"Vue logo",src:"logo.svg"},null,-1),ma=[ga],ba={key:1,class:"overlayscrollbars-vue"},_a=wt("div",{class:"logo"},[wt("img",{alt:"Vue logo",src:"logo.svg"})],-1),ya=[_a],va=wt("p",{class:"title"},"Actions:",-1),wa={class:"items"},xa=wt("p",{class:"title"},"Events:",-1),Sa={class:"items"},Oa={key:0},Ea={class:"items"},Ca=wt("a",{href:"https://github.com/KingSora/OverlayScrollbars/tree/master/examples/vue",target:"_blank"}," Open source code of this example. ",-1),Aa=Ic({__name:"App",setup(t){const e=He(!1),n=He(!1),s=He(!0),o=He(null),r=He(null),[c,l]=aa(),[i,a]=Hl({defer:!0,events:{initialized:()=>{o.value=!0},destroyed:()=>{o.value=!1}},options:{scrollbars:{theme:"os-theme-light"}}}),d=()=>{var w;const T=(w=r==null?void 0:r.value)==null?void 0:w.osInstance();if(!T)return;const{overflowAmount:x}=T.state(),{scrollOffsetElement:L}=T.elements(),{scrollLeft:$,scrollTop:H}=L;L.scrollTo({behavior:"smooth",left:Math.round((x.x-$)/x.x)*x.x,top:Math.round((x.y-H)/x.y)*x.y})},h=()=>e.value=!e.value,g=()=>n.value=!n.value,v=()=>{const T=a();T&&!T.state().destroyed?T.destroy():i({target:document.body,cancel:{body:!1}})};return Rc(()=>i(document.body)),(T,x)=>(Tt(),Lt(Et,null,[wt("main",null,[da,wt("section",ha,[s.value?(Tt(),hs(Bt(fa),{key:0,class:"overlayscrollbars-vue",ref_key:"osRef",ref:r,style:cs({display:n.value?"none":void 0}),options:{scrollbars:{theme:"os-theme-light"}},events:{initialized:()=>Bt(l)("initialized"),destroyed:()=>Bt(l)("destroyed"),updated:()=>Bt(l)("updated"),scroll:()=>Bt(l)("scroll")},defer:""},{default:Po(()=>[e.value?Ls("",!0):(Tt(),Lt("div",pa,ma))]),_:1},8,["style","events"])):(Tt(),Lt("div",ba,ya))]),wt("section",null,[va,wt("div",wa,[s.value?(Tt(),Lt(Et,{key:0},[wt("button",{onClick:d},"Scroll"),wt("button",{onClick:h},[e.value?(Tt(),Lt(Et,{key:0},[jt(" Show ")],64)):(Tt(),Lt(Et,{key:1},[jt(" Hide ")],64)),jt(" Content ")]),wt("button",{onClick:g},[n.value?(Tt(),Lt(Et,{key:0},[jt(" Show ")],64)):(Tt(),Lt(Et,{key:1},[jt(" Hide ")],64)),jt(" Element ")])],64)):Ls("",!0),wt("button",{onClick:x[0]||(x[0]=L=>s.value=!s.value)},[s.value?(Tt(),Lt(Et,{key:0},[jt(" Destroy ")],64)):(Tt(),Lt(Et,{key:1},[jt(" Initialize ")],64)),jt(" OverlayScrollbars ")])])]),wt("section",null,[xa,wt("div",Sa,[(Tt(!0),Lt(Et,null,tu(Object.entries(Bt(c)),([L,$])=>(Tt(),Lt("div",{class:ls(`event ${$.active?"active":""}`)},Xo(L)+" ("+Xo($.count)+") ",3))),256))])])]),wt("footer",null,[o.value!==null?(Tt(),Lt("section",Oa,[wt("div",Ea,[wt("button",{onClick:v},[o.value?(Tt(),Lt(Et,{key:0},[jt(" Destroy ")],64)):(Tt(),Lt(Et,{key:1},[jt(" Initialize ")],64)),jt(" Body OverlayScrollbars ")])])])):Ls("",!0),Ca])],64))}}),Ta=cf(Aa);Ta.mount("#app");
diff --git a/docs/example/vue/index.html b/docs/example/vue/index.html
index 77682267..a440b9a8 100644
--- a/docs/example/vue/index.html
+++ b/docs/example/vue/index.html
@@ -11,7 +11,7 @@
rel="stylesheet"
/>
OverlayScrollbars & Vue
-
+
diff --git a/docs/examples.html b/docs/examples.html
index c78c62a0..7ff5664f 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -1 +1 @@
-OverlayScrollbars Examples
\ No newline at end of file
+OverlayScrollbars Examples
\ No newline at end of file
diff --git a/docs/examples.txt b/docs/examples.txt
index 3625be8c..4755800e 100644
--- a/docs/examples.txt
+++ b/docs/examples.txt
@@ -1,7 +1,7 @@
2:I[5250,["250","static/chunks/250-803c01549b05a15b.js","668","static/chunks/app/examples/page-874222f5f6501ae2.js"],""]
3:I[5613,[],""]
4:I[1778,[],""]
-5:I[293,["554","static/chunks/554-ea66ad1362920aef.js","10","static/chunks/10-de113a642ecc6cea.js","185","static/chunks/app/layout-687088f31fb0da9c.js"],"Html"]
-0:["pHTXy3iaf19S1yo6GdEgf",[[["",{"children":["examples",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["examples",{"children":["__PAGE__",{},["$L1",["$","div",null,{"className":"h-full sm:container default:px-6","children":["$","main",null,{"className":"h-full grid items-center justify-items-center py-5 grid-rows-[auto_1fr]","children":[["$","$L2",null,{"href":"/","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm p-4","children":"Documentation"}],["$","div",null,{"className":"w-full grid gap-6 grid-cols-fit-56 py-6","children":[["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(/OverlayScrollbars/icon/javascript.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"/OverlayScrollbars/icon/javascript.svg","alt":"JavaScript","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["JavaScript"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/overlayscrollbars",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/overlayscrollbars","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-example-29hk3v",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-example-29hk3v","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg","alt":"React","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["React"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/react",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/react","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-react",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-react","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-react-example-ddz458",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-react-example-ddz458","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg","alt":"Vue","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Vue"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/vue",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/vue","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-vue",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-vue","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-vue-example-rh3vjm",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-vue-example-rh3vjm","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg","alt":"Angular","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Angular"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/angular",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/angular","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-ngx",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-ngx","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-ngx-example-dwtg9q",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-ngx-example-dwtg9q","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg","alt":"Solid","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Solid"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/solid",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/solid","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-solid",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-solid","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-solid-example-wxl45n",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-solid-example-wxl45n","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg","alt":"Svelte","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Svelte"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/svelte",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/svelte","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-svelte",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-svelte","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-svelte-example-8gqhrp",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-svelte-example-8gqhrp","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}]]}]]}]}],null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","examples","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}]]},[null,["$","$L5",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/OverlayScrollbars/_next/static/css/403ab94758bf94f7.css","precedence":"next","crossOrigin":""}]],"$L6"]]]]
+5:I[293,["554","static/chunks/554-ea66ad1362920aef.js","10","static/chunks/10-b146c6f71bcb47c4.js","185","static/chunks/app/layout-687088f31fb0da9c.js"],"Html"]
+0:["IbnVYJPYee4sjOzc9Cwqx",[[["",{"children":["examples",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["examples",{"children":["__PAGE__",{},["$L1",["$","div",null,{"className":"h-full sm:container default:px-6","children":["$","main",null,{"className":"h-full grid items-center justify-items-center py-5 grid-rows-[auto_1fr]","children":[["$","$L2",null,{"href":"/","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm p-4","children":"Documentation"}],["$","div",null,{"className":"w-full grid gap-6 grid-cols-fit-56 py-6","children":[["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(/OverlayScrollbars/icon/javascript.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"/OverlayScrollbars/icon/javascript.svg","alt":"JavaScript","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["JavaScript"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/overlayscrollbars",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/overlayscrollbars","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-example-29hk3v",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-example-29hk3v","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg","alt":"React","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["React"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/react",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/react","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-react",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-react","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-react-example-ddz458",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-react-example-ddz458","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg","alt":"Vue","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Vue"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/vue",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/vue","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-vue",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-vue","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-vue-example-rh3vjm",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-vue-example-rh3vjm","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg","alt":"Angular","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Angular"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/angular",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/angular","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-ngx",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-ngx","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-ngx-example-dwtg9q",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-ngx-example-dwtg9q","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg","alt":"Solid","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Solid"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/solid",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/solid","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-solid",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-solid","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-solid-example-wxl45n",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-solid-example-wxl45n","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg","alt":"Svelte","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Svelte"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/svelte",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/svelte","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-svelte",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-svelte","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-svelte-example-8gqhrp",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-svelte-example-8gqhrp","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}]]}]]}]}],null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","examples","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}]]},[null,["$","$L5",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/OverlayScrollbars/_next/static/css/403ab94758bf94f7.css","precedence":"next","crossOrigin":""}]],"$L6"]]]]
6:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"name":"theme-color","content":"#36befd"}],["$","meta","2",{"charSet":"utf-8"}],["$","title","3",{"children":"OverlayScrollbars Examples"}],["$","meta","4",{"name":"description","content":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."}],["$","link","5",{"rel":"author","href":"https://github.com/KingSora"}],["$","meta","6",{"name":"author","content":"Rene Haas"}],["$","link","7",{"rel":"author","href":"https://github.com/KingSora"}],["$","meta","8",{"name":"author","content":"KingSora"}],["$","meta","9",{"name":"keywords","content":"OverlayScrollbars,Overlay,Scroll,Bar,Custom,Scrollbar,React,Vue,Angular,Solid,Solidjs,Svelte,JavaScript,TypeScript,Plugin,Library"}],["$","meta","10",{"name":"creator","content":"Rene Haas"}],["$","meta","11",{"name":"publisher","content":"Rene Haas"}],["$","meta","12",{"name":"twitter:card","content":"summary"}],["$","meta","13",{"name":"twitter:title","content":"OverlayScrollbars"}],["$","meta","14",{"name":"twitter:description","content":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."}],["$","link","15",{"rel":"icon","href":"/OverlayScrollbars/favicon.ico","type":"image/x-icon","sizes":"256x256"}]]
1:null
diff --git a/docs/index.html b/docs/index.html
index cc45ad0c..981d2cee 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,4 +1,4 @@
-OverlayScrollbarsOverlayScrollbars
A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.
used by
Looking for the v1 docs? Follow this link.
Why
+OverlayScrollbarsOverlayScrollbars
A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.
used by
Looking for the v1 docs? Follow this link.
Why
I created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support.
Goals & Features
@@ -616,4 +616,4 @@ Future Plans
- Improve tests. (unit & browser tests)
License
-MIT
\ No newline at end of file
+MIT
\ No newline at end of file
diff --git a/docs/index.txt b/docs/index.txt
index eb1ed381..62207725 100644
--- a/docs/index.txt
+++ b/docs/index.txt
@@ -1,8 +1,8 @@
-2:I[9009,["250","static/chunks/250-803c01549b05a15b.js","10","static/chunks/10-de113a642ecc6cea.js","931","static/chunks/app/page-013e48bf23238fcb.js"],"OverlayScrollbarsClientComponent"]
-3:I[5250,["250","static/chunks/250-803c01549b05a15b.js","10","static/chunks/10-de113a642ecc6cea.js","931","static/chunks/app/page-013e48bf23238fcb.js"],""]
-4:I[293,["554","static/chunks/554-ea66ad1362920aef.js","10","static/chunks/10-de113a642ecc6cea.js","185","static/chunks/app/layout-687088f31fb0da9c.js"],"Html"]
+2:I[9009,["250","static/chunks/250-803c01549b05a15b.js","10","static/chunks/10-b146c6f71bcb47c4.js","931","static/chunks/app/page-013e48bf23238fcb.js"],"OverlayScrollbarsClientComponent"]
+3:I[5250,["250","static/chunks/250-803c01549b05a15b.js","10","static/chunks/10-b146c6f71bcb47c4.js","931","static/chunks/app/page-013e48bf23238fcb.js"],""]
+4:I[293,["554","static/chunks/554-ea66ad1362920aef.js","10","static/chunks/10-b146c6f71bcb47c4.js","185","static/chunks/app/layout-687088f31fb0da9c.js"],"Html"]
5:I[5613,[],""]
6:I[1778,[],""]
-0:["pHTXy3iaf19S1yo6GdEgf",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},["$L1",["$","div",null,{"className":"sm:container default:px-6","children":[["$","div",null,{"className":"mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44","children":["$","div",null,{"className":"h-full relative before:content-[\"\"] before:bg-[url(/OverlayScrollbars/img/logo.svg)] before:absolute before:left-0 before:w-full before:h-full before:bg-contain before:bg-center before:bg-no-repeat before:-z-10 before:[transform:translateZ(0)] before:[filter:blur(33px)_saturate(1.22)] before:opacity-50 before:top-2.5 after:content-[\"\"] after:bg-[url(/OverlayScrollbars/img/logo.svg)] after:absolute after:left-0 after:w-full after:h-full after:bg-contain after:bg-center after:bg-no-repeat after:-z-10 after:[transform:translateZ(0)] after:[filter:drop-shadow(0_6px_22px_#5242e3)_saturate(1.5)] after:opacity-10 after:top-0","children":["$","img",null,{"src":"/OverlayScrollbars/img/logo.svg","className":"h-full","alt":"OverlayScrollbars Logo","width":"200","height":"200"}]}]}],["$","h1",null,{"className":"text-center xxs:text-4xl text-2xl font-bold my-11","children":["Overlay",["$","wbr",null,{}],"Scrollbars"]}],["$","p",null,{"className":"text-center mx-auto max-w-screen-sm my-11 font-medium","children":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."}],["$","div",null,{"className":"my-6 text-center font-semiBold text-sm uppercase relative","children":["$","span",null,{"className":"p-3 bg-slate-50","children":[["$","span",null,{"children":"used by"}],["$","span",null,{"className":"absolute block top-1/2 left-1/2 w-full xs:w-[80%] border-t-[1px] border-slate-300 -translate-x-1/2 -translate-y-1/2 -z-10"}]]}]}],["$","$L2",null,{"defer":true,"children":["$","div",null,{"className":"flex justify-center","children":["$","div",null,{"className":"inline-flex items-center gap-6 px-1 py-6 opacity-60 [filter:brightness(0.8)_sepia(1)_saturate(1.44)_hue-rotate(175deg)]","children":[["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group py-1","target":"_blank","href":"https://github.com/KingSora/OverlayScrollbars/issues/150#issuecomment-658658186","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/spotify-logo.svg","alt":"Spotify","style":{"filter":"brightness(0.35)"}}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group","target":"_blank","href":"https://github.com/JetBrains/intellij-community/blob/ee35416f381ed33f976d7b9322a5ee6156e7fa2f/platform/platform-api/src/com/intellij/ui/jcef/JBCefScrollbarsHelper.java#L41-L50","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/intellij-idea-logo.svg","alt":"IntelliJ IDEA"}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group py-1.5","target":"_blank","href":"https://github.com/storybookjs/storybook/blob/32d2fafa8d1d2e197e885349f2c01f5422bde5b4/code/ui/components/package.json#L66-L67","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/storybook-logo.svg","alt":"Storybook"}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group py-3","target":"_blank","href":"https://github.com/ColorlibHQ/AdminLTE/blob/3113ac5efed25971ccd0972f5eeff3c364f218dc/src/html/components/_scripts.astro#L6-L7","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/adminlte-logo.png","alt":"Admin LTE"}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group","target":"_blank","href":"https://scramble.cloud/#credits","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/scramble-logo.svg","alt":"Scramble.cloud"}]}]]}]}]}],["$","div",null,{"className":"my-6 text-center font-semiBold text-sm uppercase relative","children":["$","span",null,{"className":"p-3 bg-slate-50","children":[["$","span",null,{"children":["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars","target":"_blank","className":"inline-block leading-[0] rounded-full","children":[["$","span",null,{"style":{"maskImage":"url(/OverlayScrollbars/icon/github.svg)","WebkitMaskImage":"url(/OverlayScrollbars/icon/github.svg)"},"className":"default:block default:flex-none default:bg-current mask-center mask-contain mask-no-repeat inline-block w-11 h-11 hover:scale-110 text-primary-dark hover:text-primary-blue1 active:text-primary-blue2 transition-transformColor ease-in-out duration-300"}],["$","span",null,{"className":"sr-only","children":"OverlayScrollbars on Github"}]]}]}],["$","span",null,{"className":"absolute block top-1/2 left-1/2 w-full xs:w-[80%] border-t-[1px] border-slate-300 -translate-x-1/2 -translate-y-1/2 -z-10"}]]}]}],["$","p",null,{"className":"text-center text-sm text-primary-gray2 mx-auto max-w-screen-sm my-11 font-medium","children":["Looking for the v1 docs? ",["$","$L3",null,{"href":"/v1","children":"Follow this link","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],"."]}],["$","div",null,{"className":"mx-auto flex sm:flex-row justify-center gap-2 items-center flex-wrap","children":[["$","a",null,{"href":"https://www.npmjs.com/package/overlayscrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square","alt":"Downloads"}]}],["$","a",null,{"href":"https://www.npmjs.com/package/overlayscrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square","alt":"Version"}]}],["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square","alt":"License"}]}],["$","a",null,{"href":"https://app.codecov.io/gh/KingSora/OverlayScrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square","alt":"Code Coverage"}]}],["$","a",null,{"href":"https://bundlephobia.com/package/overlayscrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/bundlephobia/minzip/overlayscrollbars?label=max.%20bundle%20size&style=flat-square","alt":"Max. Bundle Size"}]}]]}],["$","nav",null,{"className":"mx-auto my-6 text-lg flex sm:flex-row justify-center gap-2 items-center flex-wrap","children":[["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars","target":"_blank","children":"GitHub","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],["$","span",null,{"children":"  •  "}],["$","$L3",null,{"href":"/examples","target":"_blank","children":"Examples","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]]}],["$","main",null,{"className":"prose prose-primary mx-auto pb-12","children":[["$","h2",null,{"children":"Why"}],"\n",["$","p",null,{"children":"I created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support."}],"\n",["$","h2",null,{"children":"Goals & Features"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Simple, powerful and well documented API"}],"\n",["$","li",null,{"children":["High browser compatibility - ",["$","strong",null,{"children":"Firefox 59+"}],", ",["$","strong",null,{"children":"Chrome 55+"}],", ",["$","strong",null,{"children":"Opera 42+"}],", ",["$","strong",null,{"children":"Edge 15+"}]," and ",["$","strong",null,{"children":"Safari 10+"}]]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Fully Accessible"}]," - Native scroll behavior is completely preserved"]}],"\n",["$","li",null,{"children":["Can be run on the server - ",["$","strong",null,{"children":"SSR"}],", ",["$","strong",null,{"children":"SSG"}]," and ",["$","strong",null,{"children":"ISR"}]," support"]}],"\n",["$","li",null,{"children":["Tested on various devices - ",["$","strong",null,{"children":"Mobile"}],", ",["$","strong",null,{"children":"Desktop"}]," and ",["$","strong",null,{"children":"Tablet"}]]}],"\n",["$","li",null,{"children":["Tested with various (and mixed) inputs - ",["$","strong",null,{"children":"Mouse"}],", ",["$","strong",null,{"children":"Touch"}]," and ",["$","strong",null,{"children":"Pen"}]]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Treeshaking"}]," - bundle only what you really need"]}],"\n",["$","li",null,{"children":["Automatic update detection - ",["$","strong",null,{"children":"no polling"}]]}],"\n",["$","li",null,{"children":["Usage of latest browser features - best ",["$","strong",null,{"children":"performance"}]," in new browsers"]}],"\n",["$","li",null,{"children":"Bidirectional - LTR or RTL direction support"}],"\n",["$","li",null,{"children":["Supports usage on the ",["$","code",null,{"children":"body"}]," element"]}],"\n",["$","li",null,{"children":["Supports all ",["$","strong",null,{"children":"virtual scrolling"}]," libraries"]}],"\n",["$","li",null,{"children":"Simple and effective scrollbar styling"}],"\n",["$","li",null,{"children":"Highly customizable"}],"\n",["$","li",null,{"children":"TypeScript support - fully written in TypeScript"}],"\n",["$","li",null,{"children":"Dependency free - 100% self written to ensure small size and best functionality"}],"\n",["$","li",null,{"children":["High quality and fully typed framework versions for ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react","children":["$","code",null,{"children":"react"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue","children":["$","code",null,{"children":"vue"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx","children":["$","code",null,{"children":"angular"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte","children":["$","code",null,{"children":"svelte"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," and ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid","children":["$","code",null,{"children":"solid"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],"."]}],"\n"]}],"\n",["$","h2",null,{"children":"Choose your framework"}],"\n",["$","p",null,{"children":"Additionally to the vanilla JavaScript version you can use the official framework components & utilities:"}],"\n",["$","div",null,{"className":"flex flex-wrap","children":[["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg","width":"80","height":"80","alt":"React"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg","width":"80","height":"80","alt":"Vue"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg","width":"80","height":"80","alt":"Angular"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg","width":"80","height":"80","alt":"Svelte"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg","width":"80","height":"80","alt":"Solid"}]}]]}],"\n",["$","h2",null,{"children":"Getting started"}],"\n",["$","h3",null,{"children":"npm & nodejs"}],"\n",["$","p",null,{"children":["OverlayScrollbars can be downloaded from ",["$","a",null,{"href":"https://www.npmjs.com/package/overlayscrollbars","children":"npm","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or the package manager of your choice:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"sh","data-theme":"solarized-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"npm"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" install"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" overlayscrollbars"}]]}]}]}]}],"\n",["$","p",null,{"children":"After installation it can be imported:"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"import"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" 'overlayscrollbars/overlayscrollbars.css'"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"import"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"} "}],["$","span",null,{"style":{"color":"#859900"},"children":"from"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" 'overlayscrollbars'"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}]]}]}]}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": If the path ",["$","code",null,{"children":"'overlayscrollbars/overlayscrollbars.css'"}]," is not working use ",["$","code",null,{"children":"'overlayscrollbars/styles/overlayscrollbars.css'"}]," as the import path for the CSS file."]}],"\n"]}],"\n",["$","h3",null,{"children":"Manual download & embedding"}],"\n",["$","p",null,{"children":["You can use OverlayScrollbars without any bundler or package manager.",["$","br",null,{}],"\n","Simply download it from the ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/releases","children":"Releases","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or use a ",["$","a",null,{"href":"https://cdnjs.com/libraries/overlayscrollbars","children":"CDN","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],"."]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["Use the javascript files with the ",["$","code",null,{"children":".browser"}]," extension."]}],"\n",["$","li",null,{"children":["Use the javascript files with the ",["$","code",null,{"children":".es5"}]," extension if you need to support older browsers, otherwise use the ",["$","code",null,{"children":".es6"}]," files."]}],"\n",["$","li",null,{"children":["For production use the javascript / stylesheet files with the ",["$","code",null,{"children":".min"}]," extension."]}],"\n"]}],"\n",["$","p",null,{"children":"Embedd OverlayScrollbars manually in your HTML:"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"html","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"link"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" type"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"text/css\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" href"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"path/to/overlayscrollbars.css\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" rel"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"stylesheet\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"script"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" type"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"text/javascript\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" src"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"path/to/overlayscrollbars.browser.es.js\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" defer>"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"script"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}]]}]}]}],"\n",["$","p",null,{"children":["You can then use the global variable ",["$","code",null,{"children":"OverlayScrollbarsGlobal"}]," to access the api similar to how you can do it in nodejs / modules:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"var"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"} "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbarsGlobal"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}]]}]}]}],"\n",["$","p",null,{"children":["The examples in this documentation will use the ",["$","code",null,{"children":"import"}]," syntax instead of the ",["$","code",null,{"children":"OverlayScrollbarsGlobal"}]," object. Both versions are equivalent though."]}],"\n",["$","h2",null,{"children":"Initialization"}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": During initialization its expected that the ",["$","b",null,{"children":"CSS file is loaded and parsed"}]," by the browser."]}],"\n"]}],"\n",["$","p",null,{"children":["You can initialize either directly with an ",["$","code",null,{"children":"Element"}]," or with an ",["$","code",null,{"children":"Object"}]," where you have more control over the initialization process."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// simple initialization with an element"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {});"}]]}]]}]}]}],"\n",["$","h3",null,{"children":"Bridging initialization flickering"}],"\n",["$","p",null,{"children":"If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.\r\nWhile this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering."}],"\n",["$","p",null,{"children":["To fix this behavior apply the ",["$","code",null,{"children":"data-overlayscrollbars-initialize"}]," attribute to the target element (and ",["$","code",null,{"children":"html"}]," element if the target element is ",["$","code",null,{"children":"body"}],")."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"html","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":""}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"html"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" data-overlayscrollbars-initialize>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"head"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"head"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" data-overlayscrollbars-initialize>"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}],["$","span",null,{"style":{"color":"#268BD2"},"children":"html"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":""}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" data-overlayscrollbars-initialize>"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" OverlayScrollbars is applied to this div"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}]]}]}]}],"\n",["$","h3",null,{"children":"Initialization with an Object"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","p",null,{"children":["The only required field is the ",["$","code",null,{"children":"target"}]," field. This is the field to which the plugin is applied to.",["$","br",null,{}],"\n","If you use the object initialization only with the ",["$","code",null,{"children":"target"}]," field, the outcome is equivalent to the element initialization:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Both initializations have the same outcome"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {});"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":") }, {});"}]]}]]}]}]}],["$","p",null,{"children":["In the initialization object you can specify how the library is handling generated elements.\r\nFor example you can appoint an existing element as the ",["$","code",null,{"children":"viewport"}]," element. Like this the library won't generate it but take the specified element instead:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" elements: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" viewport: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#viewport'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}, {});"}]}]]}]}]}],["$","p",null,{"children":"This is very useful if you have a fixed DOM structure and don't want OverlayScrollbars to generate its own elements. Those cases arise very often when you want an other library to work together with OverlayScrollbars."}],["$","hr",null,{}],["$","p",null,{"children":"You can also decide to which element the scrollbars should be applied to:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" slot: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":")."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"parentElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}, {});"}]}]]}]}]}],["$","hr",null,{}],["$","p",null,{"children":"And last but not least you can decide when the initialization should be canceled:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" cancel: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" nativeScrollbarsOverlaid: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"true"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" body: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"null"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}, {});"}]}]]}]}]}],["$","p",null,{"children":["In the above example the initialization is canceled when the native scrollbars are overlaid or when your target is a ",["$","code",null,{"children":"body"}]," element and the plugin determined that a initialization to the ",["$","code",null,{"children":"body"}]," element would affect native functionality like ",["$","code",null,{"children":"window.scrollTo"}],"."]}]]}],"\n",["$","h2",null,{"children":"Options"}],"\n",["$","p",null,{"children":["You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the ",["$","code",null,{"children":"options"}]," method:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" overflow: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" x: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'hidden'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"});"}]}]]}]}]}],"\n",["$","h3",null,{"children":"Options in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","p",null,{"children":"The default options are:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" defaultOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" paddingAbsolute: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" showNativeOverlaidScrollbars: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" update: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" elementEvents: [["}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'img'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'load'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]],"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" debounce: ["}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#D33682"},"children":"33"}],["$","span",null,{"style":{"color":"#657B83"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" attributes: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"null"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" ignoreMutation: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"null"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" overflow: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" x: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'scroll'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" y: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'scroll'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" theme: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'os-theme-dark'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" visibility: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'auto'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHide: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'never'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideDelay: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"1300"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideSuspend: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" dragScroll: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"true"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" clickScroll: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" pointers: ["}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'mouse'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'touch'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'pen'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}]]}]}]}],["$","h3",null,{"children":["$","code",null,{"children":"paddingAbsolute"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","p",null,{"children":"Indicates whether the padding for the content shall be absolute."}],["$","h3",null,{"children":["$","code",null,{"children":"showNativeOverlaidScrollbars"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","p",null,{"children":"Indicates whether the native overlaid scrollbars shall be visible."}],["$","h3",null,{"children":["$","code",null,{"children":"update.elementEvents"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Array<[string, string]> | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"[['img', 'load']]"}]}]]}]}]]}],["$","p",null,{"children":["An array of tuples. The first value in the tuple is an ",["$","code",null,{"children":"selector"}]," and the second value are ",["$","code",null,{"children":"event names"}],". The plugin will update itself if any of the elements with the specified selector will emit any specified event. The default value can be interpreted as \"The plugin will update itself if any ",["$","code",null,{"children":"img"}]," element emits an ",["$","code",null,{"children":"load"}]," event.\""]}],["$","h3",null,{"children":["$","code",null,{"children":"update.debounce"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"[number, number] | number | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"[0, 33]"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": If 0 is used for the timeout, ",["$","code",null,{"children":"requestAnimationFrame"}]," instead of ",["$","code",null,{"children":"setTimeout"}]," is used for the debounce."]}],"\n"]}],["$","p",null,{"children":["Debounces the ",["$","code",null,{"children":"MutationObserver"}]," which tracks changes to the content. If a ",["$","strong",null,{"children":"tuple"}]," is passed, the first value is the timeout and second is the max wait. If only a ",["$","strong",null,{"children":"number"}]," is passed you specify only the timeout and there is no max wait. With ",["$","strong",null,{"children":"null"}]," there is no debounce. ",["$","strong",null,{"children":"Usefull to fine-tune performance."}]]}],["$","h3",null,{"children":["$","code",null,{"children":"update.attributes"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string[] | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"null"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": There is a base array of attributes that the ",["$","code",null,{"children":"MutationObserver"}]," always observes, even if this option is ",["$","code",null,{"children":"null"}],"."]}],"\n"]}],["$","p",null,{"children":["An array of additional attributes that the ",["$","code",null,{"children":"MutationObserver"}]," should observe for the content."]}],["$","h3",null,{"children":["$","code",null,{"children":"update.ignoreMutation"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"((mutation) => any) | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"null"}]}]]}]}]]}],["$","p",null,{"children":["A function which receives a ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord","children":["$","code",null,{"children":"MutationRecord"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," as an argument. If the function returns a truthy value the mutation will be ignored and the plugin won't update. ",["$","strong",null,{"children":"Usefull to fine-tune performance."}]]}],["$","h3",null,{"children":["$","code",null,{"children":"overflow.x"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'scroll'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'hidden'"}],", ",["$","code",null,{"children":"'scroll'"}],", ",["$","code",null,{"children":"'visible'"}],", ",["$","code",null,{"children":"'visible-hidden'"}]," and ",["$","code",null,{"children":"'visible-scroll'"}],"."]}],"\n"]}],["$","p",null,{"children":"The overflow behavior for the horizontal (x) axis."}],["$","h3",null,{"children":["$","code",null,{"children":"overflow.y"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'scroll'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'hidden'"}],", ",["$","code",null,{"children":"'scroll'"}],", ",["$","code",null,{"children":"'visible'"}],", ",["$","code",null,{"children":"'visible-hidden'"}]," and ",["$","code",null,{"children":"'visible-scroll'"}],"."]}],"\n"]}],["$","p",null,{"children":"The overflow behavior for the vertical (y) axis."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.theme"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'os-theme-dark'"}]}]]}]}]]}],["$","p",null,{"children":"Applies the specified theme (classname) to the scrollbars."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.visibility"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'auto'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'visible'"}],", ",["$","code",null,{"children":"'hidden'"}],", and ",["$","code",null,{"children":"'auto'"}],"."]}],"\n"]}],["$","p",null,{"children":["The visibility of a scrollbar if its scroll axis is able to have a scrollable overflow. (Scrollable overflow for an axis is only possible with the overflow behavior ",["$","code",null,{"children":"'scroll'"}]," or ",["$","code",null,{"children":"'visible-scroll'"}],")."]}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.autoHide"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'never'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'never'"}],", ",["$","code",null,{"children":"'scroll'"}],", ",["$","code",null,{"children":"'leave'"}]," and ",["$","code",null,{"children":"'move'"}],"."]}],"\n"]}],["$","p",null,{"children":"The possibility to hide visible scrollbars automatically after a certain user action."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.autoHideDelay"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"number"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"1300"}]}]]}]}]]}],["$","p",null,{"children":"The delay in milliseconds before the scrollbars are hidden automatically."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.autoHideSuspend"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","p",null,{"children":["Suspend the autoHide functionality until the first scroll interaction was performed.",["$","br",null,{}],"\n","The default value for this option is ",["$","code",null,{"children":"false"}]," for backwards compatibility reasons but is recommended to be ",["$","code",null,{"children":"true"}]," for better accessibility."]}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.dragScroll"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"true"}]}]]}]}]]}],["$","p",null,{"children":"Indicates whether you can drag the scrollbar handles for scrolling."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.clickScroll"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": This options requires the ",["$","strong",null,{"children":"ClickScrollPlugin"}]," to work."]}],"\n"]}],["$","p",null,{"children":"Indicates whether you can click on the scrollbar track for scrolling."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.pointers"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string[] | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"['mouse', 'touch', 'pen']"}]}]]}]}]]}],["$","p",null,{"children":["The ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType","children":["$","code",null,{"children":"PointerTypes"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," the plugin should react to."]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// The options of a OverlayScrollbars instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the padding shall be absolute."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" paddingAbsolute"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether to show the native scrollbars. Has only an effect it the native scrollbars are overlaid."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" showNativeOverlaidScrollbars"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Customizes the automatic update behavior."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" update"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The given Event(s) from the elements with the given selector(s) will trigger an update."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Useful for everything the MutationObserver and ResizeObserver can't detect"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * e.g.: and Images `load` event or the `transitionend` / `animationend` events."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" elementEvents"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Array"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<[elementSelector: "}],["$","span",null,{"style":{"color":"#859900"},"children":"string"}],["$","span",null,{"style":{"color":"#657B83"},"children":", eventNames: "}],["$","span",null,{"style":{"color":"#859900"},"children":"string"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]> "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The debounce which is used to detect content changes."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If a tuple is provided you can customize the `timeout` and the `maxWait` in milliseconds."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If a single number customizes only the `timeout`."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" *"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If the `timeout` is `0`, a debounce still exists. (its executed via `requestAnimationFrame`)."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" debounce"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [timeout: "}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":", maxWait: "}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":"] "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" number"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * HTML attributes which will trigger an update if they're changed."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Basic attributes like `id`, `class`, `style` etc. are always observed and doesn't have to be added explicitly."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" attributes"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":"[] "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // A function which makes it possible to ignore a content mutation or null if nothing shall be ignored."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" ignoreMutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" ((mutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" MutationRecord"}],["$","span",null,{"style":{"color":"#657B83"},"children":") "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" any"}],["$","span",null,{"style":{"color":"#657B83"},"children":") "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Customizes the overflow behavior per axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflow"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The overflow behavior of the horizontal (x) axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" x"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverflowBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The overflow behavior of the vertical (y) axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" y"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverflowBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Customizes appearance of the scrollbars."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars theme. The theme value will be added as `class` to all `scrollbar` elements of the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" theme"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars visibility behavior."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" visibility"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" ScrollbarsVisibilityBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars auto hide behavior."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHide"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" ScrollbarsAutoHideBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars auto hide delay in milliseconds."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideDelay"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" number"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the scrollbars auto hide behavior is suspended until a scroll happened."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideSuspend"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether its possible to drag the handle of a scrollbar to scroll the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" dragScroll"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether its possible to click the track of a scrollbar to scroll the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" clickScroll"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // An array of pointer types which shall be supported."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" pointers"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":"[] "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Events"}],"\n",["$","p",null,{"children":["You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the ",["$","code",null,{"children":"on"}]," and ",["$","code",null,{"children":"off"}]," methods:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {}, {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" updated"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(osInstance, onUpdatedArgs) {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // ..."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"});"}]}]]}]}]}],"\n",["$","h3",null,{"children":"Events in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Every event receives the ",["$","code",null,{"children":"instance"}]," from which it was dispatched as the first argument. Always."]}],"\n"]}],["$","h3",null,{"children":["$","code",null,{"children":"initialized"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}]}]]}],["$","p",null,{"children":"Is dispatched after all generated elements, observers and events were appended to the DOM."}],["$","h3",null,{"children":["$","code",null,{"children":"updated"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"onUpdatedArgs"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An ",["$","code",null,{"children":"object"}]," which describes the update in detail."]}]]}]]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": If an update was triggered but nothing changed, the event won't be dispatched."]}],"\n"]}],["$","p",null,{"children":"Is dispatched after the instace was updated."}],["$","h3",null,{"children":["$","code",null,{"children":"destroyed"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"canceled"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An ",["$","code",null,{"children":"boolean"}]," which indicates whether the initialization was canceled and thus destroyed."]}]]}]]}]]}],["$","p",null,{"children":"Is dispatched after all generated elements, observers and events were removed from the DOM."}],["$","h3",null,{"children":["$","code",null,{"children":"scroll"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"event"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["The original ",["$","code",null,{"children":"event"}]," argument of the DOM event."]}]]}]]}]]}],["$","p",null,{"children":"Is dispatched by scrolling the viewport."}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// A mapping between event names and their listener arguments."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched after all elements are initialized and appended."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" initialized"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched after an update."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" updated"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", onUpdatedArgs: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OnUpdatedEventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched after all elements, observers and events are destroyed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" destroyed"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", canceled: "}],["$","span",null,{"style":{"color":"#859900"},"children":"boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched on scroll."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scroll"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", event: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Event"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OnUpdatedEventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Hints which describe what changed in the DOM."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" updateHints"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the size of the host element changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" sizeChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the direction of the host element changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" directionChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the intrinsic height behavior changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" heightIntrinsicChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the overflow edge (clientWidth / clientHeight) of the viewport element changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowEdgeChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the overflow amount changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowAmountChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the overflow style changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowStyleChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether an host mutation took place."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" hostMutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether an content mutation took place."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" contentMutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The changed options."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" changedOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the update happened with an force invalidated cache."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" force"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Instance"}],"\n",["$","p",null,{"children":["The OverlayScrollbars instance is created by calling the ",["$","code",null,{"children":"OverlayScrollbars"}]," function with an element and options object."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#657B83"},"children":", {});"}]]}]}]}]}],"\n",["$","h3",null,{"children":"Instance Methods"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","h3",null,{"children":["$","code",null,{"children":"options(): Options"}]}],["$","p",null,{"children":"Get the current options of the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Options"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The current options."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"options(newOptions, pure?): Options"}]}],["$","p",null,{"children":"Sets the current options of the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"newOptions"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"PartialOptions"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The new (partial) options which should be applied."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"pure"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether the options should be reset before the new options are added."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Options"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The complete new options."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"on(eventListeners, pure?): Function"}]}],["$","p",null,{"children":"Adds event listeners to the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"eventListeners"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"EventListeners"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which contains the added listeners. The fields are the event names and the values the listeners."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"pure"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether all already added event listeners should be removed before the new listeners are added."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"A function which removes all added event listeners."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"on(name, listener): Function"}]}],["$","p",null,{"children":"Adds a single event listener to the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listener"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The function which is invoked when the event is dispatched."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"A function which removes the added event listener."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"on(name, listeners): Function"}]}],["$","p",null,{"children":"Adds multiple event listeners to the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listeners"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The functions which are invoked when the event is dispatched."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"A function which removes the added event listeners."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"off(name, listener): void"}]}],["$","p",null,{"children":"Removes a single event listener from the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listener"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The function to be removed."}]]}]]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"off(name, listeners): void"}]}],["$","p",null,{"children":"Removes multiple event listeners from the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listeners"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The functions to be removed."}]]}]]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"update(force?): boolean"}]}],["$","p",null,{"children":"Updates the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"force"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether the update should force the cache to be invalidated."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["A boolean which indicates whether the ",["$","code",null,{"children":"update"}]," event was triggered through this update."]}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"state(): State"}]}],["$","p",null,{"children":"Gets the instances state."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"State"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which describes the state of the instance."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"elements(): Elements"}]}],["$","p",null,{"children":"Gets the instances elments."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Elements"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which describes the elements of the instance."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"destroy(): void"}]}],["$","p",null,{"children":"Destroys the instance and removes all added elements."}],["$","h3",null,{"children":["$","code",null,{"children":"plugin(plugin: object): object | undefined"}]}],["$","p",null,{"children":"Gets the instance modules instance of the passed plugin."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An object which describes the plugins instance modules instance or ",["$","code",null,{"children":"undefined"}]," if no instance was found."]}]]}]}]]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// A simplified version of the OverlayScrollbars TypeScript interface."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Get the current options of the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" options"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Sets the current options of the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" options"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":", pure"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds event listeners to the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" on"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(eventListeners"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListeners"}],["$","span",null,{"style":{"color":"#657B83"},"children":", pure"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds a single event listener to the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" on"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">)"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds multiple event listeners to the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" on"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">[])"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Removes a single event listener from the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" off"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">)"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Removes multiple event listeners from the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" off"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">[])"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Updates the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" update"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(force"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instances state."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" state"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" State"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instances elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Destroys the instance and removes all added elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" destroy"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instance modules instance of the passed plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"P"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InstancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(osPlugin"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" P"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferInstancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"P"}],["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" undefined"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbars instances state."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" State"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Describes the current padding in pixel."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" padding"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" TRBL"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the current padding is absolute."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" paddingAbsolute"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The client width (x) & height (y) of the viewport in pixel."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowEdge"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The overflow amount in pixel."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowAmount"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The css overflow style of the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowStyle"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverflowStyle"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the viewport has an overflow."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" hasOverflow"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the direction is considered rtl."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" directionRTL"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the instance is considered destroyed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" destroyed"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes the elements of a OverlayScrollbars instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The element the instance was applied to."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The host element. Its the root of all other elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" host"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element which is responsible to apply correct paddings."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the Initialization it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" padding"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The element which is responsible to do any scrolling."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" viewport"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element which is responsible to hold the content."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the Initialization it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" content"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element through which you can get the current `scrollLeft` or `scrollTop` offset."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the target element it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollOffsetElement"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element through which you can add `scroll` events."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the target element it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollEventElement"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Document"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The horizontal scrollbar elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarHorizontal"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" CloneableScrollbarElements"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The vertical scrollbar elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarVertical"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" CloneableScrollbarElements"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Static Object"}],"\n",["$","p",null,{"children":["The static ",["$","code",null,{"children":"OverlayScrollbars"}]," object."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"SomePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}]}]}]}],"\n",["$","h3",null,{"children":"Static Object Methods"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","h3",null,{"children":["$","code",null,{"children":"plugin(plugin): object | undefined"}]}],["$","p",null,{"children":"Adds a single plugin."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"plugin"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The plugin to be added."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object / void"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An object which describes the plugins static modules instance or ",["$","code",null,{"children":"void"}]," if no instance was found."]}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"plugin(plugins): (object | void)[]"}]}],["$","p",null,{"children":"Adds multiple plugins."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"plugins"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The plugins to be added."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"(object / void)[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An array which describes the plugins static modules instances or ",["$","code",null,{"children":"undefined"}]," if no instance was found."]}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"valid(osInstance): boolean"}]}],["$","p",null,{"children":"Checks whether the passed value is a valid and not destroyed overlayscrollbars instance"}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"osInstance"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"any"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The value to be checked."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether the passed value is a valid and not destroyed overlayscrollbars instance."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"env(): Environment"}]}],["$","p",null,{"children":"Gets the environment."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Environment"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which described the environment."}]]}]}]]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// The OverlayScrollbars static object."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbarsStatic"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instance of the passed target or `undefined` the target has no instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" (target"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InitializationTarget"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" undefined"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Initializes OverlayScrollbars to the passed target with passed options and event listeners."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" (target"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InitializationTarget"}],["$","span",null,{"style":{"color":"#657B83"},"children":", options"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":", eventListeners"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListeners"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds a single plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(plugin"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferStaticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds multiple plugins."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(plugins"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"[])"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferStaticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">[];"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Checks whether the passed value is a valid and not destroyed overlayscrollbars instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" valid"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" any"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" osInstance "}],["$","span",null,{"style":{"color":"#859900"},"children":"is"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the environment."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" env"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Environment"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes the OverlayScrollbars environment."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Environment"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The native scrollbars size of the browser / system."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarsSize"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the native scrollbars are overlaid."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarsOverlaid"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the browser supports native scrollbars hiding."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarsHiding"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The rtl scroll behavior of the browser."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" rtlScrollBehavior"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { n"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; i"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the browser supports the ScrollTimeline API."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollTimeline"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The default Initialization to use if nothing else is specified."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" staticDefaultInitialization"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Initialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The default Options to use if nothing else is specified."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" staticDefaultOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Returns the current default Initialization."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getDefaultInitialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Initialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Returns the current default Options."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getDefaultOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Sets a new default Initialization."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If the new default Initialization is partially filled, its deeply merged with the current default Initialization."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@param"}],["$","span",null,{"style":{"color":"#268BD2","fontStyle":"italic"},"children":" newDefaultInitialization"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The new default Initialization."}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@returns"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The current default Initialization."}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" setDefaultInitialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newDefaultInitialization"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialInitialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Initialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Sets new default Options."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If the new default Options are partially filled, they're deeply merged with the current default Options."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@param"}],["$","span",null,{"style":{"color":"#268BD2","fontStyle":"italic"},"children":" newDefaultOptions"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The new default Options."}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@returns"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The current default options."}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" setDefaultOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newDefaultOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Styling"}],"\n",["$","p",null,{"children":["OverlayScrollbars comes with two themes called ",["$","code",null,{"children":"os-theme-dark"}]," and ",["$","code",null,{"children":"os-theme-light"}],". You can use the ",["$","code",null,{"children":"scrollbars.theme"}]," option to change the theme."]}],"\n",["$","p",null,{"children":["Custom themes can be done in multiple ways. The easiest and fastest is to use the predefined set of ",["$","code",null,{"children":"CSS Custom Properties"}]," aka. CSS variables. In case those aren't enought you can add custom class names or add custom styling to the existing class names."]}],"\n",["$","h3",null,{"children":"Styling in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","h3",null,{"children":"CSS Custom properties"}],["$","p",null,{"children":["OverlayScrollbars provides a set of ",["$","code",null,{"children":"CSS Custom Properties"}]," which makes scrollbar styling easy and fast:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"scss","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-scrollbar"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The size of the scrollbar"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The axis-perpedicular padding of the scrollbar (horizontal: padding-y, vertical: padding-x)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-padding-perpendicular: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The axis padding of the scrollbar (horizontal: padding-x, vertical: padding-y)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-padding-axis: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border radius of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border-radius: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-bg: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-bg-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-bg-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border radius of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border-radius: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The background of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-bg: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover background of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-bg-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active background of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-bg-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover border of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active border of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The min size of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-min-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"33"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The max size of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-max-size: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-perpendicular-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"100"}],["$","span",null,{"style":{"color":"#859900"},"children":"%"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-perpendicular-size-hover: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"100"}],["$","span",null,{"style":{"color":"#859900"},"children":"%"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-perpendicular-size-active: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"100"}],["$","span",null,{"style":{"color":"#859900"},"children":"%"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Increases the interactive area of the scrollbar handle."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-interactive-area-offset: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["You can alter the properties either for both scrollbars at once or per scrollbar axis. In the example below I've chosen ",["$","code",null,{"children":"os-theme-custom"}]," as the theme name:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"scss","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// horizontal and vertical scrollbar are 10px "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-theme-custom"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"10"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// horizontal scrollbar is 10px"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-theme-custom.os-scrollbar-horizontal"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"10"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// vertical scrollbar is 20px"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-theme-custom.os-scrollbar-vertical"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"20"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["You can then use your theme by assigning it via the ",["$","code",null,{"children":"scrollbars.theme"}]," option:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#657B83"},"children":", {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" theme: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'os-theme-custom'"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"});"}]}]]}]}]}],["$","p",null,{"children":"Since scrollbar styles are usually simple, this set of options should be enough to get your desired styling.\r\nIn case you need more freedom you can create your own styles by adding styling to the base class names described in the next section."}],["$","h3",null,{"children":"Scrollbars structure and CSS class names"}],["$","p",null,{"children":"The scrollbars HTML markup looks like:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"html","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar os-scrollbar-horizontal\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-track\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-handle\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar os-scrollbar-vertical\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-track\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-handle\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}]]}]}]}],["$","p",null,{"children":["The class names are simplified, in a real application the ",["$","code",null,{"children":".os-scrollbar"}]," element can have additional class names which modify the appearance (mostly visibility and alignment)."]}],["$","p",null,{"children":"Below is a list of the most important class names you will encounter:"}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"CSS class name"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The root element of a scrollbar."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-rtl"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["Indicates a ",["$","code",null,{"children":"RTL"}]," direction of the host element the scrollbar belongs to."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-horizontal"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The root element of a horizontal scrollbar."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-vertical"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The root element of a vertical scrollbar."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-handle-interactive"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["Indicates that the handle inside the scrollbar is interactive (",["$","code",null,{"children":"scrollbars.dragScroll"}]," is ",["$","code",null,{"children":"true"}],")."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-track-interactive"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["Indicates that the track inside the scrollbar is interactive (",["$","code",null,{"children":"scrollbars.clickScroll"}]," is ",["$","code",null,{"children":"true"}],")."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-track"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["The track element. This is the track of the nested handle element. If ",["$","code",null,{"children":"scrollbars.clickScroll"}]," is ",["$","code",null,{"children":"true"}]," this is the element users can click to change the scroll offset."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-handle"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["The handle element. If ",["$","code",null,{"children":"scrollbars.dragScroll"}]," is ",["$","code",null,{"children":"true"}]," this is the handle users can drag to change the scroll offset."]}]]}]]}]]}],["$","p",null,{"children":"If you create your own theme, please only use the classes listed above. All other classes are modifier classes used to change visibility, alignment and pointer-events of the scrollbars."}],["$","h3",null,{"children":"Gotchas"}],["$","p",null,{"children":["Its important that the chosen theme class name in your CSS file matches the assigned theme name in the options. If the CSS class name is ",["$","code",null,{"children":".my-theme"}]," the ",["$","code",null,{"children":"scrollbars.theme"}]," has to be ",["$","code",null,{"children":"'my-theme'"}],"."]}],["$","p",null,{"children":["Please be aware of your stack. ",["$","code",null,{"children":"css-modules"}]," for example will alter your class names to prevent naming collisions. Always double check if your CSS is really what you expect it to be."]}]]}],"\n",["$","h2",null,{"children":"Plugins"}],"\n",["$","p",null,{"children":"Everything thats considered not core functionality or old browser compatibility is exposed via a plugin. This is done because all unused plugins are treeshaken and thus won't end up in your final bundle. OverlayScrollbars comes with the following plugins:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":[["$","strong",null,{"children":"ScrollbarsHidingPlugin"}],": Is needed for old browsers which aren't supporting native scrollbar styling features. ",["$","a",null,{"href":"https://caniuse.com/?search=scrollbar%20styling","children":"You can find the list of browsers where you need this plugin here","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," (note that even though ",["$","code",null,{"children":"iOS Safari >= 14"}]," is marked as unsupported you only need this plugin for ",["$","code",null,{"children":"iOS < 7.1"}],")."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"SizeObserverPlugin"}],": Is needed for old browsers which aren't supporting the ",["$","code",null,{"children":"ResizeObserver"}]," api. ",["$","a",null,{"href":"https://caniuse.com/?search=ResizeObserver","children":"You can find the list of browsers where you need this plugin here","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"ClickScrollPlugin"}],": If you want to use the option ",["$","code",null,{"children":"scrollbars: { clickScroll: true }"}],"."]}],"\n"]}],"\n",["$","h3",null,{"children":"Consuming Plugins"}],"\n",["$","p",null,{"children":"Plugins are consumed like:"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"import"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"} "}],["$","span",null,{"style":{"color":"#859900"},"children":"from"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" 'overlayscrollbars'"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// single plugin"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// multiple plugins"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(["}],["$","span",null,{"style":{"color":"#268BD2"},"children":"SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]);"}]]}]]}]}]}],"\n",["$","h3",null,{"children":"Plugins in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","p",null,{"children":["Plugins are plain objects with a ",["$","strong",null,{"children":"single field"}],", the name of the field is the name of the plugin. This name is the plugins identifier and ",["$","em",null,{"children":"must"}]," be unique across all plugin. In case multiple plugins have the same name, the last added plugin overwrites previously added plugins."]}],["$","h3",null,{"children":"Plugin Modules"}],["$","p",null,{"children":["A Plugin module is the constructor of a plugin modules instance. There are two kinds of plugin modules: ",["$","code",null,{"children":"static"}]," and ",["$","code",null,{"children":"instance"}],". A single plugin must have one or more modules. Plugin modules can return an instance, but doesnt have to."]}],["$","h4",null,{"children":"Static Plugin Module"}],["$","p",null,{"children":["The ",["$","code",null,{"children":"static"}]," plugin module is invoked when the plugin is added with the ",["$","code",null,{"children":"OverlayScrollbars.plugin"}]," function."]}],["$","p",null,{"children":["Example plugin with a ",["$","code",null,{"children":"static"}]," module:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticPlugin"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // plugin has the name `examplePlugin`"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" examplePlugin: {"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // static function describes a static module and returns the module instance or void / undefined if no instance is needed"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `osStatic` parameter is the global `OverlayScrollbars` object"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" static"}],["$","span",null,{"style":{"color":"#657B83"},"children":": (osStatic) "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" let"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#D33682"},"children":" 0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getCount"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#859900"},"children":"++"}],["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" return"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["When the plugin is added with the ",["$","code",null,{"children":"OverlayScrollbars.plugin"}]," function, the static module instance is returned:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"staticPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// plugins static module is invoked"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"staticModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 0"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"staticModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"staticModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 1"}]]}]]}]}]}],["$","h4",null,{"children":"Instance Plugin Module"}],["$","p",null,{"children":["The ",["$","code",null,{"children":"instance"}]," plugin module is invoked when a new ",["$","code",null,{"children":"OverlayScrollbars"}]," instance is created but before the ",["$","code",null,{"children":"initialized"}]," event is dispatched."]}],["$","p",null,{"children":["Example plugin with a ",["$","code",null,{"children":"instance"}]," module:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePlugin"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // plugin has the name `examplePlugin`"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" examplePlugin: {"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // instance function describes a instance module and returns the module instance or void / undefined if no instance is needed"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `osInstance` parameter is the OverlayScrollbar instance the plugin is bound to"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `event` parameter is a function which adds events to the instance which can't be removed from outside the plugin"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `osStatic` parameter is the gobal OverlayScrollbar object"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" instance"}],["$","span",null,{"style":{"color":"#657B83"},"children":": (osInstance, event, osStatic) "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" let"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#D33682"},"children":" 0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getCount"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#859900"},"children":"++"}],["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // event which fires when the instance was initialized"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" event"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'initialized'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" console"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"log"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"instance initialized\""}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // event which fires when the viewport was scrolled"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" removeScrollEvent"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" event"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'scroll'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" console"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"log"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"viewport scrolled\""}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" removeScrollEvent"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// removes the event after the first scroll"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" return"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["When the plugin is added with the ",["$","code",null,{"children":"OverlayScrollbars.plugin"}]," function all OverlayScrollbar instances will add the plugin automatically from that point on. Already created instances will not have the plugin. The instance modules instance is returned with the ",["$","code",null,{"children":"osInstance.plugin"}]," function:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// plugin is added"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#657B83"},"children":", {}); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// plugins instance module is invoked"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePluginInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePluginInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 0"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePluginInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePluginInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 1"}]]}]]}]}]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbar plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the name of the plugin"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the module instance type of the static module"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" S"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the module instance type of the instance module"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" I"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" ["}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"pluginName"}],["$","span",null,{"style":{"color":"#859900"},"children":" in"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModule"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"S"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"I"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbar plugin which has only a static module."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" StaticPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Name"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#859900"},"children":"void"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbar plugin which has only a instance module."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InstancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Name"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#859900"},"children":"void"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Infers the type of the static modules instance of the passed plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferStaticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" StaticPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Infers the type of the instance modules instance of the passed plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferInstancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InstancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"FAQ"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":["How do I ",["$","code",null,{"children":"get / set"}]," the ",["$","code",null,{"children":"scroll position"}]," of an element I applied OverlayScrollbars to?"]}]}],["$","br",null,{}],["$","p",null,{"children":["If you applied ",["$","code",null,{"children":"OverlayScrollbars"}]," to the ",["$","code",null,{"children":"body"}]," element you can use ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX","children":["$","code",null,{"children":"window.scrollX"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY","children":["$","code",null,{"children":"window.scrollY"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll","children":["$","code",null,{"children":"window.scroll"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo","children":["$","code",null,{"children":"window.scrollTo"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy","children":["$","code",null,{"children":"window.scrollBy"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or any other native api."]}],["$","p",null,{"children":["If the plugin was applied to any other element you have to get the ",["$","code",null,{"children":"viewport"}]," element with the ",["$","code",null,{"children":"instance.elements()"}]," function first. With this element you can use ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop","children":["$","code",null,{"children":"element.scrollTop"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft","children":["$","code",null,{"children":"element.scrollLeft"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll","children":["$","code",null,{"children":"element.scroll"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo","children":["$","code",null,{"children":"element.scrollTo"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy","children":["$","code",null,{"children":"element.scrollBy"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or any other native api."]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"viewport"}],["$","span",null,{"style":{"color":"#657B83"},"children":" } "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"scrollLeft"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"scrollTop"}],["$","span",null,{"style":{"color":"#657B83"},"children":" } "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" viewport"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// get scroll offset"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"viewport"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"scrollTo"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ top: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":" }); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// set scroll offset"}]]}]]}]}]}]]}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":["Is it possible to ",["$","code",null,{"children":"limit / adjust the scrollbar handle length"}],"?"]}]}],["$","br",null,{}],["$","p",null,{"children":["You can adjust a scrollbars handle length by setting a ",["$","code",null,{"children":"min-width / min-height"}]," and ",["$","code",null,{"children":"max-width / max-height"}]," style:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"css","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"/* horizontal boundaries */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-scrollbar-horizontal"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" .os-scrollbar-handle"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" min-width"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"50"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" max-width"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"200"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"/* vertical boundaries */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-scrollbar-vertical"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" .os-scrollbar-handle"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" min-height"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"40"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" max-height"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"40"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["You can assign the same value to both properties to force the scrollbar to be always the same size.",["$","br",null,{}],"\n","Setting the ",["$","code",null,{"children":"width"}]," and ",["$","code",null,{"children":"height"}]," properties won't work since those are set by the plugin automatically."]}]]}],"\n",["$","h2",null,{"children":["Feature comparison to ",["$","code",null,{"children":"v1"}]]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["The ",["$","code",null,{"children":"scroll"}]," function is missing. Planned as a ",["$","code",null,{"children":"plugin"}],". (WIP)"]}],"\n",["$","li",null,{"children":["Initialization to the ",["$","code",null,{"children":"textarea"}]," element isn't supported yet. Planned as a ",["$","code",null,{"children":"plugin"}],". (WIP)"]}],"\n"]}],"\n",["$","h2",null,{"children":"Future Plans"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Provide plugin based support for missing features. (treeshakeable)"}],"\n",["$","li",null,{"children":"Frequent updates in terms of bug-fixes and enhancements. (always use latest browser features)"}],"\n",["$","li",null,{"children":"Improve tests. (unit & browser tests)"}],"\n"]}],"\n",["$","h2",null,{"children":"License"}],"\n",["$","p",null,{"children":"MIT"}]]}]]}],null]]},[null,["$","$L4",null,{"children":["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/OverlayScrollbars/_next/static/css/403ab94758bf94f7.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
+0:["IbnVYJPYee4sjOzc9Cwqx",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},["$L1",["$","div",null,{"className":"sm:container default:px-6","children":[["$","div",null,{"className":"mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44","children":["$","div",null,{"className":"h-full relative before:content-[\"\"] before:bg-[url(/OverlayScrollbars/img/logo.svg)] before:absolute before:left-0 before:w-full before:h-full before:bg-contain before:bg-center before:bg-no-repeat before:-z-10 before:[transform:translateZ(0)] before:[filter:blur(33px)_saturate(1.22)] before:opacity-50 before:top-2.5 after:content-[\"\"] after:bg-[url(/OverlayScrollbars/img/logo.svg)] after:absolute after:left-0 after:w-full after:h-full after:bg-contain after:bg-center after:bg-no-repeat after:-z-10 after:[transform:translateZ(0)] after:[filter:drop-shadow(0_6px_22px_#5242e3)_saturate(1.5)] after:opacity-10 after:top-0","children":["$","img",null,{"src":"/OverlayScrollbars/img/logo.svg","className":"h-full","alt":"OverlayScrollbars Logo","width":"200","height":"200"}]}]}],["$","h1",null,{"className":"text-center xxs:text-4xl text-2xl font-bold my-11","children":["Overlay",["$","wbr",null,{}],"Scrollbars"]}],["$","p",null,{"className":"text-center mx-auto max-w-screen-sm my-11 font-medium","children":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."}],["$","div",null,{"className":"my-6 text-center font-semiBold text-sm uppercase relative","children":["$","span",null,{"className":"p-3 bg-slate-50","children":[["$","span",null,{"children":"used by"}],["$","span",null,{"className":"absolute block top-1/2 left-1/2 w-full xs:w-[80%] border-t-[1px] border-slate-300 -translate-x-1/2 -translate-y-1/2 -z-10"}]]}]}],["$","$L2",null,{"defer":true,"children":["$","div",null,{"className":"flex justify-center","children":["$","div",null,{"className":"inline-flex items-center gap-6 px-1 py-6 opacity-60 [filter:brightness(0.8)_sepia(1)_saturate(1.44)_hue-rotate(175deg)]","children":[["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group py-1","target":"_blank","href":"https://github.com/KingSora/OverlayScrollbars/issues/150#issuecomment-658658186","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/spotify-logo.svg","alt":"Spotify","style":{"filter":"brightness(0.35)"}}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group","target":"_blank","href":"https://github.com/JetBrains/intellij-community/blob/ee35416f381ed33f976d7b9322a5ee6156e7fa2f/platform/platform-api/src/com/intellij/ui/jcef/JBCefScrollbarsHelper.java#L41-L50","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/intellij-idea-logo.svg","alt":"IntelliJ IDEA"}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group py-1.5","target":"_blank","href":"https://github.com/storybookjs/storybook/blob/32d2fafa8d1d2e197e885349f2c01f5422bde5b4/code/ui/components/package.json#L66-L67","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/storybook-logo.svg","alt":"Storybook"}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group py-3","target":"_blank","href":"https://github.com/ColorlibHQ/AdminLTE/blob/3113ac5efed25971ccd0972f5eeff3c364f218dc/src/html/components/_scripts.astro#L6-L7","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/adminlte-logo.png","alt":"Admin LTE"}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group","target":"_blank","href":"https://scramble.cloud/#credits","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/scramble-logo.svg","alt":"Scramble.cloud"}]}]]}]}]}],["$","div",null,{"className":"my-6 text-center font-semiBold text-sm uppercase relative","children":["$","span",null,{"className":"p-3 bg-slate-50","children":[["$","span",null,{"children":["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars","target":"_blank","className":"inline-block leading-[0] rounded-full","children":[["$","span",null,{"style":{"maskImage":"url(/OverlayScrollbars/icon/github.svg)","WebkitMaskImage":"url(/OverlayScrollbars/icon/github.svg)"},"className":"default:block default:flex-none default:bg-current mask-center mask-contain mask-no-repeat inline-block w-11 h-11 hover:scale-110 text-primary-dark hover:text-primary-blue1 active:text-primary-blue2 transition-transformColor ease-in-out duration-300"}],["$","span",null,{"className":"sr-only","children":"OverlayScrollbars on Github"}]]}]}],["$","span",null,{"className":"absolute block top-1/2 left-1/2 w-full xs:w-[80%] border-t-[1px] border-slate-300 -translate-x-1/2 -translate-y-1/2 -z-10"}]]}]}],["$","p",null,{"className":"text-center text-sm text-primary-gray2 mx-auto max-w-screen-sm my-11 font-medium","children":["Looking for the v1 docs? ",["$","$L3",null,{"href":"/v1","children":"Follow this link","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],"."]}],["$","div",null,{"className":"mx-auto flex sm:flex-row justify-center gap-2 items-center flex-wrap","children":[["$","a",null,{"href":"https://www.npmjs.com/package/overlayscrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square","alt":"Downloads"}]}],["$","a",null,{"href":"https://www.npmjs.com/package/overlayscrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square","alt":"Version"}]}],["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square","alt":"License"}]}],["$","a",null,{"href":"https://app.codecov.io/gh/KingSora/OverlayScrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square","alt":"Code Coverage"}]}],["$","a",null,{"href":"https://bundlephobia.com/package/overlayscrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/bundlephobia/minzip/overlayscrollbars?label=max.%20bundle%20size&style=flat-square","alt":"Max. Bundle Size"}]}]]}],["$","nav",null,{"className":"mx-auto my-6 text-lg flex sm:flex-row justify-center gap-2 items-center flex-wrap","children":[["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars","target":"_blank","children":"GitHub","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],["$","span",null,{"children":"  •  "}],["$","$L3",null,{"href":"/examples","target":"_blank","children":"Examples","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]]}],["$","main",null,{"className":"prose prose-primary mx-auto pb-12","children":[["$","h2",null,{"children":"Why"}],"\n",["$","p",null,{"children":"I created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support."}],"\n",["$","h2",null,{"children":"Goals & Features"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Simple, powerful and well documented API"}],"\n",["$","li",null,{"children":["High browser compatibility - ",["$","strong",null,{"children":"Firefox 59+"}],", ",["$","strong",null,{"children":"Chrome 55+"}],", ",["$","strong",null,{"children":"Opera 42+"}],", ",["$","strong",null,{"children":"Edge 15+"}]," and ",["$","strong",null,{"children":"Safari 10+"}]]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Fully Accessible"}]," - Native scroll behavior is completely preserved"]}],"\n",["$","li",null,{"children":["Can be run on the server - ",["$","strong",null,{"children":"SSR"}],", ",["$","strong",null,{"children":"SSG"}]," and ",["$","strong",null,{"children":"ISR"}]," support"]}],"\n",["$","li",null,{"children":["Tested on various devices - ",["$","strong",null,{"children":"Mobile"}],", ",["$","strong",null,{"children":"Desktop"}]," and ",["$","strong",null,{"children":"Tablet"}]]}],"\n",["$","li",null,{"children":["Tested with various (and mixed) inputs - ",["$","strong",null,{"children":"Mouse"}],", ",["$","strong",null,{"children":"Touch"}]," and ",["$","strong",null,{"children":"Pen"}]]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Treeshaking"}]," - bundle only what you really need"]}],"\n",["$","li",null,{"children":["Automatic update detection - ",["$","strong",null,{"children":"no polling"}]]}],"\n",["$","li",null,{"children":["Usage of latest browser features - best ",["$","strong",null,{"children":"performance"}]," in new browsers"]}],"\n",["$","li",null,{"children":"Bidirectional - LTR or RTL direction support"}],"\n",["$","li",null,{"children":["Supports usage on the ",["$","code",null,{"children":"body"}]," element"]}],"\n",["$","li",null,{"children":["Supports all ",["$","strong",null,{"children":"virtual scrolling"}]," libraries"]}],"\n",["$","li",null,{"children":"Simple and effective scrollbar styling"}],"\n",["$","li",null,{"children":"Highly customizable"}],"\n",["$","li",null,{"children":"TypeScript support - fully written in TypeScript"}],"\n",["$","li",null,{"children":"Dependency free - 100% self written to ensure small size and best functionality"}],"\n",["$","li",null,{"children":["High quality and fully typed framework versions for ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react","children":["$","code",null,{"children":"react"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue","children":["$","code",null,{"children":"vue"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx","children":["$","code",null,{"children":"angular"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte","children":["$","code",null,{"children":"svelte"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," and ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid","children":["$","code",null,{"children":"solid"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],"."]}],"\n"]}],"\n",["$","h2",null,{"children":"Choose your framework"}],"\n",["$","p",null,{"children":"Additionally to the vanilla JavaScript version you can use the official framework components & utilities:"}],"\n",["$","div",null,{"className":"flex flex-wrap","children":[["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg","width":"80","height":"80","alt":"React"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg","width":"80","height":"80","alt":"Vue"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg","width":"80","height":"80","alt":"Angular"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg","width":"80","height":"80","alt":"Svelte"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg","width":"80","height":"80","alt":"Solid"}]}]]}],"\n",["$","h2",null,{"children":"Getting started"}],"\n",["$","h3",null,{"children":"npm & nodejs"}],"\n",["$","p",null,{"children":["OverlayScrollbars can be downloaded from ",["$","a",null,{"href":"https://www.npmjs.com/package/overlayscrollbars","children":"npm","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or the package manager of your choice:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"sh","data-theme":"solarized-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"npm"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" install"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" overlayscrollbars"}]]}]}]}]}],"\n",["$","p",null,{"children":"After installation it can be imported:"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"import"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" 'overlayscrollbars/overlayscrollbars.css'"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"import"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"} "}],["$","span",null,{"style":{"color":"#859900"},"children":"from"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" 'overlayscrollbars'"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}]]}]}]}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": If the path ",["$","code",null,{"children":"'overlayscrollbars/overlayscrollbars.css'"}]," is not working use ",["$","code",null,{"children":"'overlayscrollbars/styles/overlayscrollbars.css'"}]," as the import path for the CSS file."]}],"\n"]}],"\n",["$","h3",null,{"children":"Manual download & embedding"}],"\n",["$","p",null,{"children":["You can use OverlayScrollbars without any bundler or package manager.",["$","br",null,{}],"\n","Simply download it from the ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/releases","children":"Releases","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or use a ",["$","a",null,{"href":"https://cdnjs.com/libraries/overlayscrollbars","children":"CDN","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],"."]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["Use the javascript files with the ",["$","code",null,{"children":".browser"}]," extension."]}],"\n",["$","li",null,{"children":["Use the javascript files with the ",["$","code",null,{"children":".es5"}]," extension if you need to support older browsers, otherwise use the ",["$","code",null,{"children":".es6"}]," files."]}],"\n",["$","li",null,{"children":["For production use the javascript / stylesheet files with the ",["$","code",null,{"children":".min"}]," extension."]}],"\n"]}],"\n",["$","p",null,{"children":"Embedd OverlayScrollbars manually in your HTML:"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"html","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"link"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" type"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"text/css\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" href"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"path/to/overlayscrollbars.css\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" rel"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"stylesheet\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"script"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" type"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"text/javascript\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" src"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"path/to/overlayscrollbars.browser.es.js\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" defer>"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"script"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}]]}]}]}],"\n",["$","p",null,{"children":["You can then use the global variable ",["$","code",null,{"children":"OverlayScrollbarsGlobal"}]," to access the api similar to how you can do it in nodejs / modules:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"var"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"} "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbarsGlobal"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}]]}]}]}],"\n",["$","p",null,{"children":["The examples in this documentation will use the ",["$","code",null,{"children":"import"}]," syntax instead of the ",["$","code",null,{"children":"OverlayScrollbarsGlobal"}]," object. Both versions are equivalent though."]}],"\n",["$","h2",null,{"children":"Initialization"}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": During initialization its expected that the ",["$","b",null,{"children":"CSS file is loaded and parsed"}]," by the browser."]}],"\n"]}],"\n",["$","p",null,{"children":["You can initialize either directly with an ",["$","code",null,{"children":"Element"}]," or with an ",["$","code",null,{"children":"Object"}]," where you have more control over the initialization process."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// simple initialization with an element"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {});"}]]}]]}]}]}],"\n",["$","h3",null,{"children":"Bridging initialization flickering"}],"\n",["$","p",null,{"children":"If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.\r\nWhile this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering."}],"\n",["$","p",null,{"children":["To fix this behavior apply the ",["$","code",null,{"children":"data-overlayscrollbars-initialize"}]," attribute to the target element (and ",["$","code",null,{"children":"html"}]," element if the target element is ",["$","code",null,{"children":"body"}],")."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"html","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":""}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"html"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" data-overlayscrollbars-initialize>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"head"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"head"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" data-overlayscrollbars-initialize>"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}],["$","span",null,{"style":{"color":"#268BD2"},"children":"html"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":""}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" data-overlayscrollbars-initialize>"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" OverlayScrollbars is applied to this div"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}]]}]}]}],"\n",["$","h3",null,{"children":"Initialization with an Object"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","p",null,{"children":["The only required field is the ",["$","code",null,{"children":"target"}]," field. This is the field to which the plugin is applied to.",["$","br",null,{}],"\n","If you use the object initialization only with the ",["$","code",null,{"children":"target"}]," field, the outcome is equivalent to the element initialization:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Both initializations have the same outcome"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {});"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":") }, {});"}]]}]]}]}]}],["$","p",null,{"children":["In the initialization object you can specify how the library is handling generated elements.\r\nFor example you can appoint an existing element as the ",["$","code",null,{"children":"viewport"}]," element. Like this the library won't generate it but take the specified element instead:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" elements: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" viewport: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#viewport'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}, {});"}]}]]}]}]}],["$","p",null,{"children":"This is very useful if you have a fixed DOM structure and don't want OverlayScrollbars to generate its own elements. Those cases arise very often when you want an other library to work together with OverlayScrollbars."}],["$","hr",null,{}],["$","p",null,{"children":"You can also decide to which element the scrollbars should be applied to:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" slot: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":")."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"parentElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}, {});"}]}]]}]}]}],["$","hr",null,{}],["$","p",null,{"children":"And last but not least you can decide when the initialization should be canceled:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" cancel: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" nativeScrollbarsOverlaid: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"true"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" body: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"null"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}, {});"}]}]]}]}]}],["$","p",null,{"children":["In the above example the initialization is canceled when the native scrollbars are overlaid or when your target is a ",["$","code",null,{"children":"body"}]," element and the plugin determined that a initialization to the ",["$","code",null,{"children":"body"}]," element would affect native functionality like ",["$","code",null,{"children":"window.scrollTo"}],"."]}]]}],"\n",["$","h2",null,{"children":"Options"}],"\n",["$","p",null,{"children":["You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the ",["$","code",null,{"children":"options"}]," method:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" overflow: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" x: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'hidden'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"});"}]}]]}]}]}],"\n",["$","h3",null,{"children":"Options in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","p",null,{"children":"The default options are:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" defaultOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" paddingAbsolute: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" showNativeOverlaidScrollbars: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" update: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" elementEvents: [["}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'img'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'load'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]],"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" debounce: ["}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#D33682"},"children":"33"}],["$","span",null,{"style":{"color":"#657B83"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" attributes: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"null"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" ignoreMutation: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"null"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" overflow: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" x: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'scroll'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" y: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'scroll'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" theme: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'os-theme-dark'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" visibility: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'auto'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHide: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'never'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideDelay: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"1300"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideSuspend: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" dragScroll: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"true"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" clickScroll: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" pointers: ["}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'mouse'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'touch'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'pen'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}]]}]}]}],["$","h3",null,{"children":["$","code",null,{"children":"paddingAbsolute"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","p",null,{"children":"Indicates whether the padding for the content shall be absolute."}],["$","h3",null,{"children":["$","code",null,{"children":"showNativeOverlaidScrollbars"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","p",null,{"children":"Indicates whether the native overlaid scrollbars shall be visible."}],["$","h3",null,{"children":["$","code",null,{"children":"update.elementEvents"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Array<[string, string]> | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"[['img', 'load']]"}]}]]}]}]]}],["$","p",null,{"children":["An array of tuples. The first value in the tuple is an ",["$","code",null,{"children":"selector"}]," and the second value are ",["$","code",null,{"children":"event names"}],". The plugin will update itself if any of the elements with the specified selector will emit any specified event. The default value can be interpreted as \"The plugin will update itself if any ",["$","code",null,{"children":"img"}]," element emits an ",["$","code",null,{"children":"load"}]," event.\""]}],["$","h3",null,{"children":["$","code",null,{"children":"update.debounce"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"[number, number] | number | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"[0, 33]"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": If 0 is used for the timeout, ",["$","code",null,{"children":"requestAnimationFrame"}]," instead of ",["$","code",null,{"children":"setTimeout"}]," is used for the debounce."]}],"\n"]}],["$","p",null,{"children":["Debounces the ",["$","code",null,{"children":"MutationObserver"}]," which tracks changes to the content. If a ",["$","strong",null,{"children":"tuple"}]," is passed, the first value is the timeout and second is the max wait. If only a ",["$","strong",null,{"children":"number"}]," is passed you specify only the timeout and there is no max wait. With ",["$","strong",null,{"children":"null"}]," there is no debounce. ",["$","strong",null,{"children":"Usefull to fine-tune performance."}]]}],["$","h3",null,{"children":["$","code",null,{"children":"update.attributes"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string[] | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"null"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": There is a base array of attributes that the ",["$","code",null,{"children":"MutationObserver"}]," always observes, even if this option is ",["$","code",null,{"children":"null"}],"."]}],"\n"]}],["$","p",null,{"children":["An array of additional attributes that the ",["$","code",null,{"children":"MutationObserver"}]," should observe for the content."]}],["$","h3",null,{"children":["$","code",null,{"children":"update.ignoreMutation"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"((mutation) => any) | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"null"}]}]]}]}]]}],["$","p",null,{"children":["A function which receives a ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord","children":["$","code",null,{"children":"MutationRecord"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," as an argument. If the function returns a truthy value the mutation will be ignored and the plugin won't update. ",["$","strong",null,{"children":"Usefull to fine-tune performance."}]]}],["$","h3",null,{"children":["$","code",null,{"children":"overflow.x"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'scroll'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'hidden'"}],", ",["$","code",null,{"children":"'scroll'"}],", ",["$","code",null,{"children":"'visible'"}],", ",["$","code",null,{"children":"'visible-hidden'"}]," and ",["$","code",null,{"children":"'visible-scroll'"}],"."]}],"\n"]}],["$","p",null,{"children":"The overflow behavior for the horizontal (x) axis."}],["$","h3",null,{"children":["$","code",null,{"children":"overflow.y"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'scroll'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'hidden'"}],", ",["$","code",null,{"children":"'scroll'"}],", ",["$","code",null,{"children":"'visible'"}],", ",["$","code",null,{"children":"'visible-hidden'"}]," and ",["$","code",null,{"children":"'visible-scroll'"}],"."]}],"\n"]}],["$","p",null,{"children":"The overflow behavior for the vertical (y) axis."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.theme"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'os-theme-dark'"}]}]]}]}]]}],["$","p",null,{"children":"Applies the specified theme (classname) to the scrollbars."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.visibility"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'auto'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'visible'"}],", ",["$","code",null,{"children":"'hidden'"}],", and ",["$","code",null,{"children":"'auto'"}],"."]}],"\n"]}],["$","p",null,{"children":["The visibility of a scrollbar if its scroll axis is able to have a scrollable overflow. (Scrollable overflow for an axis is only possible with the overflow behavior ",["$","code",null,{"children":"'scroll'"}]," or ",["$","code",null,{"children":"'visible-scroll'"}],")."]}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.autoHide"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'never'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'never'"}],", ",["$","code",null,{"children":"'scroll'"}],", ",["$","code",null,{"children":"'leave'"}]," and ",["$","code",null,{"children":"'move'"}],"."]}],"\n"]}],["$","p",null,{"children":"The possibility to hide visible scrollbars automatically after a certain user action."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.autoHideDelay"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"number"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"1300"}]}]]}]}]]}],["$","p",null,{"children":"The delay in milliseconds before the scrollbars are hidden automatically."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.autoHideSuspend"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","p",null,{"children":["Suspend the autoHide functionality until the first scroll interaction was performed.",["$","br",null,{}],"\n","The default value for this option is ",["$","code",null,{"children":"false"}]," for backwards compatibility reasons but is recommended to be ",["$","code",null,{"children":"true"}]," for better accessibility."]}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.dragScroll"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"true"}]}]]}]}]]}],["$","p",null,{"children":"Indicates whether you can drag the scrollbar handles for scrolling."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.clickScroll"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": This options requires the ",["$","strong",null,{"children":"ClickScrollPlugin"}]," to work."]}],"\n"]}],["$","p",null,{"children":"Indicates whether you can click on the scrollbar track for scrolling."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.pointers"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string[] | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"['mouse', 'touch', 'pen']"}]}]]}]}]]}],["$","p",null,{"children":["The ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType","children":["$","code",null,{"children":"PointerTypes"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," the plugin should react to."]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// The options of a OverlayScrollbars instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the padding shall be absolute."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" paddingAbsolute"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether to show the native scrollbars. Has only an effect it the native scrollbars are overlaid."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" showNativeOverlaidScrollbars"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Customizes the automatic update behavior."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" update"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The given Event(s) from the elements with the given selector(s) will trigger an update."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Useful for everything the MutationObserver and ResizeObserver can't detect"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * e.g.: and Images `load` event or the `transitionend` / `animationend` events."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" elementEvents"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Array"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<[elementSelector: "}],["$","span",null,{"style":{"color":"#859900"},"children":"string"}],["$","span",null,{"style":{"color":"#657B83"},"children":", eventNames: "}],["$","span",null,{"style":{"color":"#859900"},"children":"string"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]> "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The debounce which is used to detect content changes."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If a tuple is provided you can customize the `timeout` and the `maxWait` in milliseconds."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If a single number customizes only the `timeout`."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" *"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If the `timeout` is `0`, a debounce still exists. (its executed via `requestAnimationFrame`)."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" debounce"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [timeout: "}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":", maxWait: "}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":"] "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" number"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * HTML attributes which will trigger an update if they're changed."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Basic attributes like `id`, `class`, `style` etc. are always observed and doesn't have to be added explicitly."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" attributes"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":"[] "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // A function which makes it possible to ignore a content mutation or null if nothing shall be ignored."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" ignoreMutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" ((mutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" MutationRecord"}],["$","span",null,{"style":{"color":"#657B83"},"children":") "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" any"}],["$","span",null,{"style":{"color":"#657B83"},"children":") "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Customizes the overflow behavior per axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflow"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The overflow behavior of the horizontal (x) axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" x"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverflowBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The overflow behavior of the vertical (y) axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" y"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverflowBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Customizes appearance of the scrollbars."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars theme. The theme value will be added as `class` to all `scrollbar` elements of the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" theme"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars visibility behavior."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" visibility"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" ScrollbarsVisibilityBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars auto hide behavior."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHide"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" ScrollbarsAutoHideBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars auto hide delay in milliseconds."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideDelay"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" number"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the scrollbars auto hide behavior is suspended until a scroll happened."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideSuspend"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether its possible to drag the handle of a scrollbar to scroll the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" dragScroll"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether its possible to click the track of a scrollbar to scroll the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" clickScroll"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // An array of pointer types which shall be supported."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" pointers"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":"[] "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Events"}],"\n",["$","p",null,{"children":["You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the ",["$","code",null,{"children":"on"}]," and ",["$","code",null,{"children":"off"}]," methods:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {}, {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" updated"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(osInstance, onUpdatedArgs) {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // ..."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"});"}]}]]}]}]}],"\n",["$","h3",null,{"children":"Events in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Every event receives the ",["$","code",null,{"children":"instance"}]," from which it was dispatched as the first argument. Always."]}],"\n"]}],["$","h3",null,{"children":["$","code",null,{"children":"initialized"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}]}]]}],["$","p",null,{"children":"Is dispatched after all generated elements, observers and events were appended to the DOM."}],["$","h3",null,{"children":["$","code",null,{"children":"updated"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"onUpdatedArgs"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An ",["$","code",null,{"children":"object"}]," which describes the update in detail."]}]]}]]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": If an update was triggered but nothing changed, the event won't be dispatched."]}],"\n"]}],["$","p",null,{"children":"Is dispatched after the instace was updated."}],["$","h3",null,{"children":["$","code",null,{"children":"destroyed"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"canceled"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An ",["$","code",null,{"children":"boolean"}]," which indicates whether the initialization was canceled and thus destroyed."]}]]}]]}]]}],["$","p",null,{"children":"Is dispatched after all generated elements, observers and events were removed from the DOM."}],["$","h3",null,{"children":["$","code",null,{"children":"scroll"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"event"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["The original ",["$","code",null,{"children":"event"}]," argument of the DOM event."]}]]}]]}]]}],["$","p",null,{"children":"Is dispatched by scrolling the viewport."}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// A mapping between event names and their listener arguments."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched after all elements are initialized and appended."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" initialized"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched after an update."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" updated"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", onUpdatedArgs: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OnUpdatedEventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched after all elements, observers and events are destroyed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" destroyed"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", canceled: "}],["$","span",null,{"style":{"color":"#859900"},"children":"boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched on scroll."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scroll"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", event: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Event"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OnUpdatedEventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Hints which describe what changed in the DOM."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" updateHints"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the size of the host element changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" sizeChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the direction of the host element changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" directionChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the intrinsic height behavior changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" heightIntrinsicChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the overflow edge (clientWidth / clientHeight) of the viewport element changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowEdgeChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the overflow amount changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowAmountChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the overflow style changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowStyleChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether an host mutation took place."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" hostMutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether an content mutation took place."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" contentMutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The changed options."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" changedOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the update happened with an force invalidated cache."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" force"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Instance"}],"\n",["$","p",null,{"children":["The OverlayScrollbars instance is created by calling the ",["$","code",null,{"children":"OverlayScrollbars"}]," function with an element and options object."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#657B83"},"children":", {});"}]]}]}]}]}],"\n",["$","h3",null,{"children":"Instance Methods"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","h3",null,{"children":["$","code",null,{"children":"options(): Options"}]}],["$","p",null,{"children":"Get the current options of the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Options"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The current options."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"options(newOptions, pure?): Options"}]}],["$","p",null,{"children":"Sets the current options of the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"newOptions"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"PartialOptions"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The new (partial) options which should be applied."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"pure"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether the options should be reset before the new options are added."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Options"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The complete new options."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"on(eventListeners, pure?): Function"}]}],["$","p",null,{"children":"Adds event listeners to the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"eventListeners"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"EventListeners"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which contains the added listeners. The fields are the event names and the values the listeners."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"pure"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether all already added event listeners should be removed before the new listeners are added."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"A function which removes all added event listeners."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"on(name, listener): Function"}]}],["$","p",null,{"children":"Adds a single event listener to the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listener"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The function which is invoked when the event is dispatched."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"A function which removes the added event listener."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"on(name, listeners): Function"}]}],["$","p",null,{"children":"Adds multiple event listeners to the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listeners"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The functions which are invoked when the event is dispatched."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"A function which removes the added event listeners."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"off(name, listener): void"}]}],["$","p",null,{"children":"Removes a single event listener from the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listener"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The function to be removed."}]]}]]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"off(name, listeners): void"}]}],["$","p",null,{"children":"Removes multiple event listeners from the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listeners"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The functions to be removed."}]]}]]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"update(force?): boolean"}]}],["$","p",null,{"children":"Updates the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"force"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether the update should force the cache to be invalidated."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["A boolean which indicates whether the ",["$","code",null,{"children":"update"}]," event was triggered through this update."]}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"state(): State"}]}],["$","p",null,{"children":"Gets the instances state."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"State"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which describes the state of the instance."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"elements(): Elements"}]}],["$","p",null,{"children":"Gets the instances elments."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Elements"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which describes the elements of the instance."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"destroy(): void"}]}],["$","p",null,{"children":"Destroys the instance and removes all added elements."}],["$","h3",null,{"children":["$","code",null,{"children":"plugin(plugin: object): object | undefined"}]}],["$","p",null,{"children":"Gets the instance modules instance of the passed plugin."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An object which describes the plugins instance modules instance or ",["$","code",null,{"children":"undefined"}]," if no instance was found."]}]]}]}]]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// A simplified version of the OverlayScrollbars TypeScript interface."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Get the current options of the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" options"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Sets the current options of the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" options"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":", pure"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds event listeners to the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" on"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(eventListeners"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListeners"}],["$","span",null,{"style":{"color":"#657B83"},"children":", pure"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds a single event listener to the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" on"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">)"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds multiple event listeners to the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" on"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">[])"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Removes a single event listener from the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" off"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">)"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Removes multiple event listeners from the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" off"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">[])"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Updates the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" update"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(force"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instances state."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" state"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" State"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instances elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Destroys the instance and removes all added elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" destroy"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instance modules instance of the passed plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"P"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InstancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(osPlugin"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" P"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferInstancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"P"}],["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" undefined"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbars instances state."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" State"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Describes the current padding in pixel."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" padding"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" TRBL"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the current padding is absolute."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" paddingAbsolute"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The client width (x) & height (y) of the viewport in pixel."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowEdge"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The overflow amount in pixel."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowAmount"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The css overflow style of the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowStyle"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverflowStyle"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the viewport has an overflow."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" hasOverflow"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the direction is considered rtl."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" directionRTL"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the instance is considered destroyed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" destroyed"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes the elements of a OverlayScrollbars instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The element the instance was applied to."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The host element. Its the root of all other elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" host"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element which is responsible to apply correct paddings."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the Initialization it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" padding"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The element which is responsible to do any scrolling."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" viewport"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element which is responsible to hold the content."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the Initialization it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" content"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element through which you can get the current `scrollLeft` or `scrollTop` offset."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the target element it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollOffsetElement"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element through which you can add `scroll` events."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the target element it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollEventElement"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Document"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The horizontal scrollbar elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarHorizontal"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" CloneableScrollbarElements"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The vertical scrollbar elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarVertical"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" CloneableScrollbarElements"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Static Object"}],"\n",["$","p",null,{"children":["The static ",["$","code",null,{"children":"OverlayScrollbars"}]," object."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"SomePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}]}]}]}],"\n",["$","h3",null,{"children":"Static Object Methods"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","h3",null,{"children":["$","code",null,{"children":"plugin(plugin): object | undefined"}]}],["$","p",null,{"children":"Adds a single plugin."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"plugin"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The plugin to be added."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object / void"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An object which describes the plugins static modules instance or ",["$","code",null,{"children":"void"}]," if no instance was found."]}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"plugin(plugins): (object | void)[]"}]}],["$","p",null,{"children":"Adds multiple plugins."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"plugins"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The plugins to be added."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"(object / void)[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An array which describes the plugins static modules instances or ",["$","code",null,{"children":"undefined"}]," if no instance was found."]}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"valid(osInstance): boolean"}]}],["$","p",null,{"children":"Checks whether the passed value is a valid and not destroyed overlayscrollbars instance"}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"osInstance"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"any"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The value to be checked."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether the passed value is a valid and not destroyed overlayscrollbars instance."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"env(): Environment"}]}],["$","p",null,{"children":"Gets the environment."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Environment"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which described the environment."}]]}]}]]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// The OverlayScrollbars static object."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbarsStatic"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instance of the passed target or `undefined` the target has no instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" (target"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InitializationTarget"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" undefined"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Initializes OverlayScrollbars to the passed target with passed options and event listeners."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" (target"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InitializationTarget"}],["$","span",null,{"style":{"color":"#657B83"},"children":", options"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":", eventListeners"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListeners"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds a single plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(plugin"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferStaticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds multiple plugins."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(plugins"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"[])"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferStaticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">[];"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Checks whether the passed value is a valid and not destroyed overlayscrollbars instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" valid"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" any"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" osInstance "}],["$","span",null,{"style":{"color":"#859900"},"children":"is"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the environment."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" env"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Environment"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes the OverlayScrollbars environment."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Environment"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The native scrollbars size of the browser / system."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarsSize"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the native scrollbars are overlaid."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarsOverlaid"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the browser supports native scrollbars hiding."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarsHiding"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The rtl scroll behavior of the browser."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" rtlScrollBehavior"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { n"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; i"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the browser supports the ScrollTimeline API."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollTimeline"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The default Initialization to use if nothing else is specified."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" staticDefaultInitialization"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Initialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The default Options to use if nothing else is specified."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" staticDefaultOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Returns the current default Initialization."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getDefaultInitialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Initialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Returns the current default Options."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getDefaultOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Sets a new default Initialization."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If the new default Initialization is partially filled, its deeply merged with the current default Initialization."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@param"}],["$","span",null,{"style":{"color":"#268BD2","fontStyle":"italic"},"children":" newDefaultInitialization"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The new default Initialization."}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@returns"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The current default Initialization."}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" setDefaultInitialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newDefaultInitialization"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialInitialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Initialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Sets new default Options."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If the new default Options are partially filled, they're deeply merged with the current default Options."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@param"}],["$","span",null,{"style":{"color":"#268BD2","fontStyle":"italic"},"children":" newDefaultOptions"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The new default Options."}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@returns"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The current default options."}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" setDefaultOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newDefaultOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Styling"}],"\n",["$","p",null,{"children":["OverlayScrollbars comes with two themes called ",["$","code",null,{"children":"os-theme-dark"}]," and ",["$","code",null,{"children":"os-theme-light"}],". You can use the ",["$","code",null,{"children":"scrollbars.theme"}]," option to change the theme."]}],"\n",["$","p",null,{"children":["Custom themes can be done in multiple ways. The easiest and fastest is to use the predefined set of ",["$","code",null,{"children":"CSS Custom Properties"}]," aka. CSS variables. In case those aren't enought you can add custom class names or add custom styling to the existing class names."]}],"\n",["$","h3",null,{"children":"Styling in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","h3",null,{"children":"CSS Custom properties"}],["$","p",null,{"children":["OverlayScrollbars provides a set of ",["$","code",null,{"children":"CSS Custom Properties"}]," which makes scrollbar styling easy and fast:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"scss","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-scrollbar"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The size of the scrollbar"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The axis-perpedicular padding of the scrollbar (horizontal: padding-y, vertical: padding-x)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-padding-perpendicular: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The axis padding of the scrollbar (horizontal: padding-x, vertical: padding-y)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-padding-axis: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border radius of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border-radius: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-bg: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-bg-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-bg-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border radius of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border-radius: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The background of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-bg: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover background of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-bg-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active background of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-bg-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover border of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active border of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The min size of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-min-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"33"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The max size of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-max-size: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-perpendicular-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"100"}],["$","span",null,{"style":{"color":"#859900"},"children":"%"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-perpendicular-size-hover: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"100"}],["$","span",null,{"style":{"color":"#859900"},"children":"%"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-perpendicular-size-active: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"100"}],["$","span",null,{"style":{"color":"#859900"},"children":"%"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Increases the interactive area of the scrollbar handle."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-interactive-area-offset: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["You can alter the properties either for both scrollbars at once or per scrollbar axis. In the example below I've chosen ",["$","code",null,{"children":"os-theme-custom"}]," as the theme name:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"scss","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// horizontal and vertical scrollbar are 10px "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-theme-custom"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"10"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// horizontal scrollbar is 10px"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-theme-custom.os-scrollbar-horizontal"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"10"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// vertical scrollbar is 20px"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-theme-custom.os-scrollbar-vertical"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"20"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["You can then use your theme by assigning it via the ",["$","code",null,{"children":"scrollbars.theme"}]," option:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#657B83"},"children":", {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" theme: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'os-theme-custom'"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"});"}]}]]}]}]}],["$","p",null,{"children":"Since scrollbar styles are usually simple, this set of options should be enough to get your desired styling.\r\nIn case you need more freedom you can create your own styles by adding styling to the base class names described in the next section."}],["$","h3",null,{"children":"Scrollbars structure and CSS class names"}],["$","p",null,{"children":"The scrollbars HTML markup looks like:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"html","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar os-scrollbar-horizontal\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-track\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-handle\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar os-scrollbar-vertical\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-track\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-handle\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}]]}]}]}],["$","p",null,{"children":["The class names are simplified, in a real application the ",["$","code",null,{"children":".os-scrollbar"}]," element can have additional class names which modify the appearance (mostly visibility and alignment)."]}],["$","p",null,{"children":"Below is a list of the most important class names you will encounter:"}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"CSS class name"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The root element of a scrollbar."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-rtl"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["Indicates a ",["$","code",null,{"children":"RTL"}]," direction of the host element the scrollbar belongs to."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-horizontal"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The root element of a horizontal scrollbar."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-vertical"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The root element of a vertical scrollbar."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-handle-interactive"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["Indicates that the handle inside the scrollbar is interactive (",["$","code",null,{"children":"scrollbars.dragScroll"}]," is ",["$","code",null,{"children":"true"}],")."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-track-interactive"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["Indicates that the track inside the scrollbar is interactive (",["$","code",null,{"children":"scrollbars.clickScroll"}]," is ",["$","code",null,{"children":"true"}],")."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-track"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["The track element. This is the track of the nested handle element. If ",["$","code",null,{"children":"scrollbars.clickScroll"}]," is ",["$","code",null,{"children":"true"}]," this is the element users can click to change the scroll offset."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-handle"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["The handle element. If ",["$","code",null,{"children":"scrollbars.dragScroll"}]," is ",["$","code",null,{"children":"true"}]," this is the handle users can drag to change the scroll offset."]}]]}]]}]]}],["$","p",null,{"children":"If you create your own theme, please only use the classes listed above. All other classes are modifier classes used to change visibility, alignment and pointer-events of the scrollbars."}],["$","h3",null,{"children":"Gotchas"}],["$","p",null,{"children":["Its important that the chosen theme class name in your CSS file matches the assigned theme name in the options. If the CSS class name is ",["$","code",null,{"children":".my-theme"}]," the ",["$","code",null,{"children":"scrollbars.theme"}]," has to be ",["$","code",null,{"children":"'my-theme'"}],"."]}],["$","p",null,{"children":["Please be aware of your stack. ",["$","code",null,{"children":"css-modules"}]," for example will alter your class names to prevent naming collisions. Always double check if your CSS is really what you expect it to be."]}]]}],"\n",["$","h2",null,{"children":"Plugins"}],"\n",["$","p",null,{"children":"Everything thats considered not core functionality or old browser compatibility is exposed via a plugin. This is done because all unused plugins are treeshaken and thus won't end up in your final bundle. OverlayScrollbars comes with the following plugins:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":[["$","strong",null,{"children":"ScrollbarsHidingPlugin"}],": Is needed for old browsers which aren't supporting native scrollbar styling features. ",["$","a",null,{"href":"https://caniuse.com/?search=scrollbar%20styling","children":"You can find the list of browsers where you need this plugin here","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," (note that even though ",["$","code",null,{"children":"iOS Safari >= 14"}]," is marked as unsupported you only need this plugin for ",["$","code",null,{"children":"iOS < 7.1"}],")."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"SizeObserverPlugin"}],": Is needed for old browsers which aren't supporting the ",["$","code",null,{"children":"ResizeObserver"}]," api. ",["$","a",null,{"href":"https://caniuse.com/?search=ResizeObserver","children":"You can find the list of browsers where you need this plugin here","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"ClickScrollPlugin"}],": If you want to use the option ",["$","code",null,{"children":"scrollbars: { clickScroll: true }"}],"."]}],"\n"]}],"\n",["$","h3",null,{"children":"Consuming Plugins"}],"\n",["$","p",null,{"children":"Plugins are consumed like:"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"import"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"} "}],["$","span",null,{"style":{"color":"#859900"},"children":"from"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" 'overlayscrollbars'"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// single plugin"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// multiple plugins"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(["}],["$","span",null,{"style":{"color":"#268BD2"},"children":"SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]);"}]]}]]}]}]}],"\n",["$","h3",null,{"children":"Plugins in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","p",null,{"children":["Plugins are plain objects with a ",["$","strong",null,{"children":"single field"}],", the name of the field is the name of the plugin. This name is the plugins identifier and ",["$","em",null,{"children":"must"}]," be unique across all plugin. In case multiple plugins have the same name, the last added plugin overwrites previously added plugins."]}],["$","h3",null,{"children":"Plugin Modules"}],["$","p",null,{"children":["A Plugin module is the constructor of a plugin modules instance. There are two kinds of plugin modules: ",["$","code",null,{"children":"static"}]," and ",["$","code",null,{"children":"instance"}],". A single plugin must have one or more modules. Plugin modules can return an instance, but doesnt have to."]}],["$","h4",null,{"children":"Static Plugin Module"}],["$","p",null,{"children":["The ",["$","code",null,{"children":"static"}]," plugin module is invoked when the plugin is added with the ",["$","code",null,{"children":"OverlayScrollbars.plugin"}]," function."]}],["$","p",null,{"children":["Example plugin with a ",["$","code",null,{"children":"static"}]," module:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticPlugin"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // plugin has the name `examplePlugin`"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" examplePlugin: {"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // static function describes a static module and returns the module instance or void / undefined if no instance is needed"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `osStatic` parameter is the global `OverlayScrollbars` object"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" static"}],["$","span",null,{"style":{"color":"#657B83"},"children":": (osStatic) "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" let"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#D33682"},"children":" 0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getCount"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#859900"},"children":"++"}],["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" return"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["When the plugin is added with the ",["$","code",null,{"children":"OverlayScrollbars.plugin"}]," function, the static module instance is returned:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"staticPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// plugins static module is invoked"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"staticModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 0"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"staticModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"staticModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 1"}]]}]]}]}]}],["$","h4",null,{"children":"Instance Plugin Module"}],["$","p",null,{"children":["The ",["$","code",null,{"children":"instance"}]," plugin module is invoked when a new ",["$","code",null,{"children":"OverlayScrollbars"}]," instance is created but before the ",["$","code",null,{"children":"initialized"}]," event is dispatched."]}],["$","p",null,{"children":["Example plugin with a ",["$","code",null,{"children":"instance"}]," module:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePlugin"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // plugin has the name `examplePlugin`"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" examplePlugin: {"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // instance function describes a instance module and returns the module instance or void / undefined if no instance is needed"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `osInstance` parameter is the OverlayScrollbar instance the plugin is bound to"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `event` parameter is a function which adds events to the instance which can't be removed from outside the plugin"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `osStatic` parameter is the gobal OverlayScrollbar object"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" instance"}],["$","span",null,{"style":{"color":"#657B83"},"children":": (osInstance, event, osStatic) "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" let"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#D33682"},"children":" 0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getCount"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#859900"},"children":"++"}],["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // event which fires when the instance was initialized"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" event"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'initialized'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" console"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"log"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"instance initialized\""}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // event which fires when the viewport was scrolled"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" removeScrollEvent"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" event"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'scroll'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" console"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"log"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"viewport scrolled\""}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" removeScrollEvent"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// removes the event after the first scroll"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" return"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["When the plugin is added with the ",["$","code",null,{"children":"OverlayScrollbars.plugin"}]," function all OverlayScrollbar instances will add the plugin automatically from that point on. Already created instances will not have the plugin. The instance modules instance is returned with the ",["$","code",null,{"children":"osInstance.plugin"}]," function:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// plugin is added"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#657B83"},"children":", {}); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// plugins instance module is invoked"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePluginInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePluginInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 0"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePluginInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePluginInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 1"}]]}]]}]}]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbar plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the name of the plugin"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the module instance type of the static module"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" S"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the module instance type of the instance module"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" I"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" ["}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"pluginName"}],["$","span",null,{"style":{"color":"#859900"},"children":" in"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModule"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"S"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"I"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbar plugin which has only a static module."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" StaticPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Name"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#859900"},"children":"void"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbar plugin which has only a instance module."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InstancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Name"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#859900"},"children":"void"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Infers the type of the static modules instance of the passed plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferStaticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" StaticPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Infers the type of the instance modules instance of the passed plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"export"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferInstancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InstancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"FAQ"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":["How do I ",["$","code",null,{"children":"get / set"}]," the ",["$","code",null,{"children":"scroll position"}]," of an element I applied OverlayScrollbars to?"]}]}],["$","br",null,{}],["$","p",null,{"children":["If you applied ",["$","code",null,{"children":"OverlayScrollbars"}]," to the ",["$","code",null,{"children":"body"}]," element you can use ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX","children":["$","code",null,{"children":"window.scrollX"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY","children":["$","code",null,{"children":"window.scrollY"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll","children":["$","code",null,{"children":"window.scroll"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo","children":["$","code",null,{"children":"window.scrollTo"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy","children":["$","code",null,{"children":"window.scrollBy"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or any other native api."]}],["$","p",null,{"children":["If the plugin was applied to any other element you have to get the ",["$","code",null,{"children":"viewport"}]," element with the ",["$","code",null,{"children":"instance.elements()"}]," function first. With this element you can use ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop","children":["$","code",null,{"children":"element.scrollTop"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft","children":["$","code",null,{"children":"element.scrollLeft"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll","children":["$","code",null,{"children":"element.scroll"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo","children":["$","code",null,{"children":"element.scrollTo"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy","children":["$","code",null,{"children":"element.scrollBy"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or any other native api."]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"viewport"}],["$","span",null,{"style":{"color":"#657B83"},"children":" } "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"scrollLeft"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"scrollTop"}],["$","span",null,{"style":{"color":"#657B83"},"children":" } "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" viewport"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// get scroll offset"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"viewport"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"scrollTo"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ top: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":" }); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// set scroll offset"}]]}]]}]}]}]]}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":["Is it possible to ",["$","code",null,{"children":"limit / adjust the scrollbar handle length"}],"?"]}]}],["$","br",null,{}],["$","p",null,{"children":["You can adjust a scrollbars handle length by setting a ",["$","code",null,{"children":"min-width / min-height"}]," and ",["$","code",null,{"children":"max-width / max-height"}]," style:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"css","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"/* horizontal boundaries */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-scrollbar-horizontal"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" .os-scrollbar-handle"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" min-width"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"50"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" max-width"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"200"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"/* vertical boundaries */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-scrollbar-vertical"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" .os-scrollbar-handle"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" min-height"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"40"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" max-height"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"40"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["You can assign the same value to both properties to force the scrollbar to be always the same size.",["$","br",null,{}],"\n","Setting the ",["$","code",null,{"children":"width"}]," and ",["$","code",null,{"children":"height"}]," properties won't work since those are set by the plugin automatically."]}]]}],"\n",["$","h2",null,{"children":["Feature comparison to ",["$","code",null,{"children":"v1"}]]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["The ",["$","code",null,{"children":"scroll"}]," function is missing. Planned as a ",["$","code",null,{"children":"plugin"}],". (WIP)"]}],"\n",["$","li",null,{"children":["Initialization to the ",["$","code",null,{"children":"textarea"}]," element isn't supported yet. Planned as a ",["$","code",null,{"children":"plugin"}],". (WIP)"]}],"\n"]}],"\n",["$","h2",null,{"children":"Future Plans"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Provide plugin based support for missing features. (treeshakeable)"}],"\n",["$","li",null,{"children":"Frequent updates in terms of bug-fixes and enhancements. (always use latest browser features)"}],"\n",["$","li",null,{"children":"Improve tests. (unit & browser tests)"}],"\n"]}],"\n",["$","h2",null,{"children":"License"}],"\n",["$","p",null,{"children":"MIT"}]]}]]}],null]]},[null,["$","$L4",null,{"children":["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/OverlayScrollbars/_next/static/css/403ab94758bf94f7.css","precedence":"next","crossOrigin":""}]],"$L7"]]]]
7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"name":"theme-color","content":"#36befd"}],["$","meta","2",{"charSet":"utf-8"}],["$","title","3",{"children":"OverlayScrollbars"}],["$","meta","4",{"name":"description","content":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."}],["$","link","5",{"rel":"author","href":"https://github.com/KingSora"}],["$","meta","6",{"name":"author","content":"Rene Haas"}],["$","link","7",{"rel":"author","href":"https://github.com/KingSora"}],["$","meta","8",{"name":"author","content":"KingSora"}],["$","meta","9",{"name":"keywords","content":"OverlayScrollbars,Overlay,Scroll,Bar,Custom,Scrollbar,React,Vue,Angular,Solid,Solidjs,Svelte,JavaScript,TypeScript,Plugin,Library"}],["$","meta","10",{"name":"creator","content":"Rene Haas"}],["$","meta","11",{"name":"publisher","content":"Rene Haas"}],["$","meta","12",{"name":"twitter:card","content":"summary"}],["$","meta","13",{"name":"twitter:title","content":"OverlayScrollbars"}],["$","meta","14",{"name":"twitter:description","content":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."}],["$","link","15",{"rel":"icon","href":"/OverlayScrollbars/favicon.ico","type":"image/x-icon","sizes":"256x256"}]]
1:null
diff --git a/examples/react/package-lock.json b/examples/react/package-lock.json
index 481e9c61..dd07ed1e 100644
--- a/examples/react/package-lock.json
+++ b/examples/react/package-lock.json
@@ -30,7 +30,7 @@
},
"../../packages/overlayscrollbars/dist": {
"name": "overlayscrollbars",
- "version": "2.4.7",
+ "version": "2.6.1",
"license": "MIT"
},
"node_modules/@ampproject/remapping": {