diff --git a/docs/404.html b/docs/404.html index 152482b..2d42c0b 100644 --- a/docs/404.html +++ b/docs/404.html @@ -1,4 +1,4 @@ -404: This page could not be found

404

This page could not be found.

\ No newline at end of file + }

404

This page could not be found.

\ No newline at end of file diff --git a/docs/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_buildManifest.js b/docs/_next/static/VWtMpKis31Cpzj__1nYbi/_buildManifest.js similarity index 79% rename from docs/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_buildManifest.js rename to docs/_next/static/VWtMpKis31Cpzj__1nYbi/_buildManifest.js index 977c09d..9d2a6f5 100644 --- a/docs/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_buildManifest.js +++ b/docs/_next/static/VWtMpKis31Cpzj__1nYbi/_buildManifest.js @@ -1 +1 @@ -self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/054cd89f2e050c9e.css","static/chunks/pages/index-6ccc9594454841fc.js"],"/_error":["static/chunks/pages/_error-fa37e1d4331cc885.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file +self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/054cd89f2e050c9e.css","static/chunks/pages/index-8b1f48702cfdc018.js"],"/_error":["static/chunks/pages/_error-fa37e1d4331cc885.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/docs/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_ssgManifest.js b/docs/_next/static/VWtMpKis31Cpzj__1nYbi/_ssgManifest.js similarity index 100% rename from docs/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_ssgManifest.js rename to docs/_next/static/VWtMpKis31Cpzj__1nYbi/_ssgManifest.js diff --git a/docs/_next/static/chunks/pages/_app-302faba7de8b264d.js b/docs/_next/static/chunks/pages/_app-302faba7de8b264d.js deleted file mode 100644 index 59c1eab..0000000 --- a/docs/_next/static/chunks/pages/_app-302faba7de8b264d.js +++ /dev/null @@ -1,9 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[888],{8936:function(t,e,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return r(8475)}])},4732:function(t,e,r){"use strict";r.d(e,{a:function(){return rZ}});var n=r(1809),l=r(7378);/*! - * OverlayScrollbars - * Version: 2.0.0 - * - * Copyright (c) Rene Haas | KingSora. - * https://github.com/KingSora - * - * Released under the MIT license. - */ function i(t,e){if(x(t))for(let r=0;re(t[r],r,t));return t}function o(t,e){let r=v(e),n=m(e)||r;if(n){let l=r?"":{};if(t){let o=window.getComputedStyle(t,null);l=r?tM(t,o,e):e.reduce((e,r)=>(e[r]=tM(t,o,r),e),l)}return l}t&&i(T(e),r=>tI(t,r,e[r]))}let a=(t,e)=>{let{o:r,u:n,_:l}=t,i=r,o,a=(t,e)=>{let r=i,a=e||(n?!n(r,t):r!==t);return(a||l)&&(i=t,o=r),[i,a,o]},u=t=>a(e(i,o),t),s=t=>[i,!!t,o];return[e?u:a,s]},u=()=>"undefined"!=typeof window,s=u()&&Node.ELEMENT_NODE,{toString:c,hasOwnProperty:d}=Object.prototype,f=t=>void 0===t,p=t=>null===t,b=t=>f(t)||p(t)?`${t}`:c.call(t).replace(/^\[object (.+)\]$/,"$1").toLowerCase(),h=t=>"number"==typeof t,v=t=>"string"==typeof t,y=t=>"boolean"==typeof t,g=t=>"function"==typeof t,m=t=>Array.isArray(t),w=t=>"object"==typeof t&&!m(t)&&!p(t),x=t=>{let e=!!t&&t.length,r=h(e)&&e>-1&&e%1==0;return(!!m(t)||!g(t)&&!!r)&&(!(e>0&&w(t))||e-1 in t)},O=t=>{if(!t||!w(t)||"object"!==b(t))return!1;let e,r="constructor",n=t[r],l=n&&n.prototype,i=d.call(t,r),o=l&&d.call(l,"isPrototypeOf");if(n&&!i&&!o)return!1;for(e in t);return f(e)||d.call(t,e)},_=t=>{let e=HTMLElement;return!!t&&(e?t instanceof e:t.nodeType===s)},S=t=>{let e=Element;return!!t&&(e?t instanceof e:t.nodeType===s)},j=(t,e,r)=>t.indexOf(e,r),$=(t,e,r)=>(!r&&!v(e)&&x(e)?Array.prototype.push.apply(t,e):t.push(e),t),E=t=>{let e=Array.from,r=[];return e&&t?e(t):(t instanceof Set?t.forEach(t=>{$(r,t)}):i(t,t=>{$(r,t)}),r)},P=t=>!!t&&0===t.length,C=(t,e,r)=>{let n=t=>t&&t.apply(void 0,e||[]);i(t,n),r||(t.length=0)},k=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),T=t=>t?Object.keys(t):[],A=(t,e,r,n,l,o,a)=>(("object"!=typeof t||p(t))&&!g(t)&&(t={}),i([e,r,n,l,o,a],e=>{i(T(e),r=>{let n=e[r];if(t===n)return!0;let l=m(n);if(n&&(O(n)||l)){let i=t[r],o=i;l&&!m(i)?o=[]:l||O(i)||(o={}),t[r]=A(o,n)}else t[r]=n})}),t),L=t=>{for(let e in t)return!1;return!0},M=(t,e,r,n)=>{if(f(n))return r?r[t]:e;r&&(v(n)||h(n))&&(r[t]=n)},I=(t,e,r)=>{if(f(r))return t?t.getAttribute(e):null;t&&t.setAttribute(e,r)},z=(t,e,r,n)=>{if(r){let l=I(t,e)||"",i=new Set(l.split(" "));i[n?"add":"delete"](r),I(t,e,E(i).join(" ").trim())}},N=(t,e,r)=>{let n=I(t,e)||"",l=new Set(n.split(" "));return l.has(r)},Z=(t,e)=>{t&&t.removeAttribute(e)},R=(t,e)=>M("scrollLeft",0,t,e),B=(t,e)=>M("scrollTop",0,t,e),H=u()&&Element.prototype,X=(t,e)=>{let r=[],n=e?S(e)?e:null:document;return n?$(r,n.querySelectorAll(t)):r},D=(t,e)=>{let r=e?S(e)?e:null:document;return r?r.querySelector(t):null},F=(t,e)=>{if(S(t)){let r=H.matches||H.msMatchesSelector;return r.call(t,e)}return!1},Y=t=>t?E(t.childNodes):[],K=t=>t?t.parentElement:null,q=(t,e)=>{if(S(t)){let r=H.closest;if(r)return r.call(t,e);do{if(F(t,e))return t;t=K(t)}while(t)}return null},J=(t,e,r)=>{let n=t&&q(t,e),l=t&&D(r,n),i=q(l,e)===n;return!!n&&!!l&&(n===t||l===t||i&&q(q(t,r),e)!==n)},V=(t,e,r)=>{if(r&&t){let n=e,l;x(r)?(l=document.createDocumentFragment(),i(r,t=>{t===n&&(n=t.previousSibling),l.appendChild(t)})):l=r,e&&(n?n!==e&&(n=n.nextSibling):n=t.firstChild),t.insertBefore(l,n||null)}},W=(t,e)=>{V(t,null,e)},G=(t,e)=>{V(K(t),t,e)},U=(t,e)=>{V(K(t),t&&t.nextSibling,e)},Q=t=>{if(x(t))i(E(t),t=>Q(t));else if(t){let e=K(t);e&&e.removeChild(t)}},tt=t=>{let e=document.createElement("div");return t&&I(e,"class",t),e},te=t=>{let e=tt();return e.innerHTML=t.trim(),i(Y(e),t=>Q(t))},tr=t=>t.charAt(0).toUpperCase()+t.slice(1),tn=()=>tt().style,tl=["-webkit-","-moz-","-o-","-ms-"],ti=["WebKit","Moz","O","MS","webkit","moz","o","ms"],to={},ta={},tu=t=>{let e=ta[t];if(k(ta,t))return e;let r=tr(t),n=tn();return i(tl,l=>{let i=l.replace(/-/g,""),o=[t,l+t,i+r,tr(i)+r];return!(e=o.find(t=>void 0!==n[t]))}),ta[t]=e||""},ts=t=>{if(u()){let e=to[t]||window[t];return k(to,t)||(i(ti,r=>!(e=e||window[r+tr(t)])),to[t]=e),e}},tc=ts("MutationObserver"),td=ts("IntersectionObserver"),tf=ts("ResizeObserver"),tp=ts("cancelAnimationFrame"),tb=ts("requestAnimationFrame"),th=u()&&window.setTimeout,tv=u()&&window.clearTimeout,ty=(t,e,r,n)=>{if(t&&e){let l=!0;return i(r,r=>{let i=n?n(t[r]):t[r],o=n?n(e[r]):e[r];i!==o&&(l=!1)}),l}return!1},tg=(t,e)=>ty(t,e,["w","h"]),tm=(t,e)=>ty(t,e,["x","y"]),tw=(t,e)=>ty(t,e,["t","r","b","l"]),tx=(t,e,r)=>ty(t,e,["width","height"],r&&(t=>Math.round(t))),tO=()=>{},t_=t=>{let e,r=t?th:tb,n=t?tv:tp;return[l=>{n(e),e=r(l,g(t)?t():t)},()=>n(e)]},tS=(t,e)=>{let r,n,l,i=tO,{g:o,v:a,p:u}=e||{},s=function(e){i(),tv(r),r=n=void 0,i=tO,t.apply(this,e)},c=t=>u&&n?u(n,t):t,d=()=>{i!==tO&&s(c(l)||l)},f=function(){let t=E(arguments),e=g(o)?o():o,u=h(e)&&e>=0;if(u){let f=g(a)?a():a,p=h(f)&&f>=0,b=e>0?tv:tp,v=c(t),y=v||t,m=s.bind(0,y);i();let w=(e>0?th:tb)(m,e);i=()=>b(w),p&&!r&&(r=th(d,f)),n=l=y}else s(t)};return f.m=d,f},{max:tj}=Math,t$=/[^\x20\t\r\n\f]+/g,tE=(t,e,r)=>{let n=t&&t.classList,l,i=0,o=!1;if(n&&e&&v(e)){let a=e.match(t$)||[];for(o=a.length>0;l=a[i++];)o=!!r(n,l)&&o}return o},tP=(t,e)=>tE(t,e,(t,e)=>t.contains(e)),tC=(t,e)=>{tE(t,e,(t,e)=>t.remove(e))},tk=(t,e)=>(tE(t,e,(t,e)=>t.add(e)),tC.bind(0,t,e)),tT={opacity:1,zindex:1},tA=(t,e)=>{let r=e?parseFloat(t):parseInt(t,10);return r==r?r:0},tL=(t,e)=>!tT[t.toLowerCase()]&&h(e)?`${e}px`:e,tM=(t,e,r)=>null!=e?e[r]||e.getPropertyValue(r):t.style[r],tI=(t,e,r)=>{try{let{style:n}=t;f(n[e])?n.setProperty(e,r):n[e]=tL(e,r)}catch(l){}},tz=t=>"rtl"===o(t,"direction"),tN=(t,e,r)=>{let n=e?`${e}-`:"",l=r?`-${r}`:"",i=`${n}top${l}`,a=`${n}right${l}`,u=`${n}bottom${l}`,s=`${n}left${l}`,c=o(t,[i,a,u,s]);return{t:tA(c[i],!0),r:tA(c[a],!0),b:tA(c[u],!0),l:tA(c[s],!0)}},{round:tZ}=Math,tR={w:0,h:0},tB=t=>t?{w:t.offsetWidth,h:t.offsetHeight}:tR,tH=t=>t?{w:t.clientWidth,h:t.clientHeight}:tR,tX=t=>t?{w:t.scrollWidth,h:t.scrollHeight}:tR,tD=t=>{let e=parseFloat(o(t,"height"))||0,r=parseFloat(o(t,"width"))||0;return{w:r-tZ(r),h:e-tZ(e)}},tF=t=>t.getBoundingClientRect(),tY,tK=()=>{if(f(tY)){tY=!1;try{window.addEventListener("test",null,Object.defineProperty({},"passive",{get(){tY=!0}}))}catch(t){}}return tY},tq=t=>t.split(" "),tJ=(t,e,r,n)=>{i(tq(e),e=>{t.removeEventListener(e,r,n)})},tV=(t,e,r,n)=>{var l;let o=tK(),a=null!=(l=o&&n&&n.S)?l:o,u=n&&n.$||!1,s=n&&n.C||!1,c=[],d=o?{passive:a,capture:u}:u;return i(tq(e),e=>{let n=s?l=>{t.removeEventListener(e,n,u),r&&r(l)}:r;$(c,tJ.bind(null,t,e,n,u)),t.addEventListener(e,n,d)}),C.bind(0,c)},tW=t=>t.stopPropagation(),tG=t=>t.preventDefault(),tU={x:0,y:0},tQ=t=>{let e=t?tF(t):0;return e?{x:e.left+window.pageYOffset,y:e.top+window.pageXOffset}:tU},t0=(t,e)=>{i(m(e)?e:[e],t)},t1=t=>{let e=new Map,r=(t,r)=>{if(t){let n=e.get(t);t0(t=>{n&&n[t?"delete":"clear"](t)},r)}else e.forEach(t=>{t.clear()}),e.clear()},n=(t,l)=>{if(v(t)){let o=e.get(t)||new Set;return e.set(t,o),t0(t=>{g(t)&&o.add(t)},l),r.bind(0,t,l)}y(l)&&l&&r();let a=T(t),u=[];return i(a,e=>{let r=t[e];r&&$(u,n(e,r))}),C.bind(0,u)},l=(t,r)=>{let n=e.get(t);i(E(n),t=>{r&&!P(r)?t.apply(0,r):t()})};return n(t||{}),[n,r,l]},t3=t=>JSON.stringify(t,(t,e)=>{if(g(e))throw Error();return e}),t2={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,dragScroll:!0,clickScroll:!1,pointers:["mouse","touch","pen"]}},t8=(t,e)=>{let r={},n=T(e).concat(T(t));return i(n,n=>{let l=t[n],i=e[n];if(w(l)&&w(i))A(r[n]={},t8(l,i)),L(r[n])&&delete r[n];else if(k(e,n)&&i!==l){let o=!0;if(m(l)||m(i))try{t3(l)===t3(i)&&(o=!1)}catch(a){}o&&(r[n]=i)}}),r},t7="os-environment",t5=`${t7}-flexbox-glue`,t6=`${t5}-max`,t9="data-overlayscrollbars",t4=`${t9}-overflow-x`,et=`${t9}-overflow-y`,ee="overflowVisible",er="updating",en="os-viewport",el=`${en}-arrange`,ei=`${en}-scrollbar-hidden`,eo="os-overflow-visible",ea="os-size-observer",eu=`${ea}-appear`,es=`${ea}-listener`,ec="os-scrollbar",ed=`${ec}-rtl`,ef=`${ec}-horizontal`,ep=`${ec}-vertical`,eb=`${ec}-track`,eh=`${ec}-handle`,ev=`${ec}-visible`,ey=`${ec}-cornerless`,eg=`${ec}-transitionless`,em=`${ec}-interaction`,ew=`${ec}-unusable`,ex=`${ec}-auto-hidden`,eO=`${ec}-wheel`,e_=`${eb}-interactive`,eS=`${eh}-interactive`,ej={},e$=()=>ej,eE=t=>{let e=[];return i(m(t)?t:[t],t=>{let r=T(t);i(r,r=>{$(e,ej[r]=t[r])})}),e},eP={boolean:"__TPL_boolean_TYPE__",number:"__TPL_number_TYPE__",string:"__TPL_string_TYPE__",array:"__TPL_array_TYPE__",object:"__TPL_object_TYPE__",function:"__TPL_function_TYPE__",null:"__TPL_null_TYPE__"};eP.number,eP.boolean,eP.array,eP.null,eP.number,eP.array,eP.null,eP.function,eP.null,eP.string,eP.null,eP.array,eP.null;let{round:eC,abs:ek}=Math,eT="__osScrollbarsHidingPlugin",eA,eL=(t,e,r,n)=>{W(t,e);let l=tH(e),i=tB(e),o=tD(r);return n&&Q(e),{x:i.h-l.h+o.h,y:i.w-l.w+o.w}},eM=t=>{let e=!1,r=tk(t,ei);try{e="none"===o(t,tu("scrollbar-width"))||"none"===window.getComputedStyle(t,"::-webkit-scrollbar").getPropertyValue("display")}catch(n){}return r(),e},eI=(t,e)=>{let r="hidden";o(t,{overflowX:r,overflowY:r,direction:"rtl"}),R(t,0);let n=tQ(t),l=tQ(e);R(t,-999);let i=tQ(e);return{i:n.x===l.x,n:l.x!==i.x}},ez=(t,e)=>{let r=tk(t,t5),n=tF(t),l=tF(e),i=tx(l,n,!0),o=tk(t,t6),a=tF(t),u=tF(e),s=tx(u,a,!0);return r(),o(),i&&s},eN=()=>{let{body:t}=document,e=te(`
`),r=e[0],n=r.firstChild,[l,,i]=t1(),[u,s]=a({o:eL(t,r,n),u:tm},eL.bind(0,t,r,n,!0)),[c]=s(),d=eM(r),f={x:0===c.x,y:0===c.y},p={elements:{host:null,padding:!d,viewport:t=>d&&t===t.ownerDocument.body&&t,content:!1},scrollbars:{slot:!0},cancel:{nativeScrollbarsOverlaid:!1,body:null}},b=A({},t2),h=A.bind(0,{},b),v=A.bind(0,{},p),y={k:c,I:f,A:d,L:"-1"===o(r,"zIndex"),V:eI(r,n),B:ez(r,n),Y:l.bind(0,"z"),j:l.bind(0,"r"),q:v,N:t=>A(p,t)&&v(),F:h,G:t=>A(b,t)&&h(),X:A({},p),U:A({},b)},g=window.addEventListener,m=tS(t=>i(t?"z":"r"),{g:33,v:99});if(Z(r,"style"),Q(r),g("resize",m.bind(0,!1)),!d&&(!f.x||!f.y)){let w;g("resize",()=>{let t=e$()[eT];(w=w||t&&t.R())&&w(y,u,m.bind(0,!0))})}return y},eZ=()=>(eA||(eA=eN()),eA),eR=(t,e)=>g(e)?e.apply(0,t):e,eB=(t,e,r,n)=>{let l=f(n)?r:n,i=eR(t,l);return i||e.apply(0,t)},eH=(t,e,r,n)=>{let l=f(n)?r:n,i=eR(t,l);return!!i&&(_(i)?i:e.apply(0,t))},eX=(t,e,r)=>{let{nativeScrollbarsOverlaid:n,body:l}=r||{},{I:i,A:o}=eZ(),{nativeScrollbarsOverlaid:a,body:u}=e,s=f(l)?u:l,c=(i.x||i.y)&&(null!=n?n:a),d=t&&(p(s)?!o:s);return!!c||!!d},eD=new WeakMap,eF=(t,e)=>{eD.set(t,e)},eY=t=>{eD.delete(t)},eK=t=>eD.get(t),eq=(t,e)=>t?e.split(".").reduce((t,e)=>t&&k(t,e)?t[e]:void 0,t):void 0,eJ=(t,e,r)=>n=>[eq(t,n),r||void 0!==eq(e,n)],eV=t=>{let e=t;return[()=>e,t=>{e=A({},e,t)}]},eW="tabindex",eG=tt.bind(0,""),eU=t=>{W(K(t),Y(t)),Q(t)},eQ=t=>{let e=eZ(),{q:r,A:n}=e,l=e$()[eT],i=l&&l.T,{elements:o}=r(),{host:a,padding:u,viewport:s,content:c}=o,d=_(t),f=d?{}:t,{elements:p}=f,{host:b,padding:h,viewport:v,content:y}=p||{},g=d?t:f.target,m=F(g,"textarea"),w=g.ownerDocument,x=w.documentElement,O=g===w.body,S=w.defaultView,E=eB.bind(0,[g]),P=eH.bind(0,[g]),k=eR.bind(0,[g]),A=E.bind(0,eG,s),L=P.bind(0,eG,c),M=A(v),R=M===g,B=R&&O,H=!R&&L(y),X=!R&&_(M)&&M===H,D=X&&!!k(c),q=D?A():M,J=D?H:L(),V=X?q:M,tt=w.activeElement,te=!R&&S.top===S&&tt===g,tr={W:g,Z:m?E(eG,a,b):g,J:V,K:!R&&P(eG,u,h),tt:X?J:H,nt:!R&&!n&&i&&i(e),ot:B?x:V,st:B?w:V,et:S,ct:w,rt:m,it:O,lt:d,ut:R,dt:X,ft:(t,e)=>R?N(V,t9,e):tP(V,t),_t:(t,e,r)=>R?z(V,t9,e,r):(r?tk:tC)(V,t)},tn=T(tr).reduce((t,e)=>{let r=tr[e];return $(t,!!r&&!K(r)&&r)},[]),tl=t=>t?j(tn,t)>-1:null,{W:ti,Z:to,K:ta,J:tu,tt:ts,nt:tc}=tr,td=[()=>{Z(to,t9),O&&Z(x,t9)}],tf=m&&tl(to),tp=m?ti:Y([ts,tu,ta,to,ti].find(t=>!1===tl(t))),tb=ts||tu,th=()=>{I(to,t9,R?"viewport":"host");let t=tk(ta,"os-padding"),e=tk(tu,!R&&en),r=tk(ts,"os-content"),l=O?tk(K(g),ei):tO;if(tf&&(U(ti,to),$(td,()=>{U(to,ti),Q(to)})),W(tb,tp),W(to,ta),W(ta||to,!R&&tu),W(tu,ts),$(td,()=>{l(),Z(tu,t4),Z(tu,et),tl(ts)&&eU(ts),tl(tu)&&eU(tu),tl(ta)&&eU(ta),t(),e(),r()}),n&&!R&&$(td,tC.bind(0,tu,ei)),tc&&(G(tu,tc),$(td,Q.bind(0,tc))),te){let i=I(tu,eW);I(tu,eW,"-1"),tu.focus();let o=()=>i?I(tu,eW,i):Z(tu,eW),a=tV(w,"pointerdown keydown",()=>{o(),a()});$(td,[o,a])}else tt&&tt.focus&&tt.focus();tp=0};return[tr,th,C.bind(0,td)]},e0=(t,e)=>{let{tt:r}=t,[n]=e;return t=>{let{B:e}=eZ(),{ht:l}=n(),{gt:i}=t,a=(r||!e)&&i;return a&&o(r,{height:l?"":"100%"}),{vt:a,wt:a}}},e1=(t,e)=>{let[r,n]=e,{Z:l,K:i,J:u,ut:s}=t,[c,d]=a({u:tw,o:tN()},tN.bind(0,l,"padding",""));return(t,e,l)=>{let[a,f]=d(l),{A:p,B:b}=eZ(),{bt:h}=r(),{vt:v,wt:y,yt:g}=t,[m,w]=e("paddingAbsolute");(v||f||!b&&y)&&([a,f]=c(l));let x=!s&&(w||g||f);if(x){let O=!m||!i&&!p,_=a.r+a.l,S=a.t+a.b,j={marginRight:O&&!h?-_:0,marginBottom:O?-S:0,marginLeft:O&&h?-_:0,top:O?-a.t:0,right:O?h?-a.r:"auto":0,left:O?h?"auto":-a.l:0,width:O?`calc(100% + ${_}px)`:""},$={paddingTop:O?a.t:0,paddingRight:O?a.r:0,paddingBottom:O?a.b:0,paddingLeft:O?a.l:0};o(i||u,j),o(u,$),n({K:a,St:!O,M:i?$:A({},j,$)})}return{xt:x}}},{max:e3}=Math,e2=e3.bind(0,0),e8="visible",e7="hidden",e5={u:tg,o:{w:0,h:0}},e6={u:tm,o:{x:e7,y:e7}},e9=(t,e)=>{let r=window.devicePixelRatio%1!=0?1:0,n={w:e2(t.w-e.w),h:e2(t.h-e.h)};return{w:n.w>r?n.w:0,h:n.h>r?n.h:0}},e4=(t,e,r)=>r?tk(t,e):tC(t,e),rt=t=>0===t.indexOf(e8),re=(t,e)=>{let[r,n]=e,{Z:l,K:i,J:u,nt:s,ut:c,_t:d,it:f,et:p}=t,{k:b,B:h,A:v,I:y}=eZ(),g=e$()[eT],m=!c&&!v&&(y.x||y.y),w=f&&c,[x,O]=a(e5,tD.bind(0,u)),[_,S]=a(e5,tX.bind(0,u)),[j,$]=a(e5),[E,P]=a(e5),[C]=a(e6),k=(t,e)=>{if(o(u,{height:""}),e){let{St:n,K:i}=r(),{$t:a,P:s}=t,c=tD(l),d=tH(l),f="content-box"===o(u,"boxSizing"),p=n||f?i.b+i.t:0,b=!(y.x&&f);o(u,{height:d.h+c.h+(a.x&&b?s.x:0)-p})}},T=(t,e)=>{let r=v||t?0:42,n=(t,n,l)=>{let i=o(u,t),a=e?e[t]:i,s="scroll"===a;return[i,s,s&&!v?n?r:l:0,n&&!!r]},[l,i,a,s]=n("overflowX",y.x,b.x),[c,d,f,p]=n("overflowY",y.y,b.y);return{Ct:{x:l,y:c},$t:{x:i,y:d},P:{x:a,y:f},D:{x:s,y:p}}},A=(t,e,r,n)=>{let l=(t,e)=>{let r=rt(t),n=e&&r&&t.replace(`${e8}-`,"")||"";return[e&&!r?t:"",rt(n)?"hidden":n]},[i,o]=l(r.x,e.x),[a,u]=l(r.y,e.y);return n.overflowX=o&&a?o:i,n.overflowY=u&&i?u:a,T(t,n)},L=(t,e,n,l)=>{let{P:i,D:o}=t,{x:a,y:u}=o,{x:s,y:c}=i,{M:d}=r(),f=e?"marginLeft":"marginRight",p=e?"paddingLeft":"paddingRight",b=d[f],h=d.marginBottom,v=d[p],y=d.paddingBottom;l.width=`calc(100% + ${c+-1*b}px)`,l[f]=-c+b,l.marginBottom=-s+h,n&&(l[p]=v+(u?c:0),l.paddingBottom=y+(a?s:0))},[M,N]=g?g.H(m,h,u,s,r,T,L):[()=>m,()=>[tO]];return(t,e,a)=>{let{vt:s,Ot:f,wt:b,xt:g,gt:m,yt:Z}=t,{ht:R,bt:B}=r(),[H,X]=e("showNativeOverlaidScrollbars"),[D,F]=e("overflow"),Y=H&&y.x&&y.y,K=!c&&!h&&(s||b||f||X||m),q=rt(D.x),J=rt(D.y),V=q||J,W=O(a),G=S(a),U=$(a),Q=P(a),tt;if(X&&v&&d(ei,"scrollbarHidden",!Y),K&&(tt=T(Y),k(tt,R)),s||g||b||Z||X){V&&d(eo,ee,!1);let[te,tr]=N(Y,B,tt),[tn,tl]=W=x(a),[ti,to]=G=_(a),ta=tH(u),tu=ti,ts=ta;te(),(to||tl||X)&&tr&&!Y&&M(tr,ti,tn,B)&&(ts=tH(u),tu=tX(u));let tc={w:e2(e3(ti.w,tu.w)+tn.w),h:e2(e3(ti.h,tu.h)+tn.h)},td={w:e2((w?p.innerWidth:ts.w+e2(ta.w-ti.w))+tn.w),h:e2((w?p.innerHeight+tn.h:ts.h+e2(ta.h-ti.h))+tn.h)};Q=E(td),U=j(e9(tc,td),a)}let[tf,tp]=Q,[tb,th]=U,[tv,ty]=G,[tg,tm]=W,tw={x:tb.w>0,y:tb.h>0},tx=q&&J&&(tw.x||tw.y)||q&&tw.x&&!tw.y||J&&tw.y&&!tw.x;if(g||Z||tm||ty||tp||th||F||X||K){let tO={marginRight:0,marginBottom:0,marginLeft:0,width:"",overflowY:"",overflowX:""},t_=A(Y,tw,D,tO),tS=M(t_,tv,tg,B);c||L(t_,B,tS,tO),K&&k(t_,R),c?(I(l,t4,tO.overflowX),I(l,et,tO.overflowY)):o(u,tO)}z(l,t9,ee,tx),e4(i,eo,tx),c||e4(u,eo,V);let[tj,t$]=C(T(Y).Ct);return n({Ct:tj,zt:{x:tf.w,y:tf.h},Tt:{x:tb.w,y:tb.h},Et:tw}),{At:t$,It:tp,Lt:th}}},rr=(t,e,r)=>{let n={},l=e||{},o=T(t).concat(T(l));return i(o,e=>{let i=t[e],o=l[e];n[e]=!!(r||i||o)}),n},rn=(t,e)=>{let{W:r,J:n,_t:l,ut:o}=t,{A:a,I:u,B:s}=eZ(),c=!a&&(u.x||u.y),d=[e0(t,e),e1(t,e),re(t,e)];return(t,e,a)=>{let u=rr(A({vt:!1,xt:!1,yt:!1,gt:!1,It:!1,Lt:!1,At:!1,Ot:!1,wt:!1},e),{},a),f=c||!s,p=f&&R(n),b=f&&B(n);l("",er,!0);let h=u;return i(d,e=>{h=rr(h,e(h,t,!!a)||{},a)}),R(n,p),B(n,b),l("",er),o||(R(r,0),B(r,0)),h}},rl=(t,e,r)=>{let n,l=!1,o=()=>{l=!0},a=o=>{if(r){let a=r.reduce((e,r)=>{if(r){let[n,l]=r,i=l&&n&&(o?o(n):X(n,t));i&&i.length&&l&&v(l)&&$(e,[i,l.trim()],!0)}return e},[]);i(a,r=>i(r[0],i=>{let o=r[1],a=n.get(i)||[],u=t.contains(i);if(u){let s=tV(i,o,t=>{l?(s(),n.delete(i)):e(t)});n.set(i,$(a,s))}else C(a),n.delete(i)}))}};return r&&(n=new WeakMap,a()),[o,a]},ri=(t,e,r,n)=>{let l=!1,{Ht:o,Mt:a,Pt:u,Dt:s,Rt:c,kt:d}=n||{},f=tS(()=>{l&&r(!0)},{g:33,v:99}),[p,b]=rl(t,f,u),h=a||[],y=(o||[]).concat(h),g=(l,o)=>{let a=c||tO,u=d||tO,f=new Set,p=new Set,y=!1,g=!1;if(i(l,r=>{let{attributeName:l,target:o,type:c,oldValue:d,addedNodes:b,removedNodes:m}=r,w="attributes"===c,x=t===o,O=w&&v(l)?I(o,l):0,_=0!==O&&d!==O,S=j(h,l)>-1&&_;if(e&&("childList"===c||!x)){let $=w&&_,E=$&&s&&F(o,s),P=E?!a(o,l,d,O):!w||$,C=P&&!u(r,!!E,t,n);i(b,t=>f.add(t)),i(m,t=>f.add(t)),g=g||C}!e&&x&&_&&!a(o,l,d,O)&&(p.add(l),y=y||S)}),f.size>0&&b(t=>E(f).reduce((e,r)=>($(e,X(t,r)),F(r,t)?$(e,r):e),[])),e)return!o&&g&&r(!1),[!1];if(p.size>0||y){let m=[E(p),y];return o||r.apply(0,m),m}},m=new tc(t=>g(t));return m.observe(t,{attributes:!0,attributeOldValue:!0,attributeFilter:y,subtree:e,childList:e,characterData:e}),l=!0,[()=>{l&&(p(),m.disconnect(),l=!1)},()=>{if(l){f.m();let t=m.takeRecords();return!P(t)&&g(t,!0)}}]},ro=t=>t&&(t.height||t.width),ra=(t,e,r)=>{let{Vt:n=!1,Bt:l=!1}=r||{},i=e$().__osSizeObserverPlugin,{V:o}=eZ(),u=te(`
`),s=u[0],c=s.firstChild,d=tz.bind(0,t),[f]=a({o:void 0,_:!0,u:(t,e)=>!(!t||!ro(t)&&ro(e))}),p=t=>{let r=m(t)&&t.length>0&&w(t[0]),l=!r&&y(t[0]),i=!1,a=!1,u=!0;if(r){let[c,,d]=f(t.pop().contentRect),p=ro(c),b=ro(d);i=!d||!p,a=!b&&p,u=!i}else l?[,u]=t:a=!0===t;if(n&&u){let h=l?t[0]:tz(s);R(s,h?o.n?-3333333:o.i?0:3333333:3333333),B(s,3333333)}i||e({vt:!l,Yt:l?t:void 0,Bt:!!a})},b=[],h=!!l&&p;return[()=>{C(b),Q(s)},()=>{if(tf){let e=new tf(p);e.observe(c),$(b,()=>{e.disconnect()})}else if(i){let[r,o]=i.O(c,p,l);h=r,$(b,o)}if(n){let[u]=a({o:!d()},d);$(b,tV(s,"scroll",t=>{let e=u(),[r,n]=e;n&&(tC(c,"ltr rtl"),r?tk(c,"rtl"):tk(c,"ltr"),p(e)),tW(t)}))}h&&(tk(s,eu),$(b,tV(s,"animationstart",h,{C:!!tf}))),(tf||i)&&W(t,s)}]},ru=t=>0===t.h||t.isIntersecting||t.intersectionRatio>0,rs=(t,e)=>{let r,n=tt("os-trinsic-observer"),l=[],[i]=a({o:!1}),o=(t,r)=>{if(t){let n=i(ru(t)),[,l]=n;if(l)return r||e(n),[n]}},u=(t,e)=>{if(t&&t.length>0)return o(t.pop(),e)};return[()=>{C(l),Q(n)},()=>{if(td)(r=new td(t=>u(t),{root:t})).observe(n),$(l,()=>{r.disconnect()});else{let e=()=>{let t=tB(n);o(t)},[i,a]=ra(n,e);$(l,i),a(),e()}W(t,n)},()=>{if(r)return u(r.takeRecords(),!0)}]},rc=`[${t9}]`,rd=`.${en}`,rf=["tabindex"],rp=["wrap","cols","rows"],rb=["id","class","style","open"],rh=(t,e,r)=>{let n,l,o,{Z:u,J:s,tt:c,rt:d,ut:f,ft:p,_t:b}=t,{B:y}=eZ(),[w]=a({u:tg,o:{w:0,h:0}},()=>{let t=p(eo,ee),e=p(el,""),r=e&&R(s),n=e&&B(s);b(eo,ee),b(el,""),b("",er,!0);let l=tX(c),i=tX(s),o=tD(s);return b(eo,ee,t),b(el,"",e),b("",er),R(s,r),B(s,n),{w:i.w+l.w+o.w,h:i.h+l.h+o.h}}),x=d?rp:rb.concat(rp),O=tS(r,{g:()=>n,v:()=>l,p(t,e){let[r]=t,[n]=e;return[T(r).concat(T(n)).reduce((t,e)=>(t[e]=r[e]||n[e],t),{})]}}),_=t=>{i(t||rf,t=>{if(j(rf,t)>-1){let e=I(u,t);v(e)?I(s,t,e):Z(s,t)}})},S=(t,n)=>{let[l,i]=t,o={gt:i};return e({ht:l}),n||r(o),o},E=({vt:t,Yt:n,Bt:l})=>{let i=!1;if(n){let[o,a]=n;i=a,e({bt:o})}(!t||l?r:O)({vt:t,yt:i})},P=(t,e)=>{let[,n]=w(),l={wt:n};return n&&(e||(t?r:O)(l)),l},C=(t,e,r)=>{let n={Ot:e};return e?r||O(n):f||_(t),n},[k,L,M]=c||!y?rs(u,S):[tO,tO,tO],[z,N]=f?[tO,tO]:ra(u,E,{Bt:!0,Vt:!0}),[H,X]=ri(u,!1,C,{Mt:rb,Ht:rb.concat(rf)}),D=f&&tf&&new tf(E.bind(0,{vt:!0}));return D&&D.observe(u),_(),[()=>{k(),z(),o&&o[0](),D&&D.disconnect(),H()},()=>{N(),L()},()=>{let t={},e=X(),r=M(),n=o&&o[1]();return e&&A(t,C.apply(0,$(e,!0))),r&&A(t,S.apply(0,$(r,!0))),n&&A(t,P.apply(0,$(n,!0))),t},t=>{let[e]=t("update.ignoreMutation"),[r,i]=t("update.attributes"),[a,u]=t("update.elementEvents"),[d,p]=t("update.debounce"),b=t=>g(e)&&e(t);if((u||i)&&(o&&(o[1](),o[0]()),o=ri(c||s,!0,P,{Ht:x.concat(r||[]),Pt:a,Dt:rc,kt(t,e){let{target:r,attributeName:n}=t,l=!e&&!!n&&!f&&J(r,rc,rd);return l||!!q(r,`.${ec}`)||!!b(t)}})),p){if(O.m(),m(d)){let v=d[0],y=d[1];n=h(v)&&v,l=h(y)&&y}else h(d)?(n=d,l=!1):(n=!1,l=!1)}}]},rv={x:0,y:0},ry={K:{t:0,r:0,b:0,l:0},St:!1,M:{marginRight:0,marginBottom:0,marginLeft:0,paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0},zt:rv,Tt:rv,Ct:{x:"hidden",y:"hidden"},Et:{x:!1,y:!1},ht:!1,bt:!1},rg=(t,e)=>{let r=eJ(e,{}),n=eV(ry),[l,i,o]=t1(),[a,u]=n,[s,c,d]=eQ(t),f=rn(s,n),p=(t,e,r)=>{let n=T(t).some(e=>t[e]),l=n||!L(e)||r;return l&&o("u",[t,e,r]),l},[b,h,v,y]=rh(s,u,t=>p(f(r,t),{},!1)),g=a.bind(0);return g.jt=t=>l("u",t),g.qt=()=>{let{W:t,J:e}=s,r=R(t),n=B(t);h(),c(),R(e,r),B(e,n)},g.Nt=s,[(t,r)=>{let n=eJ(e,t,r);return y(n),p(f(n,v(),r),t,!!r)},g,()=>{i(),b(),d()}]},{round:rm}=Math,rw=t=>{let{width:e,height:r}=tF(t),{w:n,h:l}=tB(t);return{x:rm(e)/n||1,y:rm(r)/l||1}},rx=(t,e,r)=>{let n=e.scrollbars,{button:l,isPrimary:i,pointerType:o}=t,{pointers:a}=n;return 0===l&&i&&n[r?"dragScroll":"clickScroll"]&&(a||[]).includes(o)},rO=(t,e)=>tV(t,"mousedown",tV.bind(0,e,"click",tW,{C:!0,$:!0}),{$:!0}),r_=(t,e,r,n,l,i)=>{let{V:o}=eZ(),{Ft:a,Gt:u,Xt:s}=r,c=`scroll${i?"Left":"Top"}`,d=`client${i?"X":"Y"}`,f=i?"width":"height",p=i?"left":"top",b=i?"w":"h",h=i?"x":"y",v=(t,e)=>r=>{let{Tt:d}=l(),f=tB(u)[b]-tB(a)[b],p=e*r/f*d[h],v=tz(s),y=v&&i?o.n||o.i?1:-1:1;n[c]=t+p*y};return tV(u,"pointerdown",r=>{let l=q(r.target,`.${eh}`)===a;if(rx(r,t,l)){let i=!l&&r.shiftKey,o=()=>tF(a),s=()=>tF(u),b=(t,e)=>(t||o())[p]-(e||s())[p],y=v(n[c]||0,1/rw(n)[h]),g=r[d],m=o(),w=s(),x=m[f],O=b(m,w)+x/2,_=g-w[p],S=l?0:_-O,j=[tV(e,"selectstart",t=>tG(t),{S:!1}),tV(u,"pointermove",t=>{let e=t[d]-g;(l||i)&&y(S+e)})];if(i)y(S);else if(!l){let E=e$().__osClickScrollPlugin;E&&$(j,E.O(y,b,S,x,_))}tV(u,"pointerup",t=>{C(j),u.releasePointerCapture(t.pointerId)},{C:!0}),u.setPointerCapture(r.pointerId)}})},rS=(t,e)=>(r,n,l,i,o,a)=>{let{Xt:u}=r,[s,c]=t_(333),d=!!o.scrollBy,f=!0;return C.bind(0,[tV(u,"pointerenter",()=>{n(em,!0)}),tV(u,"pointerleave pointercancel",()=>{n(em)}),tV(u,"wheel",t=>{let{deltaX:e,deltaY:r,deltaMode:l}=t;d&&f&&0===l&&K(u)===i&&o.scrollBy({left:e,top:r,behavior:"smooth"}),f=!1,n(eO,!0),s(()=>{f=!0,n(eO)}),tG(t)},{S:!1,$:!0}),rO(u,l),r_(t,l,r,o,e,a),c])},{min:rj,max:r$,abs:rE,round:rP}=Math,rC=(t,e,r,n)=>{if(n){let l=r?"x":"y",{Tt:i,zt:o}=n,a=o[l],u=i[l];return r$(0,rj(1,a/(a+u)))}let s=r?"w":"h",c=tB(t)[s],d=tB(e)[s];return r$(0,rj(1,c/d))},rk=(t,e,r,n,l,i)=>{let{V:o}=eZ(),{Tt:a}=n,u=rP(a[i?"x":"y"]),s=rE(r[`scroll${i?"Left":"Top"}`]),c=o.i?s:u-s,d=rj(1,(i&&l?c:s)/u),f=rC(t,e,i);return 1/f*(1-f)*d},rT=(t,e,r)=>{let{q:n}=eZ(),{scrollbars:l}=n(),{slot:a}=l,{ct:u,W:s,Z:c,J:d,lt:f,ot:p}=e,{scrollbars:b}=f?{}:t,{slot:h}=b||{},v=eH([s,c,d],()=>c,a,h),g=(t,e,r)=>{let n=r?tk:tC;i(t,t=>{n(t.Xt,e)})},m=(t,e)=>{i(t,t=>{let[r,n]=e(t);o(r,n)})},w=(t,e,r)=>{m(t,t=>{let{Ft:n,Gt:l}=t;return[n,{[r?"width":"height"]:`${(100*rC(n,l,r,e)).toFixed(3)}%`}]})},x=(t,e,r)=>{let n=r?"X":"Y";m(t,t=>{let{Ft:l,Gt:i,Xt:o}=t,a=rk(l,i,p,e,tz(o),r);return[l,{transform:a==a?`translate${n}(${(100*a).toFixed(3)}%)`:""}]})},O=[],_=[],S=[],j=(t,e,r)=>{let n=y(r);(!n||r)&&g(_,t,e),n&&r||g(S,t,e)},E=t=>{w(_,t,!0),w(S,t)},k=t=>{x(_,t,!0),x(S,t)},T=t=>{let e=t?_:S,n=P(e)?eg:"",l=tt(`${ec} ${t?ef:ep} ${n}`),i=tt(eb),o=tt(eh),a={Xt:l,Gt:i,Ft:o};return W(l,i),W(i,o),$(e,a),$(O,[Q.bind(0,l),r(a,j,u,c,p,t)]),a},A=T.bind(0,!0),L=T.bind(0,!1),M=()=>{W(v,_[0].Xt),W(v,S[0].Xt),th(()=>{j(eg)},300)};return A(),L(),[{Ut:E,Wt:k,Zt:j,Jt:{Kt:_,Qt:A,tn:m.bind(0,_)},nn:{Kt:S,Qt:L,tn:m.bind(0,S)}},M,C.bind(0,O)]},rA=(t,e,r,n)=>{let l,i,o,a,u,s=0,c=eV({}),[d]=c,[f,p]=t_(),[b,h]=t_(),[v,y]=t_(100),[g,m]=t_(100),[w,x]=t_(()=>s),[O,_,S]=rT(t,r.Nt,rS(e,r)),{Z:j,J:$,ot:E,st:P,ut:k,it:T}=r.Nt,{Jt:A,nn:L,Zt:M,Ut:I,Wt:z}=O,{tn:N}=A,{tn:Z}=L,H=t=>{let{Xt:e}=t,r=k&&!T&&K(e)===$&&e;return[r,{transform:r?`translate(${R(E)}px, ${B(E)}px)`:""}]},X=(t,e)=>{if(x(),t)M(ex);else{let r=()=>M(ex,!0);s>0&&!e?w(r):r()}},D=()=>{(a=i)&&X(!0)},F=[y,x,m,h,p,S,tV(j,"pointerover",D,{C:!0}),tV(j,"pointerenter",D),tV(j,"pointerleave",()=>{a=!1,i&&X(!1)}),tV(j,"pointermove",()=>{l&&f(()=>{y(),X(!0),g(()=>{l&&X(!1)})})}),tV(P,"scroll",t=>{b(()=>{z(r()),o&&X(!0),v(()=>{o&&!a&&X(!1)})}),n(t),k&&N(H),k&&Z(H)})],Y=d.bind(0);return Y.Nt=O,Y.qt=_,[(t,n,a)=>{let{It:c,Lt:d,At:f,yt:p}=a,b=eJ(e,t,n),h=r(),{Tt:v,Ct:y,bt:g}=h,[m,w]=b("scrollbars.theme"),[x,O]=b("scrollbars.visibility"),[_,S]=b("scrollbars.autoHide"),[j]=b("scrollbars.autoHideDelay"),[$,E]=b("scrollbars.dragScroll"),[P,C]=b("scrollbars.clickScroll"),k=(t,e)=>{let r="visible"===x||"auto"===x&&"scroll"===t;return M(ev,r,e),r};if(s=j,w&&(M(u),M(m,!0),u=m),S&&(l="move"===_,i="leave"===_,X(!(o="never"!==_),!0)),E&&M(eS,$),C&&M(e_,P),f||O||n){let A=k(y.x,!0),L=k(y.y,!1);M(ey,!(A&&L))}(c||d||p||n)&&(I(h),z(h),M(ew,!v.x,!0),M(ew,!v.y,!1),M(ed,g&&!T))},Y,C.bind(0,F)]},rL=(t,e,r)=>{g(t)&&t(e||void 0,r||void 0)},rM=(t,e,r)=>{let{F:n,q:l,Y:o,j:a}=eZ(),u=e$(),s=_(t),c=s?t:t.target,d=eK(c);if(e&&!d){let f=!1,p=t=>{let e=e$().__osOptionsValidationPlugin,r=e&&e.O;return r?r(t,!0):t},b=A({},n(),p(e)),[h,v,y]=t1(r),[g,m,w]=rg(t,b),[x,O,S]=rA(t,b,m,t=>y("scroll",[k,t])),j=(t,e)=>g(t,!!e),$=j.bind(0,{},!0),E=o($),P=a($),C=t=>{eY(c),E(),P(),S(),w(),f=!0,y("destroyed",[k,!!t]),v()},k={options(t,e){if(t){let r=e?n():{},l=t8(b,A(r,p(t)));L(l)||(A(b,l),j(l))}return A({},b)},on:h,off(t,e){t&&e&&v(t,e)},state(){let{zt:t,Tt:e,Ct:r,Et:n,K:l,St:i,bt:o}=m();return A({},{overflowEdge:t,overflowAmount:e,overflowStyle:r,hasOverflow:n,padding:l,paddingAbsolute:i,directionRTL:o,destroyed:f})},elements(){let{W:t,Z:e,K:r,J:n,tt:l,ot:i,st:o}=m.Nt,{Jt:a,nn:u}=O.Nt,s=t=>{let{Ft:e,Gt:r,Xt:n}=t;return{scrollbar:n,track:r,handle:e}},c=t=>{let{Kt:e,Qt:r}=t,n=s(e[0]);return A({},n,{clone(){let t=s(r());return x({},!0,{}),t}})};return A({},{target:t,host:e,padding:r||n,viewport:n,content:l||n,scrollOffsetElement:i,scrollEventElement:o,scrollbarHorizontal:c(a),scrollbarVertical:c(u)})},update:t=>j({},t),destroy:C.bind(0)};return(m.jt((t,e,r)=>{x(e,r,t)}),eF(c,k),i(T(u),t=>rL(u[t],0,k)),eX(m.Nt.it,l().cancel,!s&&t.cancel))?(C(!0),k):(m.qt(),O.qt(),y("initialized",[k]),m.jt((t,e,r)=>{let{vt:n,yt:l,gt:i,It:o,Lt:a,At:u,wt:s,Ot:c}=t;y("updated",[k,{updateHints:{sizeChanged:n,directionChanged:l,heightIntrinsicChanged:i,overflowEdgeChanged:o,overflowAmountChanged:a,overflowStyleChanged:u,contentMutation:s,hostMutation:c},changedOptions:e,force:r}])}),k.update(!0),k)}return d};rM.plugin=t=>{i(eE(t),t=>rL(t,rM))},rM.valid=t=>{let e=t&&t.elements,r=g(e)&&e();return O(r)&&!!eK(r.target)},rM.env=()=>{let{k:t,I:e,A:r,V:n,B:l,L:i,X:o,U:a,q:u,N:s,F:c,G:d}=eZ();return A({},{scrollbarsSize:t,scrollbarsOverlaid:e,scrollbarsHiding:r,rtlScrollBehavior:n,flexboxGlue:l,cssCustomProperties:i,staticDefaultInitialization:o,staticDefaultOptions:a,getDefaultInitialization:u,setDefaultInitialization:s,getDefaultOptions:c,setDefaultOptions:d})};let rI=t=>{let{options:e,events:r}=t||{},n=(0,l.useRef)(null),i=(0,l.useRef)(e),o=(0,l.useRef)(r);return(0,l.useEffect)(()=>{let{current:t}=n;i.current=e,rM.valid(t)&&t.options(e||{},!0)},[e]),(0,l.useEffect)(()=>{let{current:t}=n;o.current=r,rM.valid(t)&&t.on(r||{},!0)},[r]),(0,l.useMemo)(()=>[t=>{let e=n.current;if(rM.valid(e))return e;let r=i.current||{},l=o.current||{};return n.current=rM(t,r,l)},()=>n.current],[])},rz=(t,e)=>{let{element:r="div",options:n,events:i,children:o,...a}=t,u=(0,l.useRef)(null),s=(0,l.useRef)(null),[c,d]=rI({options:n,events:i});return(0,l.useEffect)(()=>{let{current:t}=u,{current:e}=s;if(t&&e){let r=c({target:t,elements:{viewport:e,content:e}});return()=>r.destroy()}},[c,r]),(0,l.useImperativeHandle)(e,()=>({osInstance:d,getElement:()=>u.current}),[]),l.createElement(r,{"data-overlayscrollbars-initialize":"",ref:u,...a},l.createElement("div",{ref:s},o))};(0,l.forwardRef)(rz);var rN=function(t){var e;if(window.requestIdleCallback){var r=t?window.requestIdleCallback:window.requestAnimationFrame,n=t?window.cancelIdleCallback:window.cancelAnimationFrame;return[function(t,l){n(e),e=r(t,l)},function(){return n(e)}]}return[function(t){return t()},function(){}]},rZ=function(t){var e=(0,n.Z)((0,l.useMemo)(function(){return rN(!0)},[]),2),r=e[0],i=e[1],o=(0,n.Z)((0,l.useMemo)(function(){return rN()},[]),2),a=o[0],u=o[1],s=(0,n.Z)(rI(t),2),c=s[0],d=s[1];return(0,l.useEffect)(function(){return function(){var t;u(),i(),null===(t=d())||void 0===t||t.destroy()}},[]),(0,l.useMemo)(function(){return[function(t){r(function(){a(function(){c(t)})},{timeout:2e3})},d]},[c,d])}},8475:function(t,e,r){"use strict";r.r(e),r.d(e,{default:function(){return y}});var n=r(9722),l=r(169),i=r(1809),o=r(4732),a=r(7378),u=r(4246),s=function(t){var e=t.children,r=(0,a.useRef)(null),n=(0,i.Z)((0,o.a)({options:{paddingAbsolute:!0,scrollbars:{autoHide:"leave"}}}),2),l=n[0],s=n[1];return(0,a.useEffect)(function(){if(r.current)return l(r.current),function(){var t;return null===(t=s())||void 0===t?void 0:t.destroy()}},[]),(0,u.jsx)("pre",{ref:r,"data-overlayscrollbars-initialize":!0,children:e})},c=r(1373),d=function(t){var e=t.id,r=t.tag,l=(0,c.Z)(t,["id","tag"]);return e?(0,u.jsx)(u.Fragment,{children:(0,u.jsx)(r,(0,n.Z)({},l))}):(0,u.jsx)(r,(0,n.Z)({},l))};r(2586),r(2431),r(5532);var f=r(8038),p=r.n(f),b=r(1670),h={src:"/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico",height:256,width:256},v=function(t,e){return(0,u.jsx)(d,(0,l.Z)((0,n.Z)({},t),{tag:e}))},y=function(t){var e=t.Component,r=t.pageProps,l=(0,i.Z)((0,o.a)(),2),c=l[0],d=l[1];return(0,a.useEffect)(function(){return c(document.body),function(){var t;return null===(t=d())||void 0===t?void 0:t.destroy()}},[]),(0,u.jsx)(b.Zo,{components:{h1:function(t){return v(t,"h1")},h2:function(t){return v(t,"h2")},h3:function(t){return v(t,"h3")},h4:function(t){return v(t,"h4")},h5:function(t){return v(t,"h5")},h6:function(t){return v(t,"h6")},pre:s},children:(0,u.jsxs)("div",{className:"font-sans font-normal text-primary-dark",children:[(0,u.jsxs)(p(),{children:[(0,u.jsx)("title",{children:"OverlayScrollbars"},"title"),(0,u.jsx)("meta",{name:"description",content:"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."},"description"),(0,u.jsx)("link",{rel:"icon",href:h.src}),(0,u.jsx)("link",{rel:"shortcut icon",type:"image/x-icon",href:h.src}),(0,u.jsx)("meta",{httpEquiv:"X-UA-Compatible",content:"IE=edge"}),(0,u.jsx)("meta",{name:"theme-color",content:"#36befd"}),(0,u.jsx)("meta",{name:"msapplication-TileColor",content:"#36befd"}),(0,u.jsx)("meta",{name:"msapplication-navbutton-color",content:"#36befd"}),(0,u.jsx)("meta",{name:"application-name",content:"OverlayScrollbars"}),(0,u.jsx)("meta",{name:"msapplication-tooltip",content:"OverlayScrollbars"}),(0,u.jsx)("meta",{name:"apple-mobile-web-app-title",content:"OverlayScrollbars"}),(0,u.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify({"@context":"http://schema.org","@type":"SoftwareSourceCode",url:"https://kingsora.github.io/OverlayScrollbars",name:"OverlayScrollbars",description:"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.",license:"https://en.wikipedia.org/wiki/MIT_License",keywords:"js,javascript,typescript,overlayscrollbars,overlay,scrollbars,custom,scrollbar,plugin,react,vue,angular,treeshaking",isAccessibleForFree:!0,image:"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/logo/logo.png",codeRepository:"https://github.com/KingSora/OverlayScrollbars",runtimePlatform:"browser",maintainer:{"@type":"Person",name:"Rene Haas",additionalName:"KingSora",url:"https://github.com/KingSora"},programmingLanguage:{"@type":"ComputerLanguage",name:"javascript",alternateName:"js"}})}})]}),(0,u.jsx)(e,(0,n.Z)({},r))]})})}},5532:function(){},2431:function(){},2586:function(){},8038:function(t,e,r){t.exports=r(555)},1670:function(t,e,r){"use strict";r.d(e,{Zo:function(){return a},ah:function(){return i}});var n=r(7378);let l=n.createContext({});function i(t){let e=n.useContext(l);return n.useMemo(()=>"function"==typeof t?t(e):{...e,...t},[e,t])}let o={};function a({components:t,children:e,disableParentContext:r}){let a=i(t);return r&&(a=t||o),n.createElement(l.Provider,{value:a},e)}},9722:function(t,e,r){"use strict";function n(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function l(t){for(var e=1;e=0||(l[r]=t[r]);return l}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n=0)&&Object.prototype.propertyIsEnumerable.call(t,r)&&(l[r]=t[r])}return l}r.d(e,{Z:function(){return n}})},1809:function(t,e,r){"use strict";function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=Array(e);rt.length)&&(e=t.length);for(var r=0,n=Array(e);re(t[r],r,t));return t}function o(t,e){let r=h(e),n=v(e)||r;if(n){let o=r?"":{};if(t){let i=window.getComputedStyle(t,null);o=r?tL(t,i,e):e.reduce((e,r)=>(e[r]=tL(t,i,r),e),o)}return o}t&&l(k(e),r=>tM(t,r,e[r]))}let i=(t,e)=>{let{o:r,u:n,_:l}=t,o=r,i,a=(t,e)=>{let r=o,a=e||(n?!n(r,t):r!==t);return(a||l)&&(o=t,i=r),[o,a,i]},u=t=>a(e(o,i),t),s=t=>[o,!!t,i];return[e?u:a,s]},a=()=>"undefined"!=typeof window,u=a()&&Node.ELEMENT_NODE,{toString:s,hasOwnProperty:c}=Object.prototype,d=t=>void 0===t,f=t=>null===t,p=t=>d(t)||f(t)?`${t}`:s.call(t).replace(/^\[object (.+)\]$/,"$1").toLowerCase(),b=t=>"number"==typeof t,h=t=>"string"==typeof t,y=t=>"boolean"==typeof t,g=t=>"function"==typeof t,v=t=>Array.isArray(t),m=t=>"object"==typeof t&&!v(t)&&!f(t),w=t=>{let e=!!t&&t.length,r=b(e)&&e>-1&&e%1==0;return(!!v(t)||!g(t)&&!!r)&&(!(e>0&&m(t))||e-1 in t)},x=t=>{if(!t||!m(t)||"object"!==p(t))return!1;let e,r="constructor",n=t[r],l=n&&n.prototype,o=c.call(t,r),i=l&&c.call(l,"isPrototypeOf");if(n&&!o&&!i)return!1;for(e in t);return d(e)||c.call(t,e)},O=t=>{let e=HTMLElement;return!!t&&(e?t instanceof e:t.nodeType===u)},_=t=>{let e=Element;return!!t&&(e?t instanceof e:t.nodeType===u)},S=(t,e,r)=>t.indexOf(e,r),j=(t,e,r)=>(!r&&!h(e)&&w(e)?Array.prototype.push.apply(t,e):t.push(e),t),$=t=>{let e=Array.from,r=[];return e&&t?e(t):(t instanceof Set?t.forEach(t=>{j(r,t)}):l(t,t=>{j(r,t)}),r)},E=t=>!!t&&0===t.length,P=(t,e,r)=>{let n=t=>t&&t.apply(void 0,e||[]);l(t,n),r||(t.length=0)},C=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),k=t=>t?Object.keys(t):[],A=(t,e,r,n,o,i,a)=>(("object"!=typeof t||f(t))&&!g(t)&&(t={}),l([e,r,n,o,i,a],e=>{l(k(e),r=>{let n=e[r];if(t===n)return!0;let l=v(n);if(n&&(x(n)||l)){let o=t[r],i=o;l&&!v(o)?i=[]:l||x(o)||(i={}),t[r]=A(i,n)}else t[r]=n})}),t),T=t=>{for(let e in t)return!1;return!0},L=(t,e,r,n)=>{if(d(n))return r?r[t]:e;r&&(h(n)||b(n))&&(r[t]=n)},M=(t,e,r)=>{if(d(r))return t?t.getAttribute(e):null;t&&t.setAttribute(e,r)},I=(t,e,r,n)=>{if(r){let l=M(t,e)||"",o=new Set(l.split(" "));o[n?"add":"delete"](r),M(t,e,$(o).join(" ").trim())}},N=(t,e,r)=>{let n=M(t,e)||"",l=new Set(n.split(" "));return l.has(r)},z=(t,e)=>{t&&t.removeAttribute(e)},R=(t,e)=>L("scrollLeft",0,t,e),B=(t,e)=>L("scrollTop",0,t,e),H=a()&&Element.prototype,X=(t,e)=>{let r=[],n=e?_(e)?e:null:document;return n?j(r,n.querySelectorAll(t)):r},D=(t,e)=>{let r=e?_(e)?e:null:document;return r?r.querySelector(t):null},F=(t,e)=>{if(_(t)){let r=H.matches||H.msMatchesSelector;return r.call(t,e)}return!1},Z=t=>t?$(t.childNodes):[],Y=t=>t?t.parentElement:null,K=(t,e)=>{if(_(t)){let r=H.closest;if(r)return r.call(t,e);do{if(F(t,e))return t;t=Y(t)}while(t)}return null},q=(t,e,r)=>{let n=t&&K(t,e),l=t&&D(r,n),o=K(l,e)===n;return!!n&&!!l&&(n===t||l===t||o&&K(K(t,r),e)!==n)},J=(t,e,r)=>{if(r&&t){let n=e,o;w(r)?(o=document.createDocumentFragment(),l(r,t=>{t===n&&(n=t.previousSibling),o.appendChild(t)})):o=r,e&&(n?n!==e&&(n=n.nextSibling):n=t.firstChild),t.insertBefore(o,n||null)}},V=(t,e)=>{J(t,null,e)},W=(t,e)=>{J(Y(t),t,e)},G=(t,e)=>{J(Y(t),t&&t.nextSibling,e)},U=t=>{if(w(t))l($(t),t=>U(t));else if(t){let e=Y(t);e&&e.removeChild(t)}},Q=t=>{let e=document.createElement("div");return t&&M(e,"class",t),e},tt=t=>{let e=Q();return e.innerHTML=t.trim(),l(Z(e),t=>U(t))},te=t=>t.charAt(0).toUpperCase()+t.slice(1),tr=()=>Q().style,tn=["-webkit-","-moz-","-o-","-ms-"],tl=["WebKit","Moz","O","MS","webkit","moz","o","ms"],to={},ti={},ta=t=>{let e=ti[t];if(C(ti,t))return e;let r=te(t),n=tr();return l(tn,l=>{let o=l.replace(/-/g,""),i=[t,l+t,o+r,te(o)+r];return!(e=i.find(t=>void 0!==n[t]))}),ti[t]=e||""},tu=t=>{if(a()){let e=to[t]||window[t];return C(to,t)||(l(tl,r=>!(e=e||window[r+te(t)])),to[t]=e),e}},ts=tu("MutationObserver"),tc=tu("IntersectionObserver"),td=tu("ResizeObserver"),tf=tu("cancelAnimationFrame"),tp=tu("requestAnimationFrame"),tb=a()&&window.setTimeout,th=a()&&window.clearTimeout,ty=(t,e,r,n)=>{if(t&&e){let o=!0;return l(r,r=>{let l=n?n(t[r]):t[r],i=n?n(e[r]):e[r];l!==i&&(o=!1)}),o}return!1},tg=(t,e)=>ty(t,e,["w","h"]),tv=(t,e)=>ty(t,e,["x","y"]),tm=(t,e)=>ty(t,e,["t","r","b","l"]),tw=(t,e,r)=>ty(t,e,["width","height"],r&&(t=>Math.round(t))),tx=()=>{},tO=t=>{let e,r=t?tb:tp,n=t?th:tf;return[l=>{n(e),e=r(l,g(t)?t():t)},()=>n(e)]},t_=(t,e)=>{let r,n,l,o=tx,{g:i,v:a,p:u}=e||{},s=function(e){o(),th(r),r=n=void 0,o=tx,t.apply(this,e)},c=t=>u&&n?u(n,t):t,d=()=>{o!==tx&&s(c(l)||l)},f=function(){let t=$(arguments),e=g(i)?i():i,u=b(e)&&e>=0;if(u){let f=g(a)?a():a,p=b(f)&&f>=0,h=e>0?th:tf,y=c(t),v=y||t,m=s.bind(0,v);o();let w=(e>0?tb:tp)(m,e);o=()=>h(w),p&&!r&&(r=tb(d,f)),n=l=v}else s(t)};return f.m=d,f},{max:tS}=Math,tj=/[^\x20\t\r\n\f]+/g,t$=(t,e,r)=>{let n=t&&t.classList,l,o=0,i=!1;if(n&&e&&h(e)){let a=e.match(tj)||[];for(i=a.length>0;l=a[o++];)i=!!r(n,l)&&i}return i},tE=(t,e)=>t$(t,e,(t,e)=>t.contains(e)),tP=(t,e)=>{t$(t,e,(t,e)=>t.remove(e))},tC=(t,e)=>(t$(t,e,(t,e)=>t.add(e)),tP.bind(0,t,e)),tk={opacity:1,zindex:1},tA=(t,e)=>{let r=e?parseFloat(t):parseInt(t,10);return r==r?r:0},tT=(t,e)=>!tk[t.toLowerCase()]&&b(e)?`${e}px`:e,tL=(t,e,r)=>null!=e?e[r]||e.getPropertyValue(r):t.style[r],tM=(t,e,r)=>{try{let{style:n}=t;d(n[e])?n.setProperty(e,r):n[e]=tT(e,r)}catch(l){}},tI=t=>"rtl"===o(t,"direction"),tN=(t,e,r)=>{let n=e?`${e}-`:"",l=r?`-${r}`:"",i=`${n}top${l}`,a=`${n}right${l}`,u=`${n}bottom${l}`,s=`${n}left${l}`,c=o(t,[i,a,u,s]);return{t:tA(c[i],!0),r:tA(c[a],!0),b:tA(c[u],!0),l:tA(c[s],!0)}},{round:tz}=Math,tR={w:0,h:0},tB=t=>t?{w:t.offsetWidth,h:t.offsetHeight}:tR,tH=t=>t?{w:t.clientWidth,h:t.clientHeight}:tR,tX=t=>t?{w:t.scrollWidth,h:t.scrollHeight}:tR,tD=t=>{let e=parseFloat(o(t,"height"))||0,r=parseFloat(o(t,"width"))||0;return{w:r-tz(r),h:e-tz(e)}},tF=t=>t.getBoundingClientRect(),tZ,tY=()=>{if(d(tZ)){tZ=!1;try{window.addEventListener("test",null,Object.defineProperty({},"passive",{get(){tZ=!0}}))}catch(t){}}return tZ},tK=t=>t.split(" "),tq=(t,e,r,n)=>{l(tK(e),e=>{t.removeEventListener(e,r,n)})},tJ=(t,e,r,n)=>{var o;let i=tY(),a=null!=(o=i&&n&&n.S)?o:i,u=n&&n.$||!1,s=n&&n.C||!1,c=[],d=i?{passive:a,capture:u}:u;return l(tK(e),e=>{let n=s?l=>{t.removeEventListener(e,n,u),r&&r(l)}:r;j(c,tq.bind(null,t,e,n,u)),t.addEventListener(e,n,d)}),P.bind(0,c)},tV=t=>t.stopPropagation(),tW=t=>t.preventDefault(),tG={x:0,y:0},tU=t=>{let e=t?tF(t):0;return e?{x:e.left+window.pageYOffset,y:e.top+window.pageXOffset}:tG},tQ=(t,e)=>{l(v(e)?e:[e],t)},t0=t=>{let e=new Map,r=(t,r)=>{if(t){let n=e.get(t);tQ(t=>{n&&n[t?"delete":"clear"](t)},r)}else e.forEach(t=>{t.clear()}),e.clear()},n=(t,o)=>{if(h(t)){let i=e.get(t)||new Set;return e.set(t,i),tQ(t=>{g(t)&&i.add(t)},o),r.bind(0,t,o)}y(o)&&o&&r();let a=k(t),u=[];return l(a,e=>{let r=t[e];r&&j(u,n(e,r))}),P.bind(0,u)},o=(t,r)=>{let n=e.get(t);l($(n),t=>{r&&!E(r)?t.apply(0,r):t()})};return n(t||{}),[n,r,o]},t1=t=>JSON.stringify(t,(t,e)=>{if(g(e))throw Error();return e}),t3={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,dragScroll:!0,clickScroll:!1,pointers:["mouse","touch","pen"]}},t2=(t,e)=>{let r={},n=k(e).concat(k(t));return l(n,n=>{let l=t[n],o=e[n];if(m(l)&&m(o))A(r[n]={},t2(l,o)),T(r[n])&&delete r[n];else if(C(e,n)&&o!==l){let i=!0;if(v(l)||v(o))try{t1(l)===t1(o)&&(i=!1)}catch(a){}i&&(r[n]=o)}}),r},t6="os-environment",t8=`${t6}-flexbox-glue`,t7=`${t8}-max`,t5="data-overlayscrollbars",t9=`${t5}-overflow-x`,t4=`${t5}-overflow-y`,et="overflowVisible",ee="updating",er="os-viewport",en=`${er}-arrange`,el=`${er}-scrollbar-hidden`,eo="os-overflow-visible",ei="os-size-observer",ea=`${ei}-appear`,eu=`${ei}-listener`,es="os-scrollbar",ec=`${es}-rtl`,ed=`${es}-horizontal`,ef=`${es}-vertical`,ep=`${es}-track`,eb=`${es}-handle`,eh=`${es}-visible`,ey=`${es}-cornerless`,eg=`${es}-transitionless`,ev=`${es}-interaction`,em=`${es}-unusable`,ew=`${es}-auto-hidden`,ex=`${es}-wheel`,eO=`${ep}-interactive`,e_=`${eb}-interactive`,eS={},ej=()=>eS,e$=t=>{let e=[];return l(v(t)?t:[t],t=>{let r=k(t);l(r,r=>{j(e,eS[r]=t[r])})}),e},eE={boolean:"__TPL_boolean_TYPE__",number:"__TPL_number_TYPE__",string:"__TPL_string_TYPE__",array:"__TPL_array_TYPE__",object:"__TPL_object_TYPE__",function:"__TPL_function_TYPE__",null:"__TPL_null_TYPE__"};eE.number,eE.boolean,eE.array,eE.null,eE.number,eE.array,eE.null,eE.function,eE.null,eE.string,eE.null,eE.array,eE.null;let{round:eP,abs:eC}=Math,ek="__osScrollbarsHidingPlugin",eA,eT=(t,e,r,n)=>{V(t,e);let l=tH(e),o=tB(e),i=tD(r);return n&&U(e),{x:o.h-l.h+i.h,y:o.w-l.w+i.w}},eL=t=>{let e=!1,r=tC(t,el);try{e="none"===o(t,ta("scrollbar-width"))||"none"===window.getComputedStyle(t,"::-webkit-scrollbar").getPropertyValue("display")}catch(n){}return r(),e},eM=(t,e)=>{let r="hidden";o(t,{overflowX:r,overflowY:r,direction:"rtl"}),R(t,0);let n=tU(t),l=tU(e);R(t,-999);let i=tU(e);return{i:n.x===l.x,n:l.x!==i.x}},eI=(t,e)=>{let r=tC(t,t8),n=tF(t),l=tF(e),o=tw(l,n,!0),i=tC(t,t7),a=tF(t),u=tF(e),s=tw(u,a,!0);return r(),i(),o&&s},eN=()=>{let{body:t}=document,e=tt(`
`),r=e[0],n=r.firstChild,[l,,a]=t0(),[u,s]=i({o:eT(t,r,n),u:tv},eT.bind(0,t,r,n,!0)),[c]=s(),d=eL(r),f={x:0===c.x,y:0===c.y},p={elements:{host:null,padding:!d,viewport:t=>d&&t===t.ownerDocument.body&&t,content:!1},scrollbars:{slot:!0},cancel:{nativeScrollbarsOverlaid:!1,body:null}},b=A({},t3),h=A.bind(0,{},b),y=A.bind(0,{},p),g={k:c,I:f,A:d,L:"-1"===o(r,"zIndex"),V:eM(r,n),B:eI(r,n),Y:l.bind(0,"z"),j:l.bind(0,"r"),q:y,N:t=>A(p,t)&&y(),F:h,G:t=>A(b,t)&&h(),X:A({},p),U:A({},b)},v=window.addEventListener,m=t_(t=>a(t?"z":"r"),{g:33,v:99});if(z(r,"style"),U(r),v("resize",m.bind(0,!1)),!d&&(!f.x||!f.y)){let w;v("resize",()=>{let t=ej()[ek];(w=w||t&&t.R())&&w(g,u,m.bind(0,!0))})}return g},ez=()=>(eA||(eA=eN()),eA),eR=(t,e)=>g(e)?e.apply(0,t):e,eB=(t,e,r,n)=>{let l=d(n)?r:n,o=eR(t,l);return o||e.apply(0,t)},eH=(t,e,r,n)=>{let l=d(n)?r:n,o=eR(t,l);return!!o&&(O(o)?o:e.apply(0,t))},eX=(t,e,r)=>{let{nativeScrollbarsOverlaid:n,body:l}=r||{},{I:o,A:i}=ez(),{nativeScrollbarsOverlaid:a,body:u}=e,s=d(l)?u:l,c=(o.x||o.y)&&(null!=n?n:a),p=t&&(f(s)?!i:s);return!!c||!!p},eD=new WeakMap,eF=(t,e)=>{eD.set(t,e)},eZ=t=>{eD.delete(t)},eY=t=>eD.get(t),eK=(t,e)=>t?e.split(".").reduce((t,e)=>t&&C(t,e)?t[e]:void 0,t):void 0,eq=(t,e,r)=>n=>[eK(t,n),r||void 0!==eK(e,n)],eJ=t=>{let e=t;return[()=>e,t=>{e=A({},e,t)}]},eV="tabindex",eW=Q.bind(0,""),eG=t=>{V(Y(t),Z(t)),U(t)},eU=t=>{let e=ez(),{q:r,A:n}=e,l=ej()[ek],o=l&&l.T,{elements:i}=r(),{host:a,padding:u,viewport:s,content:c}=i,d=O(t),f=d?{}:t,{elements:p}=f,{host:b,padding:h,viewport:y,content:g}=p||{},v=d?t:f.target,m=F(v,"textarea"),w=v.ownerDocument,x=w.documentElement,_=v===w.body,$=w.defaultView,E=eB.bind(0,[v]),C=eH.bind(0,[v]),A=eR.bind(0,[v]),T=E.bind(0,eW,s),L=C.bind(0,eW,c),R=T(y),B=R===v,H=B&&_,X=!B&&L(g),D=!B&&O(R)&&R===X,K=D&&!!A(c),q=K?T():R,J=K?X:L(),Q=D?q:R,tt=w.activeElement,te=!B&&$.top===$&&tt===v,tr={W:v,Z:m?E(eW,a,b):v,J:Q,K:!B&&C(eW,u,h),tt:D?J:X,nt:!B&&!n&&o&&o(e),ot:H?x:Q,st:H?w:Q,et:$,ct:w,rt:m,it:_,lt:d,ut:B,dt:D,ft:(t,e)=>B?N(Q,t5,e):tE(Q,t),_t:(t,e,r)=>B?I(Q,t5,e,r):(r?tC:tP)(Q,t)},tn=k(tr).reduce((t,e)=>{let r=tr[e];return j(t,!!r&&!Y(r)&&r)},[]),tl=t=>t?S(tn,t)>-1:null,{W:to,Z:ti,K:ta,J:tu,tt:ts,nt:tc}=tr,td=[()=>{z(ti,t5),_&&z(x,t5)}],tf=m&&tl(ti),tp=m?to:Z([ts,tu,ta,ti,to].find(t=>!1===tl(t))),tb=ts||tu,th=()=>{M(ti,t5,B?"viewport":"host");let t=tC(ta,"os-padding"),e=tC(tu,!B&&er),r=tC(ts,"os-content"),l=_?tC(Y(v),el):tx;if(tf&&(G(to,ti),j(td,()=>{G(ti,to),U(ti)})),V(tb,tp),V(ti,ta),V(ta||ti,!B&&tu),V(tu,ts),j(td,()=>{l(),z(tu,t9),z(tu,t4),tl(ts)&&eG(ts),tl(tu)&&eG(tu),tl(ta)&&eG(ta),t(),e(),r()}),n&&!B&&j(td,tP.bind(0,tu,el)),tc&&(W(tu,tc),j(td,U.bind(0,tc))),te){let o=M(tu,eV);M(tu,eV,"-1"),tu.focus();let i=()=>o?M(tu,eV,o):z(tu,eV),a=tJ(w,"pointerdown keydown",()=>{i(),a()});j(td,[i,a])}else tt&&tt.focus&&tt.focus();tp=0};return[tr,th,P.bind(0,td)]},eQ=(t,e)=>{let{tt:r}=t,[n]=e;return t=>{let{B:e}=ez(),{ht:l}=n(),{gt:i}=t,a=(r||!e)&&i;return a&&o(r,{height:l?"":"100%"}),{vt:a,wt:a}}},e0=(t,e)=>{let[r,n]=e,{Z:l,K:a,J:u,ut:s}=t,[c,d]=i({u:tm,o:tN()},tN.bind(0,l,"padding",""));return(t,e,l)=>{let[i,f]=d(l),{A:p,B:b}=ez(),{bt:h}=r(),{vt:y,wt:g,yt:v}=t,[m,w]=e("paddingAbsolute");(y||f||!b&&g)&&([i,f]=c(l));let x=!s&&(w||v||f);if(x){let O=!m||!a&&!p,_=i.r+i.l,S=i.t+i.b,j={marginRight:O&&!h?-_:0,marginBottom:O?-S:0,marginLeft:O&&h?-_:0,top:O?-i.t:0,right:O?h?-i.r:"auto":0,left:O?h?"auto":-i.l:0,width:O?`calc(100% + ${_}px)`:""},$={paddingTop:O?i.t:0,paddingRight:O?i.r:0,paddingBottom:O?i.b:0,paddingLeft:O?i.l:0};o(a||u,j),o(u,$),n({K:i,St:!O,M:a?$:A({},j,$)})}return{xt:x}}},{max:e1}=Math,e3=e1.bind(0,0),e2="visible",e6="hidden",e8={u:tg,o:{w:0,h:0}},e7={u:tv,o:{x:e6,y:e6}},e5=(t,e)=>{let r=window.devicePixelRatio%1!=0?1:0,n={w:e3(t.w-e.w),h:e3(t.h-e.h)};return{w:n.w>r?n.w:0,h:n.h>r?n.h:0}},e9=(t,e,r)=>r?tC(t,e):tP(t,e),e4=t=>0===t.indexOf(e2),rt=(t,e)=>{let[r,n]=e,{Z:l,K:a,J:u,nt:s,ut:c,_t:d,it:f,et:p}=t,{k:b,B:h,A:y,I:g}=ez(),v=ej()[ek],m=!c&&!y&&(g.x||g.y),w=f&&c,[x,O]=i(e8,tD.bind(0,u)),[_,S]=i(e8,tX.bind(0,u)),[j,$]=i(e8),[E,P]=i(e8),[C]=i(e7),k=(t,e)=>{if(o(u,{height:""}),e){let{St:n,K:i}=r(),{$t:a,P:s}=t,c=tD(l),d=tH(l),f="content-box"===o(u,"boxSizing"),p=n||f?i.b+i.t:0,b=!(g.x&&f);o(u,{height:d.h+c.h+(a.x&&b?s.x:0)-p})}},A=(t,e)=>{let r=y||t?0:42,n=(t,n,l)=>{let i=o(u,t),a=e?e[t]:i,s="scroll"===a;return[i,s,s&&!y?n?r:l:0,n&&!!r]},[l,i,a,s]=n("overflowX",g.x,b.x),[c,d,f,p]=n("overflowY",g.y,b.y);return{Ct:{x:l,y:c},$t:{x:i,y:d},P:{x:a,y:f},D:{x:s,y:p}}},T=(t,e,r,n)=>{let l=(t,e)=>{let r=e4(t),n=e&&r&&t.replace(`${e2}-`,"")||"";return[e&&!r?t:"",e4(n)?"hidden":n]},[o,i]=l(r.x,e.x),[a,u]=l(r.y,e.y);return n.overflowX=i&&a?i:o,n.overflowY=u&&o?u:a,A(t,n)},L=(t,e,n,l)=>{let{P:o,D:i}=t,{x:a,y:u}=i,{x:s,y:c}=o,{M:d}=r(),f=e?"marginLeft":"marginRight",p=e?"paddingLeft":"paddingRight",b=d[f],h=d.marginBottom,y=d[p],g=d.paddingBottom;l.width=`calc(100% + ${c+-1*b}px)`,l[f]=-c+b,l.marginBottom=-s+h,n&&(l[p]=y+(u?c:0),l.paddingBottom=g+(a?s:0))},[N,z]=v?v.H(m,h,u,s,r,A,L):[()=>m,()=>[tx]];return(t,e,i)=>{let{vt:s,Ot:f,wt:b,xt:v,gt:m,yt:R}=t,{ht:B,bt:H}=r(),[X,D]=e("showNativeOverlaidScrollbars"),[F,Z]=e("overflow"),Y=X&&g.x&&g.y,K=!c&&!h&&(s||b||f||D||m),q=e4(F.x),J=e4(F.y),V=q||J,W=O(i),G=S(i),U=$(i),Q=P(i),tt;if(D&&y&&d(el,"scrollbarHidden",!Y),K&&(tt=A(Y),k(tt,B)),s||v||b||R||D){V&&d(eo,et,!1);let[te,tr]=z(Y,H,tt),[tn,tl]=W=x(i),[to,ti]=G=_(i),ta=tH(u),tu=to,ts=ta;te(),(ti||tl||D)&&tr&&!Y&&N(tr,to,tn,H)&&(ts=tH(u),tu=tX(u));let tc={w:e3(e1(to.w,tu.w)+tn.w),h:e3(e1(to.h,tu.h)+tn.h)},td={w:e3((w?p.innerWidth:ts.w+e3(ta.w-to.w))+tn.w),h:e3((w?p.innerHeight+tn.h:ts.h+e3(ta.h-to.h))+tn.h)};Q=E(td),U=j(e5(tc,td),i)}let[tf,tp]=Q,[tb,th]=U,[ty,tg]=G,[tv,tm]=W,tw={x:tb.w>0,y:tb.h>0},tx=q&&J&&(tw.x||tw.y)||q&&tw.x&&!tw.y||J&&tw.y&&!tw.x;if(v||R||tm||tg||tp||th||Z||D||K){let tO={marginRight:0,marginBottom:0,marginLeft:0,width:"",overflowY:"",overflowX:""},t_=T(Y,tw,F,tO),tS=N(t_,ty,tv,H);c||L(t_,H,tS,tO),K&&k(t_,B),c?(M(l,t9,tO.overflowX),M(l,t4,tO.overflowY)):o(u,tO)}I(l,t5,et,tx),e9(a,eo,tx),c||e9(u,eo,V);let[tj,t$]=C(A(Y).Ct);return n({Ct:tj,zt:{x:tf.w,y:tf.h},Tt:{x:tb.w,y:tb.h},Et:tw}),{At:t$,It:tp,Lt:th}}},re=(t,e,r)=>{let n={},o=e||{},i=k(t).concat(k(o));return l(i,e=>{let l=t[e],i=o[e];n[e]=!!(r||l||i)}),n},rr=(t,e)=>{let{W:r,J:n,_t:o,ut:i}=t,{A:a,I:u,B:s}=ez(),c=!a&&(u.x||u.y),d=[eQ(t,e),e0(t,e),rt(t,e)];return(t,e,a)=>{let u=re(A({vt:!1,xt:!1,yt:!1,gt:!1,It:!1,Lt:!1,At:!1,Ot:!1,wt:!1},e),{},a),f=c||!s,p=f&&R(n),b=f&&B(n);o("",ee,!0);let h=u;return l(d,e=>{h=re(h,e(h,t,!!a)||{},a)}),R(n,p),B(n,b),o("",ee),i||(R(r,0),B(r,0)),h}},rn=(t,e,r)=>{let n,o=!1,i=()=>{o=!0},a=i=>{if(r){let a=r.reduce((e,r)=>{if(r){let[n,l]=r,o=l&&n&&(i?i(n):X(n,t));o&&o.length&&l&&h(l)&&j(e,[o,l.trim()],!0)}return e},[]);l(a,r=>l(r[0],l=>{let i=r[1],a=n.get(l)||[],u=t.contains(l);if(u){let s=tJ(l,i,t=>{o?(s(),n.delete(l)):e(t)});n.set(l,j(a,s))}else P(a),n.delete(l)}))}};return r&&(n=new WeakMap,a()),[i,a]},rl=(t,e,r,n)=>{let o=!1,{Ht:i,Mt:a,Pt:u,Dt:s,Rt:c,kt:d}=n||{},f=t_(()=>{o&&r(!0)},{g:33,v:99}),[p,b]=rn(t,f,u),y=a||[],g=(i||[]).concat(y),v=(o,i)=>{let a=c||tx,u=d||tx,f=new Set,p=new Set,g=!1,v=!1;if(l(o,r=>{let{attributeName:o,target:i,type:c,oldValue:d,addedNodes:b,removedNodes:m}=r,w="attributes"===c,x=t===i,O=w&&h(o)?M(i,o):0,_=0!==O&&d!==O,j=S(y,o)>-1&&_;if(e&&("childList"===c||!x)){let $=w&&_,E=$&&s&&F(i,s),P=E?!a(i,o,d,O):!w||$,C=P&&!u(r,!!E,t,n);l(b,t=>f.add(t)),l(m,t=>f.add(t)),v=v||C}!e&&x&&_&&!a(i,o,d,O)&&(p.add(o),g=g||j)}),f.size>0&&b(t=>$(f).reduce((e,r)=>(j(e,X(t,r)),F(r,t)?j(e,r):e),[])),e)return!i&&v&&r(!1),[!1];if(p.size>0||g){let m=[$(p),g];return i||r.apply(0,m),m}},m=new ts(t=>v(t));return m.observe(t,{attributes:!0,attributeOldValue:!0,attributeFilter:g,subtree:e,childList:e,characterData:e}),o=!0,[()=>{o&&(p(),m.disconnect(),o=!1)},()=>{if(o){f.m();let t=m.takeRecords();return!E(t)&&v(t,!0)}}]},ro=t=>t&&(t.height||t.width),ri=(t,e,r)=>{let{Vt:n=!1,Bt:l=!1}=r||{},o=ej().__osSizeObserverPlugin,{V:a}=ez(),u=tt(`
`),s=u[0],c=s.firstChild,d=tI.bind(0,t),[f]=i({o:void 0,_:!0,u:(t,e)=>!(!t||!ro(t)&&ro(e))}),p=t=>{let r=v(t)&&t.length>0&&m(t[0]),l=!r&&y(t[0]),o=!1,i=!1,u=!0;if(r){let[c,,d]=f(t.pop().contentRect),p=ro(c),b=ro(d);o=!d||!p,i=!b&&p,u=!o}else l?[,u]=t:i=!0===t;if(n&&u){let h=l?t[0]:tI(s);R(s,h?a.n?-3333333:a.i?0:3333333:3333333),B(s,3333333)}o||e({vt:!l,Yt:l?t:void 0,Bt:!!i})},b=[],h=!!l&&p;return[()=>{P(b),U(s)},()=>{if(td){let e=new td(p);e.observe(c),j(b,()=>{e.disconnect()})}else if(o){let[r,a]=o.O(c,p,l);h=r,j(b,a)}if(n){let[u]=i({o:!d()},d);j(b,tJ(s,"scroll",t=>{let e=u(),[r,n]=e;n&&(tP(c,"ltr rtl"),r?tC(c,"rtl"):tC(c,"ltr"),p(e)),tV(t)}))}h&&(tC(s,ea),j(b,tJ(s,"animationstart",h,{C:!!td}))),(td||o)&&V(t,s)}]},ra=t=>0===t.h||t.isIntersecting||t.intersectionRatio>0,ru=(t,e)=>{let r,n=Q("os-trinsic-observer"),l=[],[o]=i({o:!1}),a=(t,r)=>{if(t){let n=o(ra(t)),[,l]=n;if(l)return r||e(n),[n]}},u=(t,e)=>{if(t&&t.length>0)return a(t.pop(),e)};return[()=>{P(l),U(n)},()=>{if(tc)(r=new tc(t=>u(t),{root:t})).observe(n),j(l,()=>{r.disconnect()});else{let e=()=>{let t=tB(n);a(t)},[o,i]=ri(n,e);j(l,o),i(),e()}V(t,n)},()=>{if(r)return u(r.takeRecords(),!0)}]},rs=`[${t5}]`,rc=`.${er}`,rd=["tabindex"],rf=["wrap","cols","rows"],rp=["id","class","style","open"],rb=(t,e,r)=>{let n,o,a,{Z:u,J:s,tt:c,rt:d,ut:f,ft:p,_t:y}=t,{B:m}=ez(),[w]=i({u:tg,o:{w:0,h:0}},()=>{let t=p(eo,et),e=p(en,""),r=e&&R(s),n=e&&B(s);y(eo,et),y(en,""),y("",ee,!0);let l=tX(c),o=tX(s),i=tD(s);return y(eo,et,t),y(en,"",e),y("",ee),R(s,r),B(s,n),{w:o.w+l.w+i.w,h:o.h+l.h+i.h}}),x=d?rf:rp.concat(rf),O=t_(r,{g:()=>n,v:()=>o,p(t,e){let[r]=t,[n]=e;return[k(r).concat(k(n)).reduce((t,e)=>(t[e]=r[e]||n[e],t),{})]}}),_=t=>{l(t||rd,t=>{if(S(rd,t)>-1){let e=M(u,t);h(e)?M(s,t,e):z(s,t)}})},$=(t,n)=>{let[l,o]=t,i={gt:o};return e({ht:l}),n||r(i),i},E=({vt:t,Yt:n,Bt:l})=>{let o=!1;if(n){let[i,a]=n;o=a,e({bt:i})}(!t||l?r:O)({vt:t,yt:o})},P=(t,e)=>{let[,n]=w(),l={wt:n};return n&&(e||(t?r:O)(l)),l},C=(t,e,r)=>{let n={Ot:e};return e?r||O(n):f||_(t),n},[T,L,I]=c||!m?ru(u,$):[tx,tx,tx],[N,H]=f?[tx,tx]:ri(u,E,{Bt:!0,Vt:!0}),[X,D]=rl(u,!1,C,{Mt:rp,Ht:rp.concat(rd)}),F=f&&td&&new td(E.bind(0,{vt:!0}));return F&&F.observe(u),_(),[()=>{T(),N(),a&&a[0](),F&&F.disconnect(),X()},()=>{H(),L()},()=>{let t={},e=D(),r=I(),n=a&&a[1]();return e&&A(t,C.apply(0,j(e,!0))),r&&A(t,$.apply(0,j(r,!0))),n&&A(t,P.apply(0,j(n,!0))),t},t=>{let[e]=t("update.ignoreMutation"),[r,l]=t("update.attributes"),[i,u]=t("update.elementEvents"),[d,p]=t("update.debounce"),h=t=>g(e)&&e(t);if((u||l)&&(a&&(a[1](),a[0]()),a=rl(c||s,!0,P,{Ht:x.concat(r||[]),Pt:i,Dt:rs,kt(t,e){let{target:r,attributeName:n}=t,l=!e&&!!n&&!f&&q(r,rs,rc);return l||!!K(r,`.${es}`)||!!h(t)}})),p){if(O.m(),v(d)){let y=d[0],m=d[1];n=b(y)&&y,o=b(m)&&m}else b(d)?(n=d,o=!1):(n=!1,o=!1)}}]},rh={x:0,y:0},ry={K:{t:0,r:0,b:0,l:0},St:!1,M:{marginRight:0,marginBottom:0,marginLeft:0,paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0},zt:rh,Tt:rh,Ct:{x:"hidden",y:"hidden"},Et:{x:!1,y:!1},ht:!1,bt:!1},rg=(t,e)=>{let r=eq(e,{}),n=eJ(ry),[l,o,i]=t0(),[a,u]=n,[s,c,d]=eU(t),f=rr(s,n),p=(t,e,r)=>{let n=k(t).some(e=>t[e]),l=n||!T(e)||r;return l&&i("u",[t,e,r]),l},[b,h,y,g]=rb(s,u,t=>p(f(r,t),{},!1)),v=a.bind(0);return v.jt=t=>l("u",t),v.qt=()=>{let{W:t,J:e}=s,r=R(t),n=B(t);h(),c(),R(e,r),B(e,n)},v.Nt=s,[(t,r)=>{let n=eq(e,t,r);return g(n),p(f(n,y(),r),t,!!r)},v,()=>{o(),b(),d()}]},{round:rv}=Math,rm=t=>{let{width:e,height:r}=tF(t),{w:n,h:l}=tB(t);return{x:rv(e)/n||1,y:rv(r)/l||1}},rw=(t,e,r)=>{let n=e.scrollbars,{button:l,isPrimary:o,pointerType:i}=t,{pointers:a}=n;return 0===l&&o&&n[r?"dragScroll":"clickScroll"]&&(a||[]).includes(i)},rx=(t,e)=>tJ(t,"mousedown",tJ.bind(0,e,"click",tV,{C:!0,$:!0}),{$:!0}),rO=(t,e,r,n,l,o)=>{let{V:i}=ez(),{Ft:a,Gt:u,Xt:s}=r,c=`scroll${o?"Left":"Top"}`,d=`client${o?"X":"Y"}`,f=o?"width":"height",p=o?"left":"top",b=o?"w":"h",h=o?"x":"y",y=(t,e)=>r=>{let{Tt:d}=l(),f=tB(u)[b]-tB(a)[b],p=e*r/f*d[h],y=tI(s),g=y&&o?i.n||i.i?1:-1:1;n[c]=t+p*g};return tJ(u,"pointerdown",r=>{let l=K(r.target,`.${eb}`)===a;if(rw(r,t,l)){let o=!l&&r.shiftKey,i=()=>tF(a),s=()=>tF(u),b=(t,e)=>(t||i())[p]-(e||s())[p],g=y(n[c]||0,1/rm(n)[h]),v=r[d],m=i(),w=s(),x=m[f],O=b(m,w)+x/2,_=v-w[p],S=l?0:_-O,$=[tJ(e,"selectstart",t=>tW(t),{S:!1}),tJ(u,"pointermove",t=>{let e=t[d]-v;(l||o)&&g(S+e)})];if(o)g(S);else if(!l){let E=ej().__osClickScrollPlugin;E&&j($,E.O(g,b,S,x,_))}tJ(u,"pointerup",t=>{P($),u.releasePointerCapture(t.pointerId)},{C:!0}),u.setPointerCapture(r.pointerId)}})},r_=(t,e)=>(r,n,l,o,i,a)=>{let{Xt:u}=r,[s,c]=tO(333),d=!!i.scrollBy,f=!0;return P.bind(0,[tJ(u,"pointerenter",()=>{n(ev,!0)}),tJ(u,"pointerleave pointercancel",()=>{n(ev)}),tJ(u,"wheel",t=>{let{deltaX:e,deltaY:r,deltaMode:l}=t;d&&f&&0===l&&Y(u)===o&&i.scrollBy({left:e,top:r,behavior:"smooth"}),f=!1,n(ex,!0),s(()=>{f=!0,n(ex)}),tW(t)},{S:!1,$:!0}),rx(u,l),rO(t,l,r,i,e,a),c])},{min:rS,max:rj,abs:r$,round:rE}=Math,rP=(t,e,r,n)=>{if(n){let l=r?"x":"y",{Tt:o,zt:i}=n,a=i[l],u=o[l];return rj(0,rS(1,a/(a+u)))}let s=r?"w":"h",c=tB(t)[s],d=tB(e)[s];return rj(0,rS(1,c/d))},rC=(t,e,r,n,l,o)=>{let{V:i}=ez(),{Tt:a}=n,u=rE(a[o?"x":"y"]),s=r$(r[`scroll${o?"Left":"Top"}`]),c=i.i?s:u-s,d=rS(1,(o&&l?c:s)/u),f=rP(t,e,o);return 1/f*(1-f)*d},rk=(t,e,r)=>{let{q:n}=ez(),{scrollbars:i}=n(),{slot:a}=i,{ct:u,W:s,Z:c,J:d,lt:f,ot:p}=e,{scrollbars:b}=f?{}:t,{slot:h}=b||{},g=eH([s,c,d],()=>c,a,h),v=(t,e,r)=>{let n=r?tC:tP;l(t,t=>{n(t.Xt,e)})},m=(t,e)=>{l(t,t=>{let[r,n]=e(t);o(r,n)})},w=(t,e,r)=>{m(t,t=>{let{Ft:n,Gt:l}=t;return[n,{[r?"width":"height"]:`${(100*rP(n,l,r,e)).toFixed(3)}%`}]})},x=(t,e,r)=>{let n=r?"X":"Y";m(t,t=>{let{Ft:l,Gt:o,Xt:i}=t,a=rC(l,o,p,e,tI(i),r);return[l,{transform:a==a?`translate${n}(${(100*a).toFixed(3)}%)`:""}]})},O=[],_=[],S=[],$=(t,e,r)=>{let n=y(r);(!n||r)&&v(_,t,e),n&&r||v(S,t,e)},C=t=>{w(_,t,!0),w(S,t)},k=t=>{x(_,t,!0),x(S,t)},A=t=>{let e=t?_:S,n=E(e)?eg:"",l=Q(`${es} ${t?ed:ef} ${n}`),o=Q(ep),i=Q(eb),a={Xt:l,Gt:o,Ft:i};return V(l,o),V(o,i),j(e,a),j(O,[U.bind(0,l),r(a,$,u,c,p,t)]),a},T=A.bind(0,!0),L=A.bind(0,!1),M=()=>{V(g,_[0].Xt),V(g,S[0].Xt),tb(()=>{$(eg)},300)};return T(),L(),[{Ut:C,Wt:k,Zt:$,Jt:{Kt:_,Qt:T,tn:m.bind(0,_)},nn:{Kt:S,Qt:L,tn:m.bind(0,S)}},M,P.bind(0,O)]},rA=(t,e,r,n)=>{let l,o,i,a,u,s=0,c=eJ({}),[d]=c,[f,p]=tO(),[b,h]=tO(),[y,g]=tO(100),[v,m]=tO(100),[w,x]=tO(()=>s),[O,_,S]=rk(t,r.Nt,r_(e,r)),{Z:j,J:$,ot:E,st:C,ut:k,it:A}=r.Nt,{Jt:T,nn:L,Zt:M,Ut:I,Wt:N}=O,{tn:z}=T,{tn:H}=L,X=t=>{let{Xt:e}=t,r=k&&!A&&Y(e)===$&&e;return[r,{transform:r?`translate(${R(E)}px, ${B(E)}px)`:""}]},D=(t,e)=>{if(x(),t)M(ew);else{let r=()=>M(ew,!0);s>0&&!e?w(r):r()}},F=()=>{(a=o)&&D(!0)},Z=[g,x,m,h,p,S,tJ(j,"pointerover",F,{C:!0}),tJ(j,"pointerenter",F),tJ(j,"pointerleave",()=>{a=!1,o&&D(!1)}),tJ(j,"pointermove",()=>{l&&f(()=>{g(),D(!0),v(()=>{l&&D(!1)})})}),tJ(C,"scroll",t=>{b(()=>{N(r()),i&&D(!0),y(()=>{i&&!a&&D(!1)})}),n(t),k&&z(X),k&&H(X)})],K=d.bind(0);return K.Nt=O,K.qt=_,[(t,n,a)=>{let{It:c,Lt:d,At:f,yt:p}=a,b=eq(e,t,n),h=r(),{Tt:y,Ct:g,bt:v}=h,[m,w]=b("scrollbars.theme"),[x,O]=b("scrollbars.visibility"),[_,S]=b("scrollbars.autoHide"),[j]=b("scrollbars.autoHideDelay"),[$,E]=b("scrollbars.dragScroll"),[P,C]=b("scrollbars.clickScroll"),k=(t,e)=>{let r="visible"===x||"auto"===x&&"scroll"===t;return M(eh,r,e),r};if(s=j,w&&(M(u),M(m,!0),u=m),S&&(l="move"===_,o="leave"===_,D(!(i="never"!==_),!0)),E&&M(e_,$),C&&M(eO,P),f||O||n){let T=k(g.x,!0),L=k(g.y,!1);M(ey,!(T&&L))}(c||d||p||n)&&(I(h),N(h),M(em,!y.x,!0),M(em,!y.y,!1),M(ec,v&&!A))},K,P.bind(0,Z)]},rT=(t,e,r)=>{g(t)&&t(e||void 0,r||void 0)},rL=(t,e,r)=>{let{F:n,q:o,Y:i,j:a}=ez(),u=ej(),s=O(t),c=s?t:t.target,d=eY(c);if(e&&!d){let f=!1,p=t=>{let e=ej().__osOptionsValidationPlugin,r=e&&e.O;return r?r(t,!0):t},b=A({},n(),p(e)),[h,y,g]=t0(r),[v,m,w]=rg(t,b),[x,_,S]=rA(t,b,m,t=>g("scroll",[L,t])),j=(t,e)=>v(t,!!e),$=j.bind(0,{},!0),E=i($),P=a($),C=t=>{eZ(c),E(),P(),S(),w(),f=!0,g("destroyed",[L,!!t]),y()},L={options(t,e){if(t){let r=e?n():{},l=t2(b,A(r,p(t)));T(l)||(A(b,l),j(l))}return A({},b)},on:h,off(t,e){t&&e&&y(t,e)},state(){let{zt:t,Tt:e,Ct:r,Et:n,K:l,St:o,bt:i}=m();return A({},{overflowEdge:t,overflowAmount:e,overflowStyle:r,hasOverflow:n,padding:l,paddingAbsolute:o,directionRTL:i,destroyed:f})},elements(){let{W:t,Z:e,K:r,J:n,tt:l,ot:o,st:i}=m.Nt,{Jt:a,nn:u}=_.Nt,s=t=>{let{Ft:e,Gt:r,Xt:n}=t;return{scrollbar:n,track:r,handle:e}},c=t=>{let{Kt:e,Qt:r}=t,n=s(e[0]);return A({},n,{clone(){let t=s(r());return x({},!0,{}),t}})};return A({},{target:t,host:e,padding:r||n,viewport:n,content:l||n,scrollOffsetElement:o,scrollEventElement:i,scrollbarHorizontal:c(a),scrollbarVertical:c(u)})},update:t=>j({},t),destroy:C.bind(0)};return(m.jt((t,e,r)=>{x(e,r,t)}),eF(c,L),l(k(u),t=>rT(u[t],0,L)),eX(m.Nt.it,o().cancel,!s&&t.cancel))?(C(!0),L):(m.qt(),_.qt(),g("initialized",[L]),m.jt((t,e,r)=>{let{vt:n,yt:l,gt:o,It:i,Lt:a,At:u,wt:s,Ot:c}=t;g("updated",[L,{updateHints:{sizeChanged:n,directionChanged:l,heightIntrinsicChanged:o,overflowEdgeChanged:i,overflowAmountChanged:a,overflowStyleChanged:u,contentMutation:s,hostMutation:c},changedOptions:e,force:r}])}),L.update(!0),L)}return d};rL.plugin=t=>{l(e$(t),t=>rT(t,rL))},rL.valid=t=>{let e=t&&t.elements,r=g(e)&&e();return x(r)&&!!eY(r.target)},rL.env=()=>{let{k:t,I:e,A:r,V:n,B:l,L:o,X:i,U:a,q:u,N:s,F:c,G:d}=ez();return A({},{scrollbarsSize:t,scrollbarsOverlaid:e,scrollbarsHiding:r,rtlScrollBehavior:n,flexboxGlue:l,cssCustomProperties:o,staticDefaultInitialization:i,staticDefaultOptions:a,getDefaultInitialization:u,setDefaultInitialization:s,getDefaultOptions:c,setDefaultOptions:d})};let rM=()=>{if(typeof window>"u"){let t=()=>{};return[t,t]}let e,r,n=window,l="function"==typeof n.requestIdleCallback,o=n.requestAnimationFrame,i=n.cancelAnimationFrame,a=l?n.requestIdleCallback:o,u=l?n.cancelIdleCallback:i,s=()=>{u(e),i(r)};return[(t,n)=>{s(),e=a(l?()=>{s(),r=o(t)}:t,"object"==typeof n?n:{timeout:1500})},s]},rI=t=>{let{options:e,events:r,defer:l}=t||{},[o,i]=(0,n.useMemo)(rM,[]),a=(0,n.useRef)(null),u=(0,n.useRef)(l),s=(0,n.useRef)(e),c=(0,n.useRef)(r);return(0,n.useEffect)(()=>{u.current=l},[l]),(0,n.useEffect)(()=>{let{current:t}=a;s.current=e,rL.valid(t)&&t.options(e||{},!0)},[e]),(0,n.useEffect)(()=>{let{current:t}=a;c.current=r,rL.valid(t)&&t.on(r||{},!0)},[r]),(0,n.useEffect)(()=>()=>{var t;i(),null==(t=a.current)||t.destroy()},[]),(0,n.useMemo)(()=>[t=>{let e=a.current;if(rL.valid(e))return;let r=u.current,n=s.current||{},l=c.current||{},i=()=>a.current=rL(t,n,l);r?o(i,r):i()},()=>a.current],[])},rN=(t,e)=>{let{element:r="div",options:l,events:o,defer:i,children:a,...u}=t,s=(0,n.useRef)(null),c=(0,n.useRef)(null),[d,f]=rI({options:l,events:o,defer:i});return(0,n.useEffect)(()=>{let{current:t}=s,{current:e}=c;return t&&e&&d({target:t,elements:{viewport:e,content:e}}),()=>{var t;return null==(t=f())?void 0:t.destroy()}},[d,r]),(0,n.useImperativeHandle)(e,()=>({osInstance:f,getElement:()=>s.current}),[]),n.createElement(r,{"data-overlayscrollbars-initialize":"",ref:s,...u},n.createElement("div",{ref:c},a))},rz=(0,n.forwardRef)(rN)},1670:function(t,e,r){"use strict";r.d(e,{Zo:function(){return a},ah:function(){return o}});var n=r(7378);let l=n.createContext({});function o(t){let e=n.useContext(l);return n.useMemo(()=>"function"==typeof t?t(e):{...e,...t},[e,t])}let i={};function a({components:t,children:e,disableParentContext:r}){let a=o(t);return r&&(a=t||i),n.createElement(l.Provider,{value:a},e)}},9722:function(t,e,r){"use strict";function n(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function l(t){for(var e=1;e=0||(l[r]=t[r]);return l}(t,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(n=0;n=0)&&Object.prototype.propertyIsEnumerable.call(t,r)&&(l[r]=t[r])}return l}r.d(e,{Z:function(){return n}})}},function(t){var e=function(e){return t(t.s=e)};t.O(0,[774,179],function(){return e(8936),e(5817)}),_N_E=t.O()}]); \ No newline at end of file diff --git a/docs/_next/static/chunks/pages/index-6ccc9594454841fc.js b/docs/_next/static/chunks/pages/index-6ccc9594454841fc.js deleted file mode 100644 index 6ea54de..0000000 --- a/docs/_next/static/chunks/pages/index-6ccc9594454841fc.js +++ /dev/null @@ -1,5 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{42:function(e,s){var l; /*! - Copyright (c) 2018 Jed Watson. - Licensed under the MIT License (MIT), see - http://jedwatson.github.io/classnames -*/ !function(){"use strict";var n={}.hasOwnProperty;function r(){for(var e=[],s=0;s"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"script"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"type"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:'"text/javascript"'}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"src"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:'"path/to/overlayscrollbars.js"'}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"defer>"})]})]})})})]}),"\n",(0,d.jsx)(s.h2,{id:"initialization",children:"Initialization"}),"\n",(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": During initialization its expected that the ",(0,d.jsx)("b",{children:"CSS file is loaded and parsed"})," by the browser."]}),"\n"]}),"\n",(0,d.jsxs)(s.p,{children:["You can initialize either directly with an ",(0,d.jsx)(s.code,{children:"Element"})," or with an ",(0,d.jsx)(s.code,{children:"Object"})," where you have more control over the initialization process."]}),"\n",(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"// simple initialization with an element"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"osInstance"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"), {});"})]})]})})}),"\n",(0,d.jsx)(s.h3,{id:"bridging-initialization-flickering",children:"Bridging initialization flickering"}),"\n",(0,d.jsx)(s.p,{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",(0,d.jsxs)(s.p,{children:["To fix this behavior apply the ",(0,d.jsx)(s.code,{children:"data-overlayscrollbars-initialize"})," attribute to the target element (and ",(0,d.jsx)(s.code,{children:"html"})," element if the target element is ",(0,d.jsx)(s.code,{children:"body"}),")."]}),"\n",(0,d.jsx)(s.h3,{id:"initialization-with-an-object",children:"Initialization with an Object"}),"\n",(0,d.jsxs)("details",{children:[(0,d.jsx)("summary",{children:(0,d.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,d.jsx)("br",{}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,d.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description of all possibilities."]}),"\n"]}),(0,d.jsxs)(s.p,{children:["The only required field is the ",(0,d.jsx)(s.code,{children:"target"})," field. This is the field to which the plugin is applied to.",(0,d.jsx)(s.br,{}),"\n","If you use the object initialization only with the ",(0,d.jsx)(s.code,{children:"target"})," field, the outcome is equivalent to the element initialization:"]}),(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"// Both initializations have the same outcome"})}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"), {});"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"({ target: "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:") }, {});"})]})]})})}),(0,d.jsxs)(s.p,{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 ",(0,d.jsx)(s.code,{children:"viewport"})," element. Like this the library won't generate it but take the specified element instead:"]}),(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" elements: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" viewport: "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#viewport'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,d.jsx)(s.p,{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."}),(0,d.jsx)(s.hr,{}),(0,d.jsx)(s.p,{children:"You can also decide to which element the scrollbars should be applied to:"}),(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" slot: "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"parentElement"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,d.jsx)(s.hr,{}),(0,d.jsx)(s.p,{children:"And last but not least you can decide when the initialization should be canceled:"}),(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" cancel: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" nativeScrollbarsOverlaid: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"true"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" body: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,d.jsxs)(s.p,{children:["In the above example the initialization is canceled when the native scrollbars are overlaid or when your target is a ",(0,d.jsx)(s.code,{children:"body"})," element and the plugin determined that a initialization to the ",(0,d.jsx)(s.code,{children:"body"})," element would affect native functionality like ",(0,d.jsx)(s.code,{children:"window.scrollTo"}),"."]})]}),"\n",(0,d.jsx)(s.h2,{id:"options",children:"Options"}),"\n",(0,d.jsxs)(s.p,{children:["You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the ",(0,d.jsx)(s.code,{children:"options"})," method:"]}),"\n",(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"), {"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" overflow: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" x: "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'hidden'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),"\n",(0,d.jsx)(s.h3,{id:"options-in-depth",children:"Options in depth"}),"\n",(0,d.jsxs)("details",{children:[(0,d.jsx)("summary",{children:(0,d.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,d.jsx)("br",{}),(0,d.jsx)(s.p,{children:"The default options are:"}),(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"defaultOptions"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" paddingAbsolute: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" showNativeOverlaidScrollbars: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" update: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" elementEvents: [["}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'img'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'load'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"]],"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" debounce: ["}),(0,d.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,d.jsx)(s.span,{style:{color:"#D33682"},children:"33"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"],"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" attributes: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" ignoreMutation: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" overflow: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" x: "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'scroll'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" y: "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'scroll'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" theme: "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'os-theme-dark'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" visibility: "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'auto'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" autoHide: "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'never'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" autoHideDelay: "}),(0,d.jsx)(s.span,{style:{color:"#D33682"},children:"1300"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" dragScroll: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"true"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" clickScroll: "}),(0,d.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" pointers: ["}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'mouse'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'touch'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'pen'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"],"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"};"})})]})})}),(0,d.jsx)(s.h3,{id:"paddingabsolute",children:(0,d.jsx)(s.code,{children:"paddingAbsolute"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"boolean"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"false"})})]})})]}),(0,d.jsx)(s.p,{children:"Indicates whether the padding for the content shall be absolute."}),(0,d.jsx)(s.h3,{id:"shownativeoverlaidscrollbars",children:(0,d.jsx)(s.code,{children:"showNativeOverlaidScrollbars"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"boolean"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"false"})})]})})]}),(0,d.jsx)(s.p,{children:"Indicates whether the native overlaid scrollbars shall be visible."}),(0,d.jsx)(s.h3,{id:"updateelementevents",children:(0,d.jsx)(s.code,{children:"update.elementEvents"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"Array<[string, string]> | null"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"[['img', 'load']]"})})]})})]}),(0,d.jsxs)(s.p,{children:["An array of tuples. The first value in the tuple is an ",(0,d.jsx)(s.code,{children:"selector"})," and the second value are ",(0,d.jsx)(s.code,{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 ',(0,d.jsx)(s.code,{children:"img"})," element emits an ",(0,d.jsx)(s.code,{children:"load"}),' event."']}),(0,d.jsx)(s.h3,{id:"updatedebounce",children:(0,d.jsx)(s.code,{children:"update.debounce"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"[number, number] | number | null"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"[0, 33]"})})]})})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": If 0 is used for the timeout, ",(0,d.jsx)(s.code,{children:"requestAnimationFrame"})," instead of ",(0,d.jsx)(s.code,{children:"setTimeout"})," is used for the debounce."]}),"\n"]}),(0,d.jsxs)(s.p,{children:["Debounces the ",(0,d.jsx)(s.code,{children:"MutationObserver"})," which tracks changes to the content. If a ",(0,d.jsx)(s.strong,{children:"tuple"})," is passed, the first value is the timeout and second is the max wait. If only a ",(0,d.jsx)(s.strong,{children:"number"})," is passed you specify only the timeout and there is no max wait. With ",(0,d.jsx)(s.strong,{children:"null"})," there is no debounce. ",(0,d.jsx)(s.strong,{children:"Usefull to fine-tune performance."})]}),(0,d.jsx)(s.h3,{id:"updateattributes",children:(0,d.jsx)(s.code,{children:"update.attributes"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string[] | null"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"null"})})]})})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": There is a base array of attributes that the ",(0,d.jsx)(s.code,{children:"MutationObserver"})," always observes, even if this option is ",(0,d.jsx)(s.code,{children:"null"}),"."]}),"\n"]}),(0,d.jsxs)(s.p,{children:["An array of additional attributes that the ",(0,d.jsx)(s.code,{children:"MutationObserver"})," should observe for the content."]}),(0,d.jsx)(s.h3,{id:"updateignoremutation",children:(0,d.jsx)(s.code,{children:"update.ignoreMutation"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"((mutation) => any) | null"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"null"})})]})})]}),(0,d.jsxs)(s.p,{children:["A function which receives a ",(0,d.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord",children:(0,d.jsx)(s.code,{children:"MutationRecord"})})," as an argument. If the function returns a truthy value the mutation will be ignored and the plugin won't update. ",(0,d.jsx)(s.strong,{children:"Usefull to fine-tune performance."})]}),(0,d.jsx)(s.h3,{id:"overflowx",children:(0,d.jsx)(s.code,{children:"overflow.x"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"'scroll'"})})]})})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,d.jsx)(s.code,{children:"'hidden'"}),", ",(0,d.jsx)(s.code,{children:"'scroll'"}),", ",(0,d.jsx)(s.code,{children:"'visible'"}),", ",(0,d.jsx)(s.code,{children:"'visible-hidden'"})," and ",(0,d.jsx)(s.code,{children:"'visible-scroll'"}),"."]}),"\n"]}),(0,d.jsx)(s.p,{children:"The overflow behavior for the horizontal (x) axis."}),(0,d.jsx)(s.h3,{id:"overflowy",children:(0,d.jsx)(s.code,{children:"overflow.y"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"'scroll'"})})]})})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,d.jsx)(s.code,{children:"'hidden'"}),", ",(0,d.jsx)(s.code,{children:"'scroll'"}),", ",(0,d.jsx)(s.code,{children:"'visible'"}),", ",(0,d.jsx)(s.code,{children:"'visible-hidden'"})," and ",(0,d.jsx)(s.code,{children:"'visible-scroll'"}),"."]}),"\n"]}),(0,d.jsx)(s.p,{children:"The overflow behavior for the vertical (y) axis."}),(0,d.jsx)(s.h3,{id:"scrollbarstheme",children:(0,d.jsx)(s.code,{children:"scrollbars.theme"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string | null"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"'os-theme-dark'"})})]})})]}),(0,d.jsx)(s.p,{children:"Applies the specified theme (classname) to the scrollbars."}),(0,d.jsx)(s.h3,{id:"scrollbarsvisibility",children:(0,d.jsx)(s.code,{children:"scrollbars.visibility"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"'auto'"})})]})})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,d.jsx)(s.code,{children:"'visible'"}),", ",(0,d.jsx)(s.code,{children:"'hidden'"}),", and ",(0,d.jsx)(s.code,{children:"'auto'"}),"."]}),"\n"]}),(0,d.jsx)(s.p,{children:"The base visibility of the scrollbars."}),(0,d.jsx)(s.h3,{id:"scrollbarsautohide",children:(0,d.jsx)(s.code,{children:"scrollbars.autoHide"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"'never'"})})]})})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,d.jsx)(s.code,{children:"'never'"}),", ",(0,d.jsx)(s.code,{children:"'scroll'"}),", ",(0,d.jsx)(s.code,{children:"'leave'"})," and ",(0,d.jsx)(s.code,{children:"'move'"}),"."]}),"\n"]}),(0,d.jsx)(s.p,{children:"The possibility to hide visible scrollbars automatically after a certain user action."}),(0,d.jsx)(s.h3,{id:"scrollbarsautohidedelay",children:(0,d.jsx)(s.code,{children:"scrollbars.autoHideDelay"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"number"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"1300"})})]})})]}),(0,d.jsx)(s.p,{children:"The delay in milliseconds before the scrollbars are hidden automatically."}),(0,d.jsx)(s.h3,{id:"scrollbarsdragscroll",children:(0,d.jsx)(s.code,{children:"scrollbars.dragScroll"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"boolean"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"true"})})]})})]}),(0,d.jsx)(s.p,{children:"Indicates whether you can drag the scrollbar handles for scrolling."}),(0,d.jsx)(s.h3,{id:"scrollbarsclickscroll",children:(0,d.jsx)(s.code,{children:"scrollbars.clickScroll"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"boolean"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"false"})})]})})]}),(0,d.jsx)(s.p,{children:"Indicates whether you can click on the scrollbar track for scrolling."}),(0,d.jsx)(s.h3,{id:"scrollbarspointers",children:(0,d.jsx)(s.code,{children:"scrollbars.pointers"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"type"}),(0,d.jsx)(s.th,{align:"left",children:"default"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"string[] | null"})}),(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"['mouse', 'touch', 'pen']"})})]})})]}),(0,d.jsxs)(s.p,{children:["The ",(0,d.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType",children:(0,d.jsx)(s.code,{children:"PointerTypes"})})," the plugin should react to."]})]}),"\n",(0,d.jsx)(s.h2,{id:"events",children:"Events"}),"\n",(0,d.jsxs)(s.p,{children:["You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the ",(0,d.jsx)(s.code,{children:"on"})," and ",(0,d.jsx)(s.code,{children:"off"})," methods:"]}),"\n",(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"), {}, {"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"updated"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(osInstance, onUpdatedArgs) {"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"// ..."})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),"\n",(0,d.jsx)(s.h3,{id:"events-in-depth",children:"Events in depth"}),"\n",(0,d.jsxs)("details",{children:[(0,d.jsx)("summary",{children:(0,d.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,d.jsx)("br",{}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": Every event receives the ",(0,d.jsx)(s.code,{children:"instance"})," from which it was invoked as the first argument. Always."]}),"\n"]}),(0,d.jsx)(s.h3,{id:"initialized",children:(0,d.jsx)(s.code,{children:"initialized"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"arguments"}),(0,d.jsx)(s.th,{align:"left",children:"description"})]})}),(0,d.jsx)(s.tbody,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"instance"})}),(0,d.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]})})]}),(0,d.jsx)(s.p,{children:"Is invoked after all generated elements, observers and events were appended to the DOM."}),(0,d.jsx)(s.h3,{id:"updated",children:(0,d.jsx)(s.code,{children:"updated"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"arguments"}),(0,d.jsx)(s.th,{align:"left",children:"description"})]})}),(0,d.jsxs)(s.tbody,{children:[(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"instance"})}),(0,d.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"onUpdatedArgs"})}),(0,d.jsxs)(s.td,{align:"left",children:["An ",(0,d.jsx)(s.code,{children:"object"})," which describes the update in detail."]})]})]})]}),(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": If an update was triggered but nothing changed, the event won't be invoked."]}),"\n"]}),(0,d.jsx)(s.p,{children:"Is invoked after the instace was updated."}),(0,d.jsx)(s.h3,{id:"destroyed",children:(0,d.jsx)(s.code,{children:"destroyed"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"arguments"}),(0,d.jsx)(s.th,{align:"left",children:"description"})]})}),(0,d.jsxs)(s.tbody,{children:[(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"instance"})}),(0,d.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"canceled"})}),(0,d.jsxs)(s.td,{align:"left",children:["An ",(0,d.jsx)(s.code,{children:"boolean"})," which indicates whether the initialization was canceled and thus destroyed."]})]})]})]}),(0,d.jsx)(s.p,{children:"Is invoked after all generated elements, observers and events were removed from the DOM."}),(0,d.jsx)(s.h3,{id:"scroll",children:(0,d.jsx)(s.code,{children:"scroll"})}),(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{align:"left",children:"arguments"}),(0,d.jsx)(s.th,{align:"left",children:"description"})]})}),(0,d.jsxs)(s.tbody,{children:[(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"instance"})}),(0,d.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{align:"left",children:(0,d.jsx)(s.code,{children:"event"})}),(0,d.jsxs)(s.td,{align:"left",children:["The original ",(0,d.jsx)(s.code,{children:"event"})," argument of the DOM event."]})]})]})]}),(0,d.jsx)(s.p,{children:"Is invoked by scrolling the viewport."})]}),"\n",(0,d.jsx)(s.h2,{id:"instance",children:"Instance"}),"\n",(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,d.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"interface"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"options"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"Options"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"options"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(newOptions"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"PartialOptions"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", pure"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"Options"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(eventListeners"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListeners"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", pure"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">)"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">[])"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"off"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">)"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"off"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:">[])"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"update"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(force"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"state"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"State"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"elements"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"Elements"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"destroy"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),"\n",(0,d.jsx)(s.h2,{id:"static-methods",children:"Static Methods"}),"\n",(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,d.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"interface"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbarsStatic"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" (target"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"InitializationTarget"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"|"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"undefined"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" (target"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"InitializationTarget"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", options"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"PartialOptions"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", eventListeners"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListeners"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(plugin"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"Plugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"|"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"Plugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"[])"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"valid"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(osInstance"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"any"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" osInstance "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"is"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"env"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#CB4B16"},children:"Environment"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),"\n",(0,d.jsx)(s.h2,{id:"plugins",children:"Plugins"}),"\n",(0,d.jsx)(s.p,{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",(0,d.jsxs)(s.ul,{children:["\n",(0,d.jsxs)(s.li,{children:[(0,d.jsx)(s.strong,{children:"ScrollbarsHidingPlugin"}),": Is needed for old browsers which aren't supporting nativ scrollbar styling features. ",(0,d.jsx)(s.a,{href:"https://caniuse.com/?search=scrollbar%20styling",children:"You can find the list of browsers where you need this plugin here"})," (note that even though ",(0,d.jsx)(s.code,{children:"iOS Safari >= 14"})," is marked as unsupported you only need this plugin for ",(0,d.jsx)(s.code,{children:"iOS < 7.1"}),")."]}),"\n",(0,d.jsxs)(s.li,{children:[(0,d.jsx)(s.strong,{children:"SizeObserverPlugin"}),": Is needed for old browsers which aren't supporting the ",(0,d.jsx)(s.code,{children:"ResizeObserver"})," api. ",(0,d.jsx)(s.a,{href:"https://caniuse.com/?search=ResizeObserver",children:"You can find the list of browsers where you need this plugin here"})]}),"\n",(0,d.jsxs)(s.li,{children:[(0,d.jsx)(s.strong,{children:"ClickScrollPlugin"}),": If you want to use the option ",(0,d.jsx)(s.code,{children:"scrollbars: { clickScroll: true }"}),"."]}),"\n"]}),"\n",(0,d.jsx)(s.h3,{id:"consuming-plugins",children:"Consuming Plugins"}),"\n",(0,d.jsx)(s.p,{children:"Plugins are consumed like:"}),"\n",(0,d.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,d.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,d.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#859900"},children:"import"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" { "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "})]}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"} "}),(0,d.jsx)(s.span,{style:{color:"#859900"},children:"from"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,d.jsx)(s.span,{style:{color:"#2AA198"},children:"'overlayscrollbars'"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"// single plugin"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:");"})]}),"\n",(0,d.jsx)(s.span,{className:"line"}),"\n",(0,d.jsx)(s.span,{className:"line",children:(0,d.jsx)(s.span,{style:{color:"#93A1A1"},children:"// multiple plugins"})}),"\n",(0,d.jsxs)(s.span,{className:"line",children:[(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"(["}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,d.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,d.jsx)(s.span,{style:{color:"#657B83"},children:"]);"})]})]})})}),"\n",(0,d.jsx)(s.h3,{id:"writing-plugins",children:"Writing Plugins"}),"\n",(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,d.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,d.jsx)(s.p,{children:"You can write and publish your own Plugins. This section is a work in progress."}),"\n",(0,d.jsxs)(s.h2,{id:"feature-comparison-to-v1",children:["Feature comparison to ",(0,d.jsx)(s.code,{children:"v1"})]}),"\n",(0,d.jsxs)(s.ul,{children:["\n",(0,d.jsxs)(s.li,{children:["The ",(0,d.jsx)(s.code,{children:"scroll"})," function is missing. Planned as a ",(0,d.jsx)(s.code,{children:"plugin"}),". (WIP)"]}),"\n",(0,d.jsxs)(s.li,{children:["Initialization to the ",(0,d.jsx)(s.code,{children:"textarea"})," element isn't supported yet. Planned as a ",(0,d.jsx)(s.code,{children:"plugin"}),". (WIP)"]}),"\n"]}),"\n",(0,d.jsx)(s.h2,{id:"future-plans",children:"Future Plans"}),"\n",(0,d.jsxs)(s.ul,{children:["\n",(0,d.jsx)(s.li,{children:"Provide plugin based support for missing features. (treeshakeable)"}),"\n",(0,d.jsx)(s.li,{children:"Frequent updates in terms of bug-fixes and enhancements. (always use latest browser features)"}),"\n",(0,d.jsx)(s.li,{children:"Improve tests. (unit & browser tests)"}),"\n"]}),"\n",(0,d.jsx)(s.h2,{id:"license",children:"License"}),"\n",(0,d.jsx)(s.p,{children:"MIT"})]})}var b=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},s=Object.assign({},(0,f.ah)(),e.components).wrapper;return s?(0,d.jsx)(s,Object.assign({},e,{children:(0,d.jsx)(B,e)})):B(e)},v=l(4028),w=l.n(v),N=function(e){return(0,d.jsx)("div",{className:"my-6 text-center font-medium text-sm uppercase relative",children:(0,d.jsxs)("span",{className:"p-3 bg-white",children:[e,(0,d.jsx)("div",{className:"absolute block top-1/2 left-1/2 w-[100%] xs:w-[80%] border-t-[1px] border-slate-300 translate-x-[-50%] translate-y-[-50%] z-[-1]"})]})})},S=function(){var e=(0,o.useRef)(null),s=(0,n.Z)((0,j.a)(),2),l=s[0],r=s[1];return(0,o.useEffect)(function(){if(e.current)return l(e.current),function(){var e;return null===(e=r())||void 0===e?void 0:e.destroy()}},[]),(0,d.jsxs)(x,{className:"px-6",children:[(0,d.jsx)("div",{className:"mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44",children:(0,d.jsx)("div",{className:t()("h-full",w().logo),children:(0,d.jsx)("img",{src:p.src,className:"h-full",alt:"OverlayScrollbars Logo",width:"200",height:"200"})})}),(0,d.jsxs)("h1",{className:"text-center xxs:text-4xl text-2xl font-bold my-11",children:["Overlay",(0,d.jsx)("wbr",{}),"Scrollbars"]}),(0,d.jsx)("p",{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."}),N("used by"),(0,d.jsx)("div",{ref:e,"data-overlayscrollbars-initialize":!0,children:(0,d.jsx)("div",{className:"flex justify-center",children:(0,d.jsxs)("div",{className:t()("inline-flex items-center gap-6 py-6",w().usedBy),children:[(0,d.jsx)("div",{className:"h-11 px-3 flex-grow flex-shrink-0",style:{filter:"brightness(0.35)"},children:(0,d.jsx)("img",{className:"h-full",src:y.src,alt:""})}),(0,d.jsx)("div",{className:"h-11 px-3 py-1.5 flex-grow flex-shrink-0",children:(0,d.jsx)("img",{className:"h-full",src:u.src,alt:""})}),(0,d.jsx)("div",{className:"h-11 p-3 flex-grow flex-shrink-0",children:(0,d.jsx)("img",{className:"h-full",src:g.src,alt:""})})]})})}),N((0,d.jsxs)("a",{href:"https://github.com/KingSora/OverlayScrollbars",target:"_blank",rel:"noreferrer",children:[(0,d.jsx)(h,{className:"inline-block w-11 hover:scale-110 text-primary-dark hover:text-primary-blue1 active:text-primary-blue2 transition-transformColor ease-in-out duration-300",svg:m,icon:"github"}),(0,d.jsx)("span",{className:"sr-only",children:"OverlayScrollbars on Github"})]})),(0,d.jsxs)("p",{className:"text-center text-sm text-primary-gray2 mx-auto max-w-screen-sm my-11 font-medium",children:["This page is a work in progress. For now refer to the TypeScript definitions for a more detailed documentation.",(0,d.jsx)("br",{}),"Looking for the v1 docs?"," ",(0,d.jsx)("a",{href:"v1",className:"text-primary-blue2 underline",children:"Follow this link"}),"."]}),(0,d.jsxs)("div",{className:"mx-auto flex sm:flex-row justify-center gap-2 items-center flex-wrap",children:[(0,d.jsx)("a",{href:"https://www.npmjs.com/package/overlayscrollbars",children:(0,d.jsx)("img",{src:"https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square",alt:"Downloads"})}),(0,d.jsx)("a",{href:"https://www.npmjs.com/package/overlayscrollbars",children:(0,d.jsx)("img",{src:"https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square",alt:"Version"})}),(0,d.jsx)("a",{href:"https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE",children:(0,d.jsx)("img",{src:"https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square",alt:"License"})}),(0,d.jsx)("a",{href:"https://app.codecov.io/gh/KingSora/OverlayScrollbars",children:(0,d.jsx)("img",{src:"https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square",alt:"Code Coverage"})}),(0,d.jsx)("a",{href:"https://bundlephobia.com/package/overlayscrollbars",children:(0,d.jsx)("img",{src:"https://img.shields.io/bundlephobia/minzip/overlayscrollbars?label=max.%20bundle%20size&style=flat-square",alt:"Max. Bundle Size"})})]}),(0,d.jsx)("div",{className:"mt-11 prose prose-primary mx-auto pb-32",children:(0,d.jsx)(b,{})})]})}},4028:function(e){e.exports={logo:"assets_logo__UC59w",usedBySeparator:"assets_usedBySeparator__yqt5h",usedBy:"assets_usedBy__FHTGG"}}},function(e){e.O(0,[774,888,179],function(){return e(e.s=2766)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/docs/_next/static/chunks/pages/index-8b1f48702cfdc018.js b/docs/_next/static/chunks/pages/index-8b1f48702cfdc018.js new file mode 100644 index 0000000..9c3dd7e --- /dev/null +++ b/docs/_next/static/chunks/pages/index-8b1f48702cfdc018.js @@ -0,0 +1,5 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{42:function(e,s){var l; /*! + Copyright (c) 2018 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/classnames +*/ !function(){"use strict";var n={}.hasOwnProperty;function r(){for(var e=[],s=0;s"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"script"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"type"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:'"text/javascript"'}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"src"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:'"path/to/overlayscrollbars.js"'}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"defer>"})]})]})})})]}),"\n",(0,o.jsx)(s.h2,{id:"initialization",children:"Initialization"}),"\n",(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": During initialization its expected that the ",(0,o.jsx)("b",{children:"CSS file is loaded and parsed"})," by the browser."]}),"\n"]}),"\n",(0,o.jsxs)(s.p,{children:["You can initialize either directly with an ",(0,o.jsx)(s.code,{children:"Element"})," or with an ",(0,o.jsx)(s.code,{children:"Object"})," where you have more control over the initialization process."]}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"// simple initialization with an element"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"osInstance"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"), {});"})]})]})})}),"\n",(0,o.jsx)(s.h3,{id:"bridging-initialization-flickering",children:"Bridging initialization flickering"}),"\n",(0,o.jsx)(s.p,{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",(0,o.jsxs)(s.p,{children:["To fix this behavior apply the ",(0,o.jsx)(s.code,{children:"data-overlayscrollbars-initialize"})," attribute to the target element (and ",(0,o.jsx)(s.code,{children:"html"})," element if the target element is ",(0,o.jsx)(s.code,{children:"body"}),")."]}),"\n",(0,o.jsx)(s.h3,{id:"initialization-with-an-object",children:"Initialization with an Object"}),"\n",(0,o.jsxs)("details",{children:[(0,o.jsx)("summary",{children:(0,o.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,o.jsx)("br",{}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,o.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description of all possibilities."]}),"\n"]}),(0,o.jsxs)(s.p,{children:["The only required field is the ",(0,o.jsx)(s.code,{children:"target"})," field. This is the field to which the plugin is applied to.",(0,o.jsx)(s.br,{}),"\n","If you use the object initialization only with the ",(0,o.jsx)(s.code,{children:"target"})," field, the outcome is equivalent to the element initialization:"]}),(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"// Both initializations have the same outcome"})}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"), {});"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"({ target: "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:") }, {});"})]})]})})}),(0,o.jsxs)(s.p,{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 ",(0,o.jsx)(s.code,{children:"viewport"})," element. Like this the library won't generate it but take the specified element instead:"]}),(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" elements: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" viewport: "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#viewport'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,o.jsx)(s.p,{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."}),(0,o.jsx)(s.hr,{}),(0,o.jsx)(s.p,{children:"You can also decide to which element the scrollbars should be applied to:"}),(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" slot: "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"parentElement"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,o.jsx)(s.hr,{}),(0,o.jsx)(s.p,{children:"And last but not least you can decide when the initialization should be canceled:"}),(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" cancel: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" nativeScrollbarsOverlaid: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" body: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,o.jsxs)(s.p,{children:["In the above example the initialization is canceled when the native scrollbars are overlaid or when your target is a ",(0,o.jsx)(s.code,{children:"body"})," element and the plugin determined that a initialization to the ",(0,o.jsx)(s.code,{children:"body"})," element would affect native functionality like ",(0,o.jsx)(s.code,{children:"window.scrollTo"}),"."]})]}),"\n",(0,o.jsx)(s.h2,{id:"options",children:"Options"}),"\n",(0,o.jsxs)(s.p,{children:["You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the ",(0,o.jsx)(s.code,{children:"options"})," method:"]}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"), {"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" overflow: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" x: "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'hidden'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),"\n",(0,o.jsx)(s.h3,{id:"options-in-depth",children:"Options in depth"}),"\n",(0,o.jsxs)("details",{children:[(0,o.jsx)("summary",{children:(0,o.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,o.jsx)("br",{}),(0,o.jsx)(s.p,{children:"The default options are:"}),(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"defaultOptions"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" paddingAbsolute: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" showNativeOverlaidScrollbars: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" update: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" elementEvents: [["}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'img'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'load'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"]],"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" debounce: ["}),(0,o.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,o.jsx)(s.span,{style:{color:"#D33682"},children:"33"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"],"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" attributes: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" ignoreMutation: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" overflow: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" x: "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'scroll'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" y: "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'scroll'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" theme: "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'os-theme-dark'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" visibility: "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'auto'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" autoHide: "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'never'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" autoHideDelay: "}),(0,o.jsx)(s.span,{style:{color:"#D33682"},children:"1300"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" dragScroll: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" clickScroll: "}),(0,o.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" pointers: ["}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'mouse'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'touch'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'pen'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"],"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"};"})})]})})}),(0,o.jsx)(s.h3,{id:"paddingabsolute",children:(0,o.jsx)(s.code,{children:"paddingAbsolute"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"boolean"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"false"})})]})})]}),(0,o.jsx)(s.p,{children:"Indicates whether the padding for the content shall be absolute."}),(0,o.jsx)(s.h3,{id:"shownativeoverlaidscrollbars",children:(0,o.jsx)(s.code,{children:"showNativeOverlaidScrollbars"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"boolean"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"false"})})]})})]}),(0,o.jsx)(s.p,{children:"Indicates whether the native overlaid scrollbars shall be visible."}),(0,o.jsx)(s.h3,{id:"updateelementevents",children:(0,o.jsx)(s.code,{children:"update.elementEvents"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"Array<[string, string]> | null"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"[['img', 'load']]"})})]})})]}),(0,o.jsxs)(s.p,{children:["An array of tuples. The first value in the tuple is an ",(0,o.jsx)(s.code,{children:"selector"})," and the second value are ",(0,o.jsx)(s.code,{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 ',(0,o.jsx)(s.code,{children:"img"})," element emits an ",(0,o.jsx)(s.code,{children:"load"}),' event."']}),(0,o.jsx)(s.h3,{id:"updatedebounce",children:(0,o.jsx)(s.code,{children:"update.debounce"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"[number, number] | number | null"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"[0, 33]"})})]})})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": If 0 is used for the timeout, ",(0,o.jsx)(s.code,{children:"requestAnimationFrame"})," instead of ",(0,o.jsx)(s.code,{children:"setTimeout"})," is used for the debounce."]}),"\n"]}),(0,o.jsxs)(s.p,{children:["Debounces the ",(0,o.jsx)(s.code,{children:"MutationObserver"})," which tracks changes to the content. If a ",(0,o.jsx)(s.strong,{children:"tuple"})," is passed, the first value is the timeout and second is the max wait. If only a ",(0,o.jsx)(s.strong,{children:"number"})," is passed you specify only the timeout and there is no max wait. With ",(0,o.jsx)(s.strong,{children:"null"})," there is no debounce. ",(0,o.jsx)(s.strong,{children:"Usefull to fine-tune performance."})]}),(0,o.jsx)(s.h3,{id:"updateattributes",children:(0,o.jsx)(s.code,{children:"update.attributes"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string[] | null"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"null"})})]})})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": There is a base array of attributes that the ",(0,o.jsx)(s.code,{children:"MutationObserver"})," always observes, even if this option is ",(0,o.jsx)(s.code,{children:"null"}),"."]}),"\n"]}),(0,o.jsxs)(s.p,{children:["An array of additional attributes that the ",(0,o.jsx)(s.code,{children:"MutationObserver"})," should observe for the content."]}),(0,o.jsx)(s.h3,{id:"updateignoremutation",children:(0,o.jsx)(s.code,{children:"update.ignoreMutation"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"((mutation) => any) | null"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"null"})})]})})]}),(0,o.jsxs)(s.p,{children:["A function which receives a ",(0,o.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord",children:(0,o.jsx)(s.code,{children:"MutationRecord"})})," as an argument. If the function returns a truthy value the mutation will be ignored and the plugin won't update. ",(0,o.jsx)(s.strong,{children:"Usefull to fine-tune performance."})]}),(0,o.jsx)(s.h3,{id:"overflowx",children:(0,o.jsx)(s.code,{children:"overflow.x"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"'scroll'"})})]})})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,o.jsx)(s.code,{children:"'hidden'"}),", ",(0,o.jsx)(s.code,{children:"'scroll'"}),", ",(0,o.jsx)(s.code,{children:"'visible'"}),", ",(0,o.jsx)(s.code,{children:"'visible-hidden'"})," and ",(0,o.jsx)(s.code,{children:"'visible-scroll'"}),"."]}),"\n"]}),(0,o.jsx)(s.p,{children:"The overflow behavior for the horizontal (x) axis."}),(0,o.jsx)(s.h3,{id:"overflowy",children:(0,o.jsx)(s.code,{children:"overflow.y"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"'scroll'"})})]})})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,o.jsx)(s.code,{children:"'hidden'"}),", ",(0,o.jsx)(s.code,{children:"'scroll'"}),", ",(0,o.jsx)(s.code,{children:"'visible'"}),", ",(0,o.jsx)(s.code,{children:"'visible-hidden'"})," and ",(0,o.jsx)(s.code,{children:"'visible-scroll'"}),"."]}),"\n"]}),(0,o.jsx)(s.p,{children:"The overflow behavior for the vertical (y) axis."}),(0,o.jsx)(s.h3,{id:"scrollbarstheme",children:(0,o.jsx)(s.code,{children:"scrollbars.theme"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string | null"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"'os-theme-dark'"})})]})})]}),(0,o.jsx)(s.p,{children:"Applies the specified theme (classname) to the scrollbars."}),(0,o.jsx)(s.h3,{id:"scrollbarsvisibility",children:(0,o.jsx)(s.code,{children:"scrollbars.visibility"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"'auto'"})})]})})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,o.jsx)(s.code,{children:"'visible'"}),", ",(0,o.jsx)(s.code,{children:"'hidden'"}),", and ",(0,o.jsx)(s.code,{children:"'auto'"}),"."]}),"\n"]}),(0,o.jsx)(s.p,{children:"The base visibility of the scrollbars."}),(0,o.jsx)(s.h3,{id:"scrollbarsautohide",children:(0,o.jsx)(s.code,{children:"scrollbars.autoHide"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"'never'"})})]})})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,o.jsx)(s.code,{children:"'never'"}),", ",(0,o.jsx)(s.code,{children:"'scroll'"}),", ",(0,o.jsx)(s.code,{children:"'leave'"})," and ",(0,o.jsx)(s.code,{children:"'move'"}),"."]}),"\n"]}),(0,o.jsx)(s.p,{children:"The possibility to hide visible scrollbars automatically after a certain user action."}),(0,o.jsx)(s.h3,{id:"scrollbarsautohidedelay",children:(0,o.jsx)(s.code,{children:"scrollbars.autoHideDelay"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"number"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"1300"})})]})})]}),(0,o.jsx)(s.p,{children:"The delay in milliseconds before the scrollbars are hidden automatically."}),(0,o.jsx)(s.h3,{id:"scrollbarsdragscroll",children:(0,o.jsx)(s.code,{children:"scrollbars.dragScroll"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"boolean"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"true"})})]})})]}),(0,o.jsx)(s.p,{children:"Indicates whether you can drag the scrollbar handles for scrolling."}),(0,o.jsx)(s.h3,{id:"scrollbarsclickscroll",children:(0,o.jsx)(s.code,{children:"scrollbars.clickScroll"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"boolean"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"false"})})]})})]}),(0,o.jsx)(s.p,{children:"Indicates whether you can click on the scrollbar track for scrolling."}),(0,o.jsx)(s.h3,{id:"scrollbarspointers",children:(0,o.jsx)(s.code,{children:"scrollbars.pointers"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"type"}),(0,o.jsx)(s.th,{align:"left",children:"default"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"string[] | null"})}),(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"['mouse', 'touch', 'pen']"})})]})})]}),(0,o.jsxs)(s.p,{children:["The ",(0,o.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType",children:(0,o.jsx)(s.code,{children:"PointerTypes"})})," the plugin should react to."]})]}),"\n",(0,o.jsx)(s.h2,{id:"events",children:"Events"}),"\n",(0,o.jsxs)(s.p,{children:["You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the ",(0,o.jsx)(s.code,{children:"on"})," and ",(0,o.jsx)(s.code,{children:"off"})," methods:"]}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"), {}, {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"updated"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(osInstance, onUpdatedArgs) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"// ..."})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),"\n",(0,o.jsx)(s.h3,{id:"events-in-depth",children:"Events in depth"}),"\n",(0,o.jsxs)("details",{children:[(0,o.jsx)("summary",{children:(0,o.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,o.jsx)("br",{}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": Every event receives the ",(0,o.jsx)(s.code,{children:"instance"})," from which it was invoked as the first argument. Always."]}),"\n"]}),(0,o.jsx)(s.h3,{id:"initialized",children:(0,o.jsx)(s.code,{children:"initialized"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"arguments"}),(0,o.jsx)(s.th,{align:"left",children:"description"})]})}),(0,o.jsx)(s.tbody,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"instance"})}),(0,o.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]})})]}),(0,o.jsx)(s.p,{children:"Is invoked after all generated elements, observers and events were appended to the DOM."}),(0,o.jsx)(s.h3,{id:"updated",children:(0,o.jsx)(s.code,{children:"updated"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"arguments"}),(0,o.jsx)(s.th,{align:"left",children:"description"})]})}),(0,o.jsxs)(s.tbody,{children:[(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"instance"})}),(0,o.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"onUpdatedArgs"})}),(0,o.jsxs)(s.td,{align:"left",children:["An ",(0,o.jsx)(s.code,{children:"object"})," which describes the update in detail."]})]})]})]}),(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": If an update was triggered but nothing changed, the event won't be invoked."]}),"\n"]}),(0,o.jsx)(s.p,{children:"Is invoked after the instace was updated."}),(0,o.jsx)(s.h3,{id:"destroyed",children:(0,o.jsx)(s.code,{children:"destroyed"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"arguments"}),(0,o.jsx)(s.th,{align:"left",children:"description"})]})}),(0,o.jsxs)(s.tbody,{children:[(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"instance"})}),(0,o.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"canceled"})}),(0,o.jsxs)(s.td,{align:"left",children:["An ",(0,o.jsx)(s.code,{children:"boolean"})," which indicates whether the initialization was canceled and thus destroyed."]})]})]})]}),(0,o.jsx)(s.p,{children:"Is invoked after all generated elements, observers and events were removed from the DOM."}),(0,o.jsx)(s.h3,{id:"scroll",children:(0,o.jsx)(s.code,{children:"scroll"})}),(0,o.jsxs)(s.table,{children:[(0,o.jsx)(s.thead,{children:(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.th,{align:"left",children:"arguments"}),(0,o.jsx)(s.th,{align:"left",children:"description"})]})}),(0,o.jsxs)(s.tbody,{children:[(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"instance"})}),(0,o.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,o.jsxs)(s.tr,{children:[(0,o.jsx)(s.td,{align:"left",children:(0,o.jsx)(s.code,{children:"event"})}),(0,o.jsxs)(s.td,{align:"left",children:["The original ",(0,o.jsx)(s.code,{children:"event"})," argument of the DOM event."]})]})]})]}),(0,o.jsx)(s.p,{children:"Is invoked by scrolling the viewport."})]}),"\n",(0,o.jsx)(s.h2,{id:"instance",children:"Instance"}),"\n",(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,o.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"interface"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"options"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"Options"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"options"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(newOptions"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"PartialOptions"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", pure"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"Options"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(eventListeners"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListeners"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", pure"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">)"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">[])"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"off"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">)"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"off"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:">[])"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"update"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(force"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"state"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"State"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"elements"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"Elements"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"destroy"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),"\n",(0,o.jsx)(s.h2,{id:"static-methods",children:"Static Methods"}),"\n",(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,o.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"interface"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbarsStatic"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" (target"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"InitializationTarget"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"|"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"undefined"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" (target"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"InitializationTarget"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", options"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"PartialOptions"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", eventListeners"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListeners"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(plugin"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"Plugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"|"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"Plugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"[])"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"valid"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(osInstance"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"any"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" osInstance "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"is"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"env"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#CB4B16"},children:"Environment"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),"\n",(0,o.jsx)(s.h2,{id:"plugins",children:"Plugins"}),"\n",(0,o.jsx)(s.p,{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",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.strong,{children:"ScrollbarsHidingPlugin"}),": Is needed for old browsers which aren't supporting nativ scrollbar styling features. ",(0,o.jsx)(s.a,{href:"https://caniuse.com/?search=scrollbar%20styling",children:"You can find the list of browsers where you need this plugin here"})," (note that even though ",(0,o.jsx)(s.code,{children:"iOS Safari >= 14"})," is marked as unsupported you only need this plugin for ",(0,o.jsx)(s.code,{children:"iOS < 7.1"}),")."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.strong,{children:"SizeObserverPlugin"}),": Is needed for old browsers which aren't supporting the ",(0,o.jsx)(s.code,{children:"ResizeObserver"})," api. ",(0,o.jsx)(s.a,{href:"https://caniuse.com/?search=ResizeObserver",children:"You can find the list of browsers where you need this plugin here"})]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.strong,{children:"ClickScrollPlugin"}),": If you want to use the option ",(0,o.jsx)(s.code,{children:"scrollbars: { clickScroll: true }"}),"."]}),"\n"]}),"\n",(0,o.jsx)(s.h3,{id:"consuming-plugins",children:"Consuming Plugins"}),"\n",(0,o.jsx)(s.p,{children:"Plugins are consumed like:"}),"\n",(0,o.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,o.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#859900"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" { "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"} "}),(0,o.jsx)(s.span,{style:{color:"#859900"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,o.jsx)(s.span,{style:{color:"#2AA198"},children:"'overlayscrollbars'"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"// single plugin"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line"}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"#93A1A1"},children:"// multiple plugins"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"(["}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,o.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,o.jsx)(s.span,{style:{color:"#657B83"},children:"]);"})]})]})})}),"\n",(0,o.jsx)(s.h3,{id:"writing-plugins",children:"Writing Plugins"}),"\n",(0,o.jsxs)(s.blockquote,{children:["\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,o.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,o.jsx)(s.p,{children:"You can write and publish your own Plugins. This section is a work in progress."}),"\n",(0,o.jsxs)(s.h2,{id:"feature-comparison-to-v1",children:["Feature comparison to ",(0,o.jsx)(s.code,{children:"v1"})]}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:["The ",(0,o.jsx)(s.code,{children:"scroll"})," function is missing. Planned as a ",(0,o.jsx)(s.code,{children:"plugin"}),". (WIP)"]}),"\n",(0,o.jsxs)(s.li,{children:["Initialization to the ",(0,o.jsx)(s.code,{children:"textarea"})," element isn't supported yet. Planned as a ",(0,o.jsx)(s.code,{children:"plugin"}),". (WIP)"]}),"\n"]}),"\n",(0,o.jsx)(s.h2,{id:"future-plans",children:"Future Plans"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsx)(s.li,{children:"Provide plugin based support for missing features. (treeshakeable)"}),"\n",(0,o.jsx)(s.li,{children:"Frequent updates in terms of bug-fixes and enhancements. (always use latest browser features)"}),"\n",(0,o.jsx)(s.li,{children:"Improve tests. (unit & browser tests)"}),"\n"]}),"\n",(0,o.jsx)(s.h2,{id:"license",children:"License"}),"\n",(0,o.jsx)(s.p,{children:"MIT"})]})}var B=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},s=Object.assign({},(0,m.ah)(),e.components).wrapper;return s?(0,o.jsx)(s,Object.assign({},e,{children:(0,o.jsx)(f,e)})):f(e)},b=l(4028),v=l.n(b),w=function(e){return(0,o.jsx)("div",{className:"my-6 text-center font-medium text-sm uppercase relative",children:(0,o.jsxs)("span",{className:"p-3 bg-white",children:[e,(0,o.jsx)("div",{className:"absolute block top-1/2 left-1/2 w-[100%] xs:w-[80%] border-t-[1px] border-slate-300 translate-x-[-50%] translate-y-[-50%] z-[-1]"})]})})},N=function(){return(0,o.jsxs)(h,{className:"px-6",children:[(0,o.jsx)("div",{className:"mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44",children:(0,o.jsx)("div",{className:a()("h-full",v().logo),children:(0,o.jsx)("img",{src:j.src,className:"h-full",alt:"OverlayScrollbars Logo",width:"200",height:"200"})})}),(0,o.jsxs)("h1",{className:"text-center xxs:text-4xl text-2xl font-bold my-11",children:["Overlay",(0,o.jsx)("wbr",{}),"Scrollbars"]}),(0,o.jsx)("p",{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."}),w("used by"),(0,o.jsx)(x.E,{children:(0,o.jsx)("div",{className:"flex justify-center",children:(0,o.jsxs)("div",{className:a()("inline-flex items-center gap-6 py-6",v().usedBy),children:[(0,o.jsx)("div",{className:"h-11 px-3 flex-grow flex-shrink-0",style:{filter:"brightness(0.35)"},children:(0,o.jsx)("img",{className:"h-full",src:p.src,alt:""})}),(0,o.jsx)("div",{className:"h-11 px-3 py-1.5 flex-grow flex-shrink-0",children:(0,o.jsx)("img",{className:"h-full",src:y.src,alt:""})}),(0,o.jsx)("div",{className:"h-11 p-3 flex-grow flex-shrink-0",children:(0,o.jsx)("img",{className:"h-full",src:u.src,alt:""})})]})})}),w((0,o.jsxs)("a",{href:"https://github.com/KingSora/OverlayScrollbars",target:"_blank",rel:"noreferrer",children:[(0,o.jsx)(d,{className:"inline-block w-11 hover:scale-110 text-primary-dark hover:text-primary-blue1 active:text-primary-blue2 transition-transformColor ease-in-out duration-300",svg:g,icon:"github"}),(0,o.jsx)("span",{className:"sr-only",children:"OverlayScrollbars on Github"})]})),(0,o.jsxs)("p",{className:"text-center text-sm text-primary-gray2 mx-auto max-w-screen-sm my-11 font-medium",children:["This page is a work in progress. For now refer to the TypeScript definitions for a more detailed documentation.",(0,o.jsx)("br",{}),"Looking for the v1 docs?"," ",(0,o.jsx)("a",{href:"v1",className:"text-primary-blue2 underline",children:"Follow this link"}),"."]}),(0,o.jsxs)("div",{className:"mx-auto flex sm:flex-row justify-center gap-2 items-center flex-wrap",children:[(0,o.jsx)("a",{href:"https://www.npmjs.com/package/overlayscrollbars",children:(0,o.jsx)("img",{src:"https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square",alt:"Downloads"})}),(0,o.jsx)("a",{href:"https://www.npmjs.com/package/overlayscrollbars",children:(0,o.jsx)("img",{src:"https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square",alt:"Version"})}),(0,o.jsx)("a",{href:"https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE",children:(0,o.jsx)("img",{src:"https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square",alt:"License"})}),(0,o.jsx)("a",{href:"https://app.codecov.io/gh/KingSora/OverlayScrollbars",children:(0,o.jsx)("img",{src:"https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square",alt:"Code Coverage"})}),(0,o.jsx)("a",{href:"https://bundlephobia.com/package/overlayscrollbars",children:(0,o.jsx)("img",{src:"https://img.shields.io/bundlephobia/minzip/overlayscrollbars?label=max.%20bundle%20size&style=flat-square",alt:"Max. Bundle Size"})})]}),(0,o.jsx)("div",{className:"mt-11 prose prose-primary mx-auto pb-32",children:(0,o.jsx)(B,{})})]})}},4028:function(e){e.exports={logo:"assets_logo__UC59w",usedBySeparator:"assets_usedBySeparator__yqt5h",usedBy:"assets_usedBy__FHTGG"}}},function(e){e.O(0,[774,888,179],function(){return e(e.s=2766)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index f27180d..312b03b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,4 +1,4 @@ -OverlayScrollbars
OverlayScrollbars Logo

OverlayScrollbars

A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.

used by
OverlayScrollbars on Github

This page is a work in progress. For now refer to the TypeScript definitions for a more detailed documentation.
Looking for the v1 docs? Follow this link.

DownloadsVersionLicenseCode CoverageMax. Bundle Size

Why

+OverlayScrollbars
OverlayScrollbars Logo

OverlayScrollbars

A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.

used by
OverlayScrollbars on Github

This page is a work in progress. For now refer to the TypeScript definitions for a more detailed documentation.
Looking for the v1 docs? Follow this link.

DownloadsVersionLicenseCode CoverageMax. Bundle Size

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

    @@ -23,10 +23,10 @@

    Getting started

    npm & node

    OverlayScrollbars can be downloaded from npm or the package manager of your choice:

    -
    npm install overlayscrollbars
    +
    npm install overlayscrollbars

    After installation it can be imported:

    -
    import 'overlayscrollbars/overlayscrollbars.css';
-import { OverlayScrollbars } from 'overlayscrollbars';
    +
    import 'overlayscrollbars/overlayscrollbars.css';
+import { OverlayScrollbars } from 'overlayscrollbars';

    Note: In older node versions use 'overlayscrollbars/styles/overlayscrollbars.css' as the import path for the CSS file.

    @@ -36,15 +36,15 @@
  • Use the javascript files with the .browser extension.
  • If you target old browsers use the .es5 javascript file, for new browsers .es6.
  • For production use the javascript / stylesheet files with the .min extension.
    • -

Embedd OverlayScrollbars manually in your HTML:

<link type="text/css" href="path/to/overlayscrollbars.css" rel="stylesheet" />
-<script type="text/javascript" src="path/to/overlayscrollbars.js" defer></script>
+

Embedd OverlayScrollbars manually in your HTML:

<link type="text/css" href="path/to/overlayscrollbars.css" rel="stylesheet" />
+<script type="text/javascript" src="path/to/overlayscrollbars.js" defer></script>

Initialization

Note: During initialization its expected that the CSS file is loaded and parsed by the browser.

You can initialize either directly with an Element or with an Object where you have more control over the initialization process.

-
// simple initialization with an element
-const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
+
// simple initialization with an element
+const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});

Bridging initialization flickering

If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM. While this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering.

@@ -53,36 +53,36 @@ While this period the native scrollbars are still visible and are switched out a

This is a in depth topic. Click here to read it.


Note: For now please refer to the TypeScript definitions for a more detailed description of all possibilities.

The only required field is the target field. This is the field to which the plugin is applied to.
-If you use the object initialization only with the target field, the outcome is equivalent to the element initialization:

// Both initializations have the same outcome
+If you use the object initialization only with the target field, the outcome is equivalent to the element initialization:
// Both initializations have the same outcome
 
 OverlayScrollbars(document.querySelector('#myElement'), {});
-OverlayScrollbars({ target: document.querySelector('#myElement') }, {});
In the initialization object you can specify how the library is handling generated elements.
-For example you can appoint an existing element as the viewport element. Like this the library won't generate it but take the specified element instead:
OverlayScrollbars({ 
+OverlayScrollbars({ target: document.querySelector('#myElement') }, {});

In the initialization object you can specify how the library is handling generated elements. +For example you can appoint an existing element as the viewport element. Like this the library won't generate it but take the specified element instead:

OverlayScrollbars({ 
  target: document.querySelector('#target'),
  elements: {
    viewport: document.querySelector('#viewport'),
  },
-}, {});

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.

You can also decide to which element the scrollbars should be applied to:

OverlayScrollbars({ 
+}, {});

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.

You can also decide to which element the scrollbars should be applied to:

OverlayScrollbars({ 
  target: document.querySelector('#target'),
  scrollbars: {
    slot: document.querySelector('#target').parentElement,
  },
-}, {});

And last but not least you can decide when the initialization should be canceled:

OverlayScrollbars({ 
+}, {});

And last but not least you can decide when the initialization should be canceled:

OverlayScrollbars({ 
  target: document.querySelector('#target'),
  cancel: {
    nativeScrollbarsOverlaid: true,
    body: null,
  }
-}, {});

In the above example the initialization is canceled when the native scrollbars are overlaid or when your target is a body element and the plugin determined that a initialization to the body element would affect native functionality like window.scrollTo.

+}, {});

In the above example the initialization is canceled when the native scrollbars are overlaid or when your target is a body element and the plugin determined that a initialization to the body element would affect native functionality like window.scrollTo.

Options

You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the options method:

-
OverlayScrollbars(document.querySelector('#myElement'), {
+
OverlayScrollbars(document.querySelector('#myElement'), {
   overflow: {
     x: 'hidden',
   },
-});

+});

Options in depth

-

This is a in depth topic. Click here to read it.


The default options are:

const defaultOptions = {
+
This is a in depth topic. Click here to read it.

The default options are:
const defaultOptions = {
   paddingAbsolute: false,
   showNativeOverlaidScrollbars: false,
   update: {
@@ -104,7 +104,7 @@ For example you can appoint an existing element as the viewport ele
     clickScroll: false,
     pointers: ['mouse', 'touch', 'pen'],
   },
-};
paddingAbsolute
typedefault
booleanfalse
Indicates whether the padding for the content shall be absolute.
showNativeOverlaidScrollbars
typedefault
booleanfalse
Indicates whether the native overlaid scrollbars shall be visible.
update.elementEvents
typedefault
Array<[string, string]> | null[['img', 'load']]
An array of tuples. The first value in the tuple is an selector and the second value are 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 img element emits an load event."
update.debounce
typedefault
[number, number] | number | null[0, 33]

+};

paddingAbsolute

typedefault
booleanfalse

Indicates whether the padding for the content shall be absolute.

showNativeOverlaidScrollbars

typedefault
booleanfalse

Indicates whether the native overlaid scrollbars shall be visible.

update.elementEvents

typedefault
Array<[string, string]> | null[['img', 'load']]

An array of tuples. The first value in the tuple is an selector and the second value are 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 img element emits an load event."

update.debounce

typedefault
[number, number] | number | null[0, 33]

Note: If 0 is used for the timeout, requestAnimationFrame instead of setTimeout is used for the debounce.

Debounces the MutationObserver which tracks changes to the content. If a tuple is passed, the first value is the timeout and second is the max wait. If only a number is passed you specify only the timeout and there is no max wait. With null there is no debounce. Usefull to fine-tune performance.

update.attributes

typedefault
string[] | nullnull

Note: There is a base array of attributes that the MutationObserver always observes, even if this option is null.

@@ -119,11 +119,11 @@ For example you can appoint an existing element as the viewport ele

The possibility to hide visible scrollbars automatically after a certain user action.

scrollbars.autoHideDelay

typedefault
number1300

The delay in milliseconds before the scrollbars are hidden automatically.

scrollbars.dragScroll

typedefault
booleantrue

Indicates whether you can drag the scrollbar handles for scrolling.

scrollbars.clickScroll

typedefault
booleanfalse

Indicates whether you can click on the scrollbar track for scrolling.

scrollbars.pointers

typedefault
string[] | null['mouse', 'touch', 'pen']

The PointerTypes the plugin should react to.

Events

You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the on and off methods:

-
OverlayScrollbars(document.querySelector('#myElement'), {}, {
+
OverlayScrollbars(document.querySelector('#myElement'), {}, {
   updated(osInstance, onUpdatedArgs) {
     // ...
   }
-});

+});

Events in depth

This is a in depth topic. Click here to read it.


Note: Every event receives the instance from which it was invoked as the first argument. Always.

@@ -134,7 +134,7 @@ For example you can appoint an existing element as the viewport ele

Note: For now please refer to the TypeScript definitions for a more detailed description.

-
interface OverlayScrollbars {
+
interface OverlayScrollbars {
   options(): Options;
   options(newOptions: PartialOptions, pure?: boolean): Options;
 
@@ -152,12 +152,12 @@ For example you can appoint an existing element as the viewport ele
   elements(): Elements;
 
   destroy(): void;
-}

+}

Static Methods

Note: For now please refer to the TypeScript definitions for a more detailed description.

-
interface OverlayScrollbarsStatic {
+
interface OverlayScrollbarsStatic {
   (target: InitializationTarget): OverlayScrollbars | undefined;
   (target: InitializationTarget, options: PartialOptions, eventListeners?: EventListeners): OverlayScrollbars;
 
@@ -166,7 +166,7 @@ For example you can appoint an existing element as the viewport ele
   valid(osInstance: any): osInstance is OverlayScrollbars;
 
   env(): Environment;
-}

+}

Plugins

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:

    @@ -176,7 +176,7 @@ For example you can appoint an existing element as the viewport ele

Consuming Plugins

Plugins are consumed like:

-
import { 
+
import { 
   OverlayScrollbars, 
   ScrollbarsHidingPlugin, 
   SizeObserverPlugin, 
@@ -187,7 +187,7 @@ For example you can appoint an existing element as the viewport ele
 OverlayScrollbars.plugin(ScrollbarsHidingPlugin);
 
 // multiple plugins
-OverlayScrollbars.plugin([SizeObserverPlugin, ClickScrollPlugin]);

+OverlayScrollbars.plugin([SizeObserverPlugin, ClickScrollPlugin]);

Writing Plugins

Note: For now please refer to the TypeScript definitions for a more detailed description.

@@ -205,4 +205,4 @@ For example you can appoint an existing element as the viewport ele
  • Improve tests. (unit & browser tests)

    • License

    -

    MIT

    \ No newline at end of file +

    MIT

    \ No newline at end of file diff --git a/website/src/components/md/Pre.tsx b/website/src/components/md/Pre.tsx index 04a3942..fa7cdf4 100644 --- a/website/src/components/md/Pre.tsx +++ b/website/src/components/md/Pre.tsx @@ -1,26 +1,13 @@ -import { useEffect, useRef } from 'react'; -import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle'; +import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import type { ComponentProps } from 'react'; -export const Pre = ({ children }: ComponentProps<'pre'>) => { - const ref = useRef(null); - const [initialize, instance] = useOverlayScrollbarsIdle({ - options: { +export const Pre = ({ children }: ComponentProps<'pre'>) => ( + { - if (ref.current) { - initialize(ref.current); - return () => instance()?.destroy(); - } - }, []); - - return ( - 
    -      {children}
-
    - ); -}; + }}> + {children} +     +); diff --git a/website/src/hooks/useOverlayScrollbarsIdle.ts b/website/src/hooks/useOverlayScrollbarsIdle.ts deleted file mode 100644 index 46349bb..0000000 --- a/website/src/hooks/useOverlayScrollbarsIdle.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { useEffect, useMemo } from 'react'; -import { useOverlayScrollbars } from 'overlayscrollbars-react'; -import type { - UseOverlayScrollbarsParams, - UseOverlayScrollbarsInitialization, - UseOverlayScrollbarsInstance, -} from 'overlayscrollbars-react'; -import type { InitializationTarget } from 'overlayscrollbars'; - -type Defer = [ - defer: (callback: () => any, options?: IdleRequestOptions) => void, - clear: () => void -]; - -const createDefer = (idle?: boolean): Defer => { - let id: number; - if (typeof window !== 'undefined' && window.requestIdleCallback) { - const setTFn = idle ? window.requestIdleCallback : window.requestAnimationFrame; - const clearTFn = idle ? window.cancelIdleCallback : window.cancelAnimationFrame; - return [ - (callback: () => any, options?: IdleRequestOptions) => { - clearTFn(id); - id = setTFn(callback, options); - }, - () => clearTFn(id), - ]; - } - // eslint-disable-next-line @typescript-eslint/no-empty-function - return [(callback: () => any) => callback(), () => {}]; -}; - -export const useOverlayScrollbarsIdle = ( - params?: UseOverlayScrollbarsParams -): [ - (...args: Parameters) => void, - UseOverlayScrollbarsInstance -] => { - const [deferIdle, clearIdle] = useMemo(() => createDefer(true), []); - const [deferRAF, clearRAF] = useMemo(() => createDefer(), []); - const [initialize, instance] = useOverlayScrollbars(params); - - useEffect(() => { - return () => { - clearRAF(); - clearIdle(); - instance()?.destroy(); - }; - }, []); - - return useMemo( - () => [ - (target: InitializationTarget) => { - deferIdle( - () => { - deferRAF(() => { - initialize(target); - }); - }, - { timeout: 2000 } - ); - }, - instance, - ], - [initialize, instance] - ); -}; diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx index 0056a6d..88870fa 100644 --- a/website/src/pages/_app.tsx +++ b/website/src/pages/_app.tsx @@ -4,7 +4,7 @@ import 'overlayscrollbars/overlayscrollbars.css'; import { useEffect } from 'react'; import Head from 'next/head'; import { MDXProvider } from '@mdx-js/react'; -import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle'; +import { useOverlayScrollbars } from 'overlayscrollbars-react'; import favicon from '~/assets/favicon.ico'; import { Pre } from '~/components/md/Pre'; import { Heading } from '~/components/md/Heading'; @@ -18,7 +18,7 @@ const generateHeading = (props: ComponentProps<'h1'>, tag: HeadingProps['tag']) ); const OverlayScrollbarsDocs = ({ Component, pageProps }: AppProps) => { - const [initialize, instance] = useOverlayScrollbarsIdle(); + const [initialize, instance] = useOverlayScrollbars({ defer: true }); useEffect(() => { initialize(document.body); diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 285f40d..4c0ba85 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -1,6 +1,5 @@ import classnames from 'classnames'; -import { useEffect, useRef } from 'react'; -import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle'; +import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { PageContainer } from '~/components/PageContainer'; import { Icon } from '~/components/Icon'; import logo from '~/assets/img/logo.svg'; @@ -23,16 +22,6 @@ const separator = (children: ReactNode) => ( ); const IndexPage: NextPage = () => { - const usedByRef = useRef(null); - const [initialize, instance] = useOverlayScrollbarsIdle(); - - useEffect(() => { - if (usedByRef.current) { - initialize(usedByRef.current); - return () => instance()?.destroy(); - } - }, []); - return (
    @@ -56,7 +45,7 @@ const IndexPage: NextPage = () => { overlay scrollbars and keeps the native functionality and feeling.

    {separator('used by')} -
    +
    {
    -
    + {separator(