From e605f38b328b61f914995b1398a8b8e1f4cef2d8 Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Wed, 16 Nov 2022 16:27:03 +0100 Subject: [PATCH] improve website --- docs/404.html | 4 ++-- .../_buildManifest.js | 2 +- .../_ssgManifest.js | 0 .../{index-8b1f48702cfdc018.js => index-176d2084c923ee5d.js} | 2 +- .../css/{a0f974289bbacc23.css => 0f354583d4d0b354.css} | 2 +- docs/index.html | 4 ++-- website/src/pages/index.tsx | 5 +++++ 7 files changed, 12 insertions(+), 7 deletions(-) rename docs/_next/static/{VwHqkUJW9n3wufDxEPeFw => _bPg3vH_J2-WFyZ_VUHs2}/_buildManifest.js (79%) rename docs/_next/static/{VwHqkUJW9n3wufDxEPeFw => _bPg3vH_J2-WFyZ_VUHs2}/_ssgManifest.js (100%) rename docs/_next/static/chunks/pages/{index-8b1f48702cfdc018.js => index-176d2084c923ee5d.js} (98%) rename docs/_next/static/css/{a0f974289bbacc23.css => 0f354583d4d0b354.css} (87%) diff --git a/docs/404.html b/docs/404.html index 28a7e60..f14d5d6 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/VwHqkUJW9n3wufDxEPeFw/_buildManifest.js b/docs/_next/static/_bPg3vH_J2-WFyZ_VUHs2/_buildManifest.js similarity index 79% rename from docs/_next/static/VwHqkUJW9n3wufDxEPeFw/_buildManifest.js rename to docs/_next/static/_bPg3vH_J2-WFyZ_VUHs2/_buildManifest.js index 9d2a6f5..52e11a3 100644 --- a/docs/_next/static/VwHqkUJW9n3wufDxEPeFw/_buildManifest.js +++ b/docs/_next/static/_bPg3vH_J2-WFyZ_VUHs2/_buildManifest.js @@ -1 +1 @@ -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 +self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/054cd89f2e050c9e.css","static/chunks/pages/index-176d2084c923ee5d.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/VwHqkUJW9n3wufDxEPeFw/_ssgManifest.js b/docs/_next/static/_bPg3vH_J2-WFyZ_VUHs2/_ssgManifest.js similarity index 100% rename from docs/_next/static/VwHqkUJW9n3wufDxEPeFw/_ssgManifest.js rename to docs/_next/static/_bPg3vH_J2-WFyZ_VUHs2/_ssgManifest.js diff --git a/docs/_next/static/chunks/pages/index-8b1f48702cfdc018.js b/docs/_next/static/chunks/pages/index-176d2084c923ee5d.js similarity index 98% rename from docs/_next/static/chunks/pages/index-8b1f48702cfdc018.js rename to docs/_next/static/chunks/pages/index-176d2084c923ee5d.js index 9c3dd7e..e3cad02 100644 --- a/docs/_next/static/chunks/pages/index-8b1f48702cfdc018.js +++ b/docs/_next/static/chunks/pages/index-176d2084c923ee5d.js @@ -2,4 +2,4 @@ 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 +*/ !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",{className:"min-h-[20px]",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",{className:"min-h-[20px]",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",{className:"min-h-[20px]",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",{className:"min-h-[20px]",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",{className:"min-h-[20px]",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/_next/static/css/a0f974289bbacc23.css b/docs/_next/static/css/0f354583d4d0b354.css similarity index 87% rename from docs/_next/static/css/a0f974289bbacc23.css rename to docs/_next/static/css/0f354583d4d0b354.css index 4525c79..1b95ccf 100644 --- a/docs/_next/static/css/a0f974289bbacc23.css +++ b/docs/_next/static/css/0f354583d4d0b354.css @@ -1,6 +1,6 @@ .default\:fill-current{fill:currentColor}/* ! tailwindcss v3.2.0 | MIT License | https://tailwindcss.com -*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Noto Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where([class~=lead]):not(:where([class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(hr):not(:where([class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(h1):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111;border-bottom:1px solid;border-color:#cbd5e1;padding-bottom:.5rem}.prose :where(h1 strong):not(:where([class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333;border-bottom:1px solid;border-color:#cbd5e1;padding-bottom:.5rem}.prose :where(h2 strong):not(:where([class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure>*):not(:where([class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose :where(code):not(:where([class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em;background:var(--tw-prose-pre-bg);padding:.25rem;border-radius:.375rem;overflow-wrap:break-word}.prose :where(a code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose] *)){vertical-align:top}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(p):not(:where([class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(video):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(hr+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose :where(b):not(:where([class~=not-prose] *)){font-weight:600}.prose :where(h5):not(:where([class~=not-prose] *)){color:#0a376b;font-weight:600;font-size:.875rem;font-size:[object Object]}.prose :where(h6):not(:where([class~=not-prose] *)){color:#0a376b;font-weight:600;font-size:.875rem;font-size:[object Object]}.prose :where(blockquote>p>strong:first-child):not(:where([class~=not-prose] *)){color:#4276ff}.prose :where(summary>:only-child,):not(:where([class~=not-prose] *)){display:inline;margin:0}.prose :where(summary):not(:where([class~=not-prose] *)){display:list-item;cursor:pointer}.prose-sm :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-sm :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-base :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose-base :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose-base :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose-base :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose-base :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose-base :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-base :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-lg :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.8888889em;margin-bottom:.8888889em}.prose-lg :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-lg :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-lg :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-lg :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.8em;margin-bottom:.8em}.prose-xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.2em}.prose-xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.2em}.prose-xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.2em}.prose-xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.2em}.prose-xl :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-xl :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-2xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.8333333em;margin-bottom:.8333333em}.prose-2xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-2xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-2xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-2xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-2xl :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-2xl :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-primary{--tw-prose-body:#475774;--tw-prose-headings:#0a376b;--tw-prose-lead:#475774;--tw-prose-links:#4276ff;--tw-prose-bold:#0a376b;--tw-prose-counters:#475774;--tw-prose-bullets:#4276ff;--tw-prose-hr:#e2e8f0;--tw-prose-quotes:#0a376b;--tw-prose-quote-borders:#e2e8f0;--tw-prose-captions:#475774;--tw-prose-code:#0a376b;--tw-prose-pre-code:#fce7f3;--tw-prose-pre-bg:#f1f5f9;--tw-prose-th-borders:#e2e8f0;--tw-prose-td-borders:#e2e8f0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.top-1\/2{top:50%}.left-1\/2{left:50%}.z-\[-1\]{z-index:-1}.mx-1{margin-left:.25rem;margin-right:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-11{margin-top:2.75rem;margin-bottom:2.75rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-8{margin-top:2rem}.mt-11{margin-top:2.75rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-\[80px\]{height:80px}.h-\[33vh\]{height:33vh}.h-full{height:100%}.h-11{height:2.75rem}.max-h-40{max-height:10rem}.w-\[100\%\]{width:100%}.w-11{width:2.75rem}.max-w-screen-sm{max-width:768px}.flex-shrink-0{flex-shrink:0}.flex-grow-0{flex-grow:0}.flex-grow{flex-grow:1}.translate-x-\[-50\%\]{--tw-translate-x:-50%}.translate-x-\[-50\%\],.translate-y-\[-50\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y:-50%}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-6{gap:1.5rem}.gap-2{gap:.5rem}.border-t-\[1px\]{border-top-width:1px}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-3{padding:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.pb-32{padding-bottom:8rem}.text-center{text-align:center}.font-sans{font-family:Noto Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-medium{font-weight:600}.font-bold{font-weight:800}.font-normal{font-weight:400}.uppercase{text-transform:uppercase}.text-primary-dark{--tw-text-opacity:1;color:rgb(10 55 107/var(--tw-text-opacity))}.text-primary-gray2{--tw-text-opacity:1;color:rgb(105 121 150/var(--tw-text-opacity))}.text-primary-blue2{--tw-text-opacity:1;color:rgb(66 118 255/var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-transformColor{transition-property:transform,color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.default\:fill-current:default{fill:currentColor}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:text-primary-blue1:hover{--tw-text-opacity:1;color:rgb(51 142 255/var(--tw-text-opacity))}.active\:text-primary-blue2:active{--tw-text-opacity:1;color:rgb(66 118 255/var(--tw-text-opacity))}@media (min-width:374px){.xxs\:max-h-44{max-height:11rem}.xxs\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:640px){.xs\:w-\[80\%\]{width:80%}}@media (min-width:768px){.sm\:container{width:100%;margin-right:auto;margin-left:auto}@media (min-width:374px){.sm\:container{max-width:374px}}@media (min-width:640px){.sm\:container{max-width:640px}}@media (min-width:768px){.sm\:container{max-width:768px}}@media (min-width:960px){.sm\:container{max-width:960px}}@media (min-width:1280px){.sm\:container{max-width:1280px}}@media (min-width:1440px){.sm\:container{max-width:1440px}}@media (min-width:1536px){.sm\:container{max-width:1536px}}.sm\:flex-row{flex-direction:row}}@font-face{font-family:Noto Sans;src:url(/OverlayScrollbars/_next/static/media/NotoSans-Regular.c983f2f0.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Noto Sans;src:url(/OverlayScrollbars/_next/static/media/NotoSans-SemiBold.dedd3bcb.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Noto Sans;src:url(/OverlayScrollbars/_next/static/media/NotoSans-ExtraBold.d19a8e50.ttf) format("truetype");font-weight:800;font-style:normal;font-display:swap}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html){overflow:auto} +*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Noto Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where([class~=lead]):not(:where([class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(hr):not(:where([class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(h1):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111;border-bottom:1px solid;border-color:#cbd5e1;padding-bottom:.5rem}.prose :where(h1 strong):not(:where([class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333;border-bottom:1px solid;border-color:#cbd5e1;padding-bottom:.5rem}.prose :where(h2 strong):not(:where([class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure>*):not(:where([class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose :where(code):not(:where([class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em;background:var(--tw-prose-pre-bg);padding:.25rem;border-radius:.375rem;overflow-wrap:break-word}.prose :where(a code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose] *)){vertical-align:top}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(p):not(:where([class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(video):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(figure):not(:where([class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(hr+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose] *)){padding-right:0}.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose :where(b):not(:where([class~=not-prose] *)){font-weight:600}.prose :where(h5):not(:where([class~=not-prose] *)){color:#0a376b;font-weight:600;font-size:.875rem;font-size:[object Object]}.prose :where(h6):not(:where([class~=not-prose] *)){color:#0a376b;font-weight:600;font-size:.875rem;font-size:[object Object]}.prose :where(blockquote>p>strong:first-child):not(:where([class~=not-prose] *)){color:#4276ff}.prose :where(summary>:only-child,):not(:where([class~=not-prose] *)){display:inline;margin:0}.prose :where(summary):not(:where([class~=not-prose] *)){display:list-item;cursor:pointer}.prose-sm :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.5714286em;margin-bottom:.5714286em}.prose-sm :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.1428571em}.prose-sm :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.1428571em}.prose-sm :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-sm :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-base :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose-base :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose-base :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose-base :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.25em}.prose-base :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.25em}.prose-base :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-base :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-lg :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.8888889em;margin-bottom:.8888889em}.prose-lg :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-lg :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-lg :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-lg :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-lg :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.8em;margin-bottom:.8em}.prose-xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.2em}.prose-xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.2em}.prose-xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.2em}.prose-xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.2em}.prose-xl :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-xl :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-2xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)){margin-top:.8333333em;margin-bottom:.8333333em}.prose-2xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-2xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-2xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)){margin-top:1.3333333em}.prose-2xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)){margin-bottom:1.3333333em}.prose-2xl :where(.prose>:first-child):not(:where([class~=not-prose] *)){margin-top:0}.prose-2xl :where(.prose>:last-child):not(:where([class~=not-prose] *)){margin-bottom:0}.prose-primary{--tw-prose-body:#475774;--tw-prose-headings:#0a376b;--tw-prose-lead:#475774;--tw-prose-links:#4276ff;--tw-prose-bold:#0a376b;--tw-prose-counters:#475774;--tw-prose-bullets:#4276ff;--tw-prose-hr:#e2e8f0;--tw-prose-quotes:#0a376b;--tw-prose-quote-borders:#e2e8f0;--tw-prose-captions:#475774;--tw-prose-code:#0a376b;--tw-prose-pre-code:#fce7f3;--tw-prose-pre-bg:#f1f5f9;--tw-prose-th-borders:#e2e8f0;--tw-prose-td-borders:#e2e8f0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.top-1\/2{top:50%}.left-1\/2{left:50%}.z-\[-1\]{z-index:-1}.mx-1{margin-left:.25rem;margin-right:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-11{margin-top:2.75rem;margin-bottom:2.75rem}.mx-auto{margin-left:auto;margin-right:auto}.mt-8{margin-top:2rem}.mt-11{margin-top:2.75rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-\[80px\]{height:80px}.h-\[33vh\]{height:33vh}.h-full{height:100%}.h-11{height:2.75rem}.max-h-40{max-height:10rem}.min-h-\[20px\]{min-height:20px}.w-\[100\%\]{width:100%}.w-11{width:2.75rem}.max-w-screen-sm{max-width:768px}.flex-shrink-0{flex-shrink:0}.flex-grow-0{flex-grow:0}.flex-grow{flex-grow:1}.translate-x-\[-50\%\]{--tw-translate-x:-50%}.translate-x-\[-50\%\],.translate-y-\[-50\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y:-50%}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-6{gap:1.5rem}.gap-2{gap:.5rem}.border-t-\[1px\]{border-top-width:1px}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-3{padding:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.pb-32{padding-bottom:8rem}.text-center{text-align:center}.font-sans{font-family:Noto Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-medium{font-weight:600}.font-bold{font-weight:800}.font-normal{font-weight:400}.uppercase{text-transform:uppercase}.text-primary-dark{--tw-text-opacity:1;color:rgb(10 55 107/var(--tw-text-opacity))}.text-primary-gray2{--tw-text-opacity:1;color:rgb(105 121 150/var(--tw-text-opacity))}.text-primary-blue2{--tw-text-opacity:1;color:rgb(66 118 255/var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-transformColor{transition-property:transform,color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.default\:fill-current:default{fill:currentColor}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:text-primary-blue1:hover{--tw-text-opacity:1;color:rgb(51 142 255/var(--tw-text-opacity))}.active\:text-primary-blue2:active{--tw-text-opacity:1;color:rgb(66 118 255/var(--tw-text-opacity))}@media (min-width:374px){.xxs\:max-h-44{max-height:11rem}.xxs\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:640px){.xs\:w-\[80\%\]{width:80%}}@media (min-width:768px){.sm\:container{width:100%;margin-right:auto;margin-left:auto}@media (min-width:374px){.sm\:container{max-width:374px}}@media (min-width:640px){.sm\:container{max-width:640px}}@media (min-width:768px){.sm\:container{max-width:768px}}@media (min-width:960px){.sm\:container{max-width:960px}}@media (min-width:1280px){.sm\:container{max-width:1280px}}@media (min-width:1440px){.sm\:container{max-width:1440px}}@media (min-width:1536px){.sm\:container{max-width:1536px}}.sm\:flex-row{flex-direction:row}}@font-face{font-family:Noto Sans;src:url(/OverlayScrollbars/_next/static/media/NotoSans-Regular.c983f2f0.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Noto Sans;src:url(/OverlayScrollbars/_next/static/media/NotoSans-SemiBold.dedd3bcb.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Noto Sans;src:url(/OverlayScrollbars/_next/static/media/NotoSans-ExtraBold.d19a8e50.ttf) format("truetype");font-weight:800;font-style:normal;font-display:swap}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html){overflow:auto} /*! * OverlayScrollbars diff --git a/docs/index.html b/docs/index.html index 0297dba..b082d59 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

    @@ -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/pages/index.tsx b/website/src/pages/index.tsx index 4c0ba85..9ca9b2e 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -86,30 +86,35 @@ const IndexPage: NextPage = () => {
Downloads Version License Code Coverage Max. Bundle Size