From 1b7230750b2ef7a71e2196794d460565e3330088 Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Thu, 9 Mar 2023 00:48:19 +0100 Subject: [PATCH] improve documentation --- README.md | 18 ++--- docs/404.html | 4 +- .../_buildManifest.js | 2 +- .../_ssgManifest.js | 0 .../chunks/pages/index-79d5f55dc79d656d.js | 5 ++ .../chunks/pages/index-c016a008b2f405c3.js | 5 -- docs/index.html | 62 ++++++++++------ packages/overlayscrollbars/README.md | 18 ++--- website/src/components/index.mdx | 70 ++++++++++++------- 9 files changed, 115 insertions(+), 69 deletions(-) rename docs/_next/static/{RedqsvCUdhwuhIGeiNRlP => MyU_DR0NDL6t-x0Gm3Atx}/_buildManifest.js (79%) rename docs/_next/static/{RedqsvCUdhwuhIGeiNRlP => MyU_DR0NDL6t-x0Gm3Atx}/_ssgManifest.js (100%) create mode 100644 docs/_next/static/chunks/pages/index-79d5f55dc79d656d.js delete mode 100644 docs/_next/static/chunks/pages/index-c016a008b2f405c3.js diff --git a/README.md b/README.md index da1b193..3144c46 100644 --- a/README.md +++ b/README.md @@ -22,18 +22,19 @@ 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 +## Goals & Features.es6 - Simple, powerful and well documented API - - High browser compatibility - Firefox 59+, Chrome 55+, Opera 42+, Edge 12+, Safari 10+ and IE 11 - - Can be run on the server - SSR, SSG and ISR support - - Tested on various devices - Mobile, Desktop and Tablet - - Tested with various (and mixed) inputs - Mouse, touch and pen - - Treeshaking - bundle only what you really need - - Automatic update detection - no polling - - Usage of latest browser features - best performance in new browsers + - High browser compatibility - **Firefox 59+**, **Chrome 55+**, **Opera 42+**, **Edge 12+**, **Safari 10+** and **IE 11** + - Can be run on the server - **SSR**, **SSG** and **ISR** support + - Tested on various devices - **Mobile**, **Desktop** and **Tablet** + - Tested with various (and mixed) inputs - **Mouse**, **touch** and **pen** + - **Treeshaking** - bundle only what you really need + - Automatic update detection - **no polling** + - Usage of latest browser features - best **performance** in new browsers - Bidirectional - LTR or RTL direction support - Supports usage on the `body` element + - Supports all **virtual scrolling** libraries - Simple and effective scrollbar styling - Highly customizable - TypeScript support - fully written in TypeScript @@ -53,6 +54,7 @@ Additionally to the vanilla JavaScript version you can use the official framewor ## Getting started ### npm & nodejs + OverlayScrollbars can be downloaded from [npm](https://www.npmjs.com/package/overlayscrollbars) or the package manager of your choice: ```sh npm install overlayscrollbars diff --git a/docs/404.html b/docs/404.html index cbc9fb0..fde8f35 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/RedqsvCUdhwuhIGeiNRlP/_buildManifest.js b/docs/_next/static/MyU_DR0NDL6t-x0Gm3Atx/_buildManifest.js similarity index 79% rename from docs/_next/static/RedqsvCUdhwuhIGeiNRlP/_buildManifest.js rename to docs/_next/static/MyU_DR0NDL6t-x0Gm3Atx/_buildManifest.js index 67cdf00..7a428b4 100644 --- a/docs/_next/static/RedqsvCUdhwuhIGeiNRlP/_buildManifest.js +++ b/docs/_next/static/MyU_DR0NDL6t-x0Gm3Atx/_buildManifest.js @@ -1 +1 @@ -self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/054cd89f2e050c9e.css","static/chunks/pages/index-c016a008b2f405c3.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-79d5f55dc79d656d.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/RedqsvCUdhwuhIGeiNRlP/_ssgManifest.js b/docs/_next/static/MyU_DR0NDL6t-x0Gm3Atx/_ssgManifest.js similarity index 100% rename from docs/_next/static/RedqsvCUdhwuhIGeiNRlP/_ssgManifest.js rename to docs/_next/static/MyU_DR0NDL6t-x0Gm3Atx/_ssgManifest.js diff --git a/docs/_next/static/chunks/pages/index-79d5f55dc79d656d.js b/docs/_next/static/chunks/pages/index-79d5f55dc79d656d.js new file mode 100644 index 0000000..cacaba0 --- /dev/null +++ b/docs/_next/static/chunks/pages/index-79d5f55dc79d656d.js @@ -0,0 +1,5 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{42:function(e,s){var l; /*! + Copyright (c) 2018 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/classnames +*/ !function(){"use strict";var n={}.hasOwnProperty;function r(){for(var e=[],s=0;s"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"script"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"type"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"text/javascript"'}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"src"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"path/to/overlayscrollbars.browser.es.js"'}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"defer>"})]})]})})}),"\n",(0,t.jsxs)(s.p,{children:["You can then use the global variable ",(0,t.jsx)(s.code,{children:"OverlayScrollbarsGlobal"})," to access the api similar to how you can do it in nodejs / modules:"]}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"var"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" { "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"} "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbarsGlobal"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]})]})})}),"\n",(0,t.jsxs)(s.p,{children:["The examples in this documentation will use the ",(0,t.jsx)(s.code,{children:"import"})," syntax instead of the ",(0,t.jsx)(s.code,{children:"OverlayScrollbarsGlobal"})," object. Both versions are equivalent though."]}),"\n",(0,t.jsx)(s.h2,{id:"initialization",children:"Initialization"}),"\n",(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": During initialization its expected that the ",(0,t.jsx)("b",{children:"CSS file is loaded and parsed"})," by the browser."]}),"\n"]}),"\n",(0,t.jsxs)(s.p,{children:["You can initialize either directly with an ",(0,t.jsx)(s.code,{children:"Element"})," or with an ",(0,t.jsx)(s.code,{children:"Object"})," where you have more control over the initialization process."]}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// simple initialization with an element"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"osInstance"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"), {});"})]})]})})}),"\n",(0,t.jsx)(s.h3,{id:"bridging-initialization-flickering",children:"Bridging initialization flickering"}),"\n",(0,t.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,t.jsxs)(s.p,{children:["To fix this behavior apply the ",(0,t.jsx)(s.code,{children:"data-overlayscrollbars-initialize"})," attribute to the target element (and ",(0,t.jsx)(s.code,{children:"html"})," element if the target element is ",(0,t.jsx)(s.code,{children:"body"}),")."]}),"\n",(0,t.jsx)(s.h3,{id:"initialization-with-an-object",children:"Initialization with an Object"}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,t.jsx)("br",{}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,t.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description of all possibilities."]}),"\n"]}),(0,t.jsxs)(s.p,{children:["The only required field is the ",(0,t.jsx)(s.code,{children:"target"})," field. This is the field to which the plugin is applied to.",(0,t.jsx)(s.br,{}),"\n","If you use the object initialization only with the ",(0,t.jsx)(s.code,{children:"target"})," field, the outcome is equivalent to the element initialization:"]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// Both initializations have the same outcome"})}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"), {});"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"({ target: "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:") }, {});"})]})]})})}),(0,t.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,t.jsx)(s.code,{children:"viewport"})," element. Like this the library won't generate it but take the specified element instead:"]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" elements: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" viewport: "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#viewport'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,t.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,t.jsx)(s.hr,{}),(0,t.jsx)(s.p,{children:"You can also decide to which element the scrollbars should be applied to:"}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" slot: "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"parentElement"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,t.jsx)(s.hr,{}),(0,t.jsx)(s.p,{children:"And last but not least you can decide when the initialization should be canceled:"}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" cancel: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" nativeScrollbarsOverlaid: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"true"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" body: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,t.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,t.jsx)(s.code,{children:"body"})," element and the plugin determined that a initialization to the ",(0,t.jsx)(s.code,{children:"body"})," element would affect native functionality like ",(0,t.jsx)(s.code,{children:"window.scrollTo"}),"."]})]}),"\n",(0,t.jsx)(s.h2,{id:"options",children:"Options"}),"\n",(0,t.jsxs)(s.p,{children:["You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the ",(0,t.jsx)(s.code,{children:"options"})," method:"]}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"), {"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" overflow: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" x: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'hidden'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),"\n",(0,t.jsx)(s.h3,{id:"options-in-depth",children:"Options in depth"}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,t.jsx)("br",{}),(0,t.jsx)(s.p,{children:"The default options are:"}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"defaultOptions"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" paddingAbsolute: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" showNativeOverlaidScrollbars: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" update: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" elementEvents: [["}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'img'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'load'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"]],"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" debounce: ["}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"33"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"],"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" attributes: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" ignoreMutation: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" overflow: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" x: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'scroll'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" y: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'scroll'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" theme: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'os-theme-dark'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" visibility: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'auto'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" autoHide: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'never'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" autoHideDelay: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"1300"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" dragScroll: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"true"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" clickScroll: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" pointers: ["}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'mouse'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'touch'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'pen'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"],"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"};"})})]})})}),(0,t.jsx)(s.h3,{id:"paddingabsolute",children:(0,t.jsx)(s.code,{children:"paddingAbsolute"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"boolean"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"false"})})]})})]}),(0,t.jsx)(s.p,{children:"Indicates whether the padding for the content shall be absolute."}),(0,t.jsx)(s.h3,{id:"shownativeoverlaidscrollbars",children:(0,t.jsx)(s.code,{children:"showNativeOverlaidScrollbars"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"boolean"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"false"})})]})})]}),(0,t.jsx)(s.p,{children:"Indicates whether the native overlaid scrollbars shall be visible."}),(0,t.jsx)(s.h3,{id:"updateelementevents",children:(0,t.jsx)(s.code,{children:"update.elementEvents"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"Array<[string, string]> | null"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"[['img', 'load']]"})})]})})]}),(0,t.jsxs)(s.p,{children:["An array of tuples. The first value in the tuple is an ",(0,t.jsx)(s.code,{children:"selector"})," and the second value are ",(0,t.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,t.jsx)(s.code,{children:"img"})," element emits an ",(0,t.jsx)(s.code,{children:"load"}),' event."']}),(0,t.jsx)(s.h3,{id:"updatedebounce",children:(0,t.jsx)(s.code,{children:"update.debounce"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"[number, number] | number | null"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"[0, 33]"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": If 0 is used for the timeout, ",(0,t.jsx)(s.code,{children:"requestAnimationFrame"})," instead of ",(0,t.jsx)(s.code,{children:"setTimeout"})," is used for the debounce."]}),"\n"]}),(0,t.jsxs)(s.p,{children:["Debounces the ",(0,t.jsx)(s.code,{children:"MutationObserver"})," which tracks changes to the content. If a ",(0,t.jsx)(s.strong,{children:"tuple"})," is passed, the first value is the timeout and second is the max wait. If only a ",(0,t.jsx)(s.strong,{children:"number"})," is passed you specify only the timeout and there is no max wait. With ",(0,t.jsx)(s.strong,{children:"null"})," there is no debounce. ",(0,t.jsx)(s.strong,{children:"Usefull to fine-tune performance."})]}),(0,t.jsx)(s.h3,{id:"updateattributes",children:(0,t.jsx)(s.code,{children:"update.attributes"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string[] | null"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"null"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": There is a base array of attributes that the ",(0,t.jsx)(s.code,{children:"MutationObserver"})," always observes, even if this option is ",(0,t.jsx)(s.code,{children:"null"}),"."]}),"\n"]}),(0,t.jsxs)(s.p,{children:["An array of additional attributes that the ",(0,t.jsx)(s.code,{children:"MutationObserver"})," should observe for the content."]}),(0,t.jsx)(s.h3,{id:"updateignoremutation",children:(0,t.jsx)(s.code,{children:"update.ignoreMutation"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"((mutation) => any) | null"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"null"})})]})})]}),(0,t.jsxs)(s.p,{children:["A function which receives a ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord",children:(0,t.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,t.jsx)(s.strong,{children:"Usefull to fine-tune performance."})]}),(0,t.jsx)(s.h3,{id:"overflowx",children:(0,t.jsx)(s.code,{children:"overflow.x"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"'scroll'"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,t.jsx)(s.code,{children:"'hidden'"}),", ",(0,t.jsx)(s.code,{children:"'scroll'"}),", ",(0,t.jsx)(s.code,{children:"'visible'"}),", ",(0,t.jsx)(s.code,{children:"'visible-hidden'"})," and ",(0,t.jsx)(s.code,{children:"'visible-scroll'"}),"."]}),"\n"]}),(0,t.jsx)(s.p,{children:"The overflow behavior for the horizontal (x) axis."}),(0,t.jsx)(s.h3,{id:"overflowy",children:(0,t.jsx)(s.code,{children:"overflow.y"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"'scroll'"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,t.jsx)(s.code,{children:"'hidden'"}),", ",(0,t.jsx)(s.code,{children:"'scroll'"}),", ",(0,t.jsx)(s.code,{children:"'visible'"}),", ",(0,t.jsx)(s.code,{children:"'visible-hidden'"})," and ",(0,t.jsx)(s.code,{children:"'visible-scroll'"}),"."]}),"\n"]}),(0,t.jsx)(s.p,{children:"The overflow behavior for the vertical (y) axis."}),(0,t.jsx)(s.h3,{id:"scrollbarstheme",children:(0,t.jsx)(s.code,{children:"scrollbars.theme"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string | null"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"'os-theme-dark'"})})]})})]}),(0,t.jsx)(s.p,{children:"Applies the specified theme (classname) to the scrollbars."}),(0,t.jsx)(s.h3,{id:"scrollbarsvisibility",children:(0,t.jsx)(s.code,{children:"scrollbars.visibility"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"'auto'"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,t.jsx)(s.code,{children:"'visible'"}),", ",(0,t.jsx)(s.code,{children:"'hidden'"}),", and ",(0,t.jsx)(s.code,{children:"'auto'"}),"."]}),"\n"]}),(0,t.jsx)(s.p,{children:"The base visibility of the scrollbars."}),(0,t.jsx)(s.h3,{id:"scrollbarsautohide",children:(0,t.jsx)(s.code,{children:"scrollbars.autoHide"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"'never'"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,t.jsx)(s.code,{children:"'never'"}),", ",(0,t.jsx)(s.code,{children:"'scroll'"}),", ",(0,t.jsx)(s.code,{children:"'leave'"})," and ",(0,t.jsx)(s.code,{children:"'move'"}),"."]}),"\n"]}),(0,t.jsx)(s.p,{children:"The possibility to hide visible scrollbars automatically after a certain user action."}),(0,t.jsx)(s.h3,{id:"scrollbarsautohidedelay",children:(0,t.jsx)(s.code,{children:"scrollbars.autoHideDelay"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"number"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"1300"})})]})})]}),(0,t.jsx)(s.p,{children:"The delay in milliseconds before the scrollbars are hidden automatically."}),(0,t.jsx)(s.h3,{id:"scrollbarsdragscroll",children:(0,t.jsx)(s.code,{children:"scrollbars.dragScroll"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"boolean"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"true"})})]})})]}),(0,t.jsx)(s.p,{children:"Indicates whether you can drag the scrollbar handles for scrolling."}),(0,t.jsx)(s.h3,{id:"scrollbarsclickscroll",children:(0,t.jsx)(s.code,{children:"scrollbars.clickScroll"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"boolean"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"false"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": This options requires the ",(0,t.jsx)(s.strong,{children:"ClickScrollPlugin"})," to work."]}),"\n"]}),(0,t.jsx)(s.p,{children:"Indicates whether you can click on the scrollbar track for scrolling."}),(0,t.jsx)(s.h3,{id:"scrollbarspointers",children:(0,t.jsx)(s.code,{children:"scrollbars.pointers"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string[] | null"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"['mouse', 'touch', 'pen']"})})]})})]}),(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType",children:(0,t.jsx)(s.code,{children:"PointerTypes"})})," the plugin should react to."]})]}),"\n",(0,t.jsx)(s.h2,{id:"events",children:"Events"}),"\n",(0,t.jsxs)(s.p,{children:["You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the ",(0,t.jsx)(s.code,{children:"on"})," and ",(0,t.jsx)(s.code,{children:"off"})," methods:"]}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"), {}, {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"updated"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(osInstance, onUpdatedArgs) {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// ..."})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),"\n",(0,t.jsx)(s.h3,{id:"events-in-depth",children:"Events in depth"}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,t.jsx)("br",{}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": Every event receives the ",(0,t.jsx)(s.code,{children:"instance"})," from which it was invoked as the first argument. Always."]}),"\n"]}),(0,t.jsx)(s.h3,{id:"initialized",children:(0,t.jsx)(s.code,{children:"initialized"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"arguments"}),(0,t.jsx)(s.th,{align:"left",children:"description"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"instance"})}),(0,t.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]})})]}),(0,t.jsx)(s.p,{children:"Is invoked after all generated elements, observers and events were appended to the DOM."}),(0,t.jsx)(s.h3,{id:"updated",children:(0,t.jsx)(s.code,{children:"updated"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"arguments"}),(0,t.jsx)(s.th,{align:"left",children:"description"})]})}),(0,t.jsxs)(s.tbody,{children:[(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"instance"})}),(0,t.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"onUpdatedArgs"})}),(0,t.jsxs)(s.td,{align:"left",children:["An ",(0,t.jsx)(s.code,{children:"object"})," which describes the update in detail."]})]})]})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": If an update was triggered but nothing changed, the event won't be invoked."]}),"\n"]}),(0,t.jsx)(s.p,{children:"Is invoked after the instace was updated."}),(0,t.jsx)(s.h3,{id:"destroyed",children:(0,t.jsx)(s.code,{children:"destroyed"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"arguments"}),(0,t.jsx)(s.th,{align:"left",children:"description"})]})}),(0,t.jsxs)(s.tbody,{children:[(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"instance"})}),(0,t.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"canceled"})}),(0,t.jsxs)(s.td,{align:"left",children:["An ",(0,t.jsx)(s.code,{children:"boolean"})," which indicates whether the initialization was canceled and thus destroyed."]})]})]})]}),(0,t.jsx)(s.p,{children:"Is invoked after all generated elements, observers and events were removed from the DOM."}),(0,t.jsx)(s.h3,{id:"scroll",children:(0,t.jsx)(s.code,{children:"scroll"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"arguments"}),(0,t.jsx)(s.th,{align:"left",children:"description"})]})}),(0,t.jsxs)(s.tbody,{children:[(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"instance"})}),(0,t.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"event"})}),(0,t.jsxs)(s.td,{align:"left",children:["The original ",(0,t.jsx)(s.code,{children:"event"})," argument of the DOM event."]})]})]})]}),(0,t.jsx)(s.p,{children:"Is invoked by scrolling the viewport."})]}),"\n",(0,t.jsx)(s.h2,{id:"instance",children:"Instance"}),"\n",(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,t.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"interface"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"options"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"Options"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"options"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(newOptions"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"PartialOptions"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", pure"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"Options"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(eventListeners"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListeners"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", pure"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">)"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">[])"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"off"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">)"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"off"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">[])"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"update"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(force"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"state"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"State"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"elements"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"Elements"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"destroy"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),"\n",(0,t.jsx)(s.h2,{id:"static-methods",children:"Static Methods"}),"\n",(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,t.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"interface"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbarsStatic"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" (target"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"InitializationTarget"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"|"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"undefined"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" (target"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"InitializationTarget"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", options"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"PartialOptions"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", eventListeners"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListeners"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(plugin"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"Plugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"|"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"Plugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"[])"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"valid"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(osInstance"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"any"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" osInstance "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"is"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"env"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"Environment"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),"\n",(0,t.jsx)(s.h2,{id:"styling",children:"Styling"}),"\n",(0,t.jsxs)(s.p,{children:["OverlayScrollbars comes with two themes called ",(0,t.jsx)(s.code,{children:"os-theme-dark"})," and ",(0,t.jsx)(s.code,{children:"os-theme-light"}),". You can use the ",(0,t.jsx)(s.code,{children:"scrollbars.theme"})," option to change the theme."]}),"\n",(0,t.jsxs)(s.p,{children:["Custom themes can be done in multiple ways. The easiest and fastest is to use the predefined set of ",(0,t.jsx)(s.code,{children:"CSS Custom Properties"})," aka. CSS variables. In case those aren't enought you can add custom class names or add custom styling to the existing class names."]}),"\n",(0,t.jsx)(s.h3,{id:"styling-in-depth",children:"Styling in depth"}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,t.jsx)(s.h3,{id:"css-custom-properties",children:"CSS Custom properties"}),(0,t.jsxs)(s.p,{children:["OverlayScrollbars provides a set of ",(0,t.jsx)(s.code,{children:"CSS Custom Properties"})," which makes scrollbar styling easy and fast:"]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"scss","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"scss","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-scrollbar"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The size of the scrollbar"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-size: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The axis-perpedicular padding of the scrollbar (horizontal: padding-y, vertical: padding-x)"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-padding-perpendicular: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The axis padding of the scrollbar (horizontal: padding-x, vertical: padding-y)"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-padding-axis: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The border radius of the scrollbar track"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-border-radius: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The background of the scrollbar track"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-bg: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :hover background of the scrollbar track"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-bg-hover: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :active background of the scrollbar track"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-bg-active: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The border of the scrollbar track"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-border: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :hover background of the scrollbar track"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-border-hover: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :active background of the scrollbar track"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-border-active: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The border radius of the scrollbar handle"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-border-radius: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The background of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-bg: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :hover background of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-bg-hover: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :active background of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-bg-active: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The border of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-border: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :hover border of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-border-hover: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :active border of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-border-active: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The min size of the scrollbar handle"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-min-size: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"33"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The max size of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-max-size: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-perpendicular-size: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"100"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"%"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :hover axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-perpendicular-size-hover: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"100"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"%"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :active axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-perpendicular-size-active: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"100"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"%"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// Increases the interactive area of the scrollbar handle."})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-interactive-area-offset: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),(0,t.jsxs)(s.p,{children:["You can alter the properties either for both scrollbars at once or per scrollbar axis. In the example below I've chosen ",(0,t.jsx)(s.code,{children:"os-theme-custom"})," as the theme name:"]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"scss","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"scss","data-theme":"default",children:[(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// horizontal and vertical scrollbar are 10px "})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-theme-custom"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-size: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"10"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// horizontal scrollbar is 10px"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-theme-custom.os-scrollbar-horizontal"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-size: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"10"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// vertical scrollbar is 20px"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-theme-custom.os-scrollbar-vertical"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-size: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"20"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),(0,t.jsxs)(s.p,{children:["You can then use your theme by assigning it via the ",(0,t.jsx)(s.code,{children:"scrollbars.theme"})," option:"]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"body"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", {"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" theme: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'os-theme-custom'"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),(0,t.jsx)(s.p,{children:"Since scrollbar styles are usually simple, this set of options should be enough to get your desired styling.\r\nIn case you need more freedom you can create your own styles by adding styling to the base class names described in the next section."}),(0,t.jsx)(s.h3,{id:"scrollbars-structure-and-css-class-names",children:"Scrollbars structure and CSS class names"}),(0,t.jsx)(s.p,{children:"The scrollbars HTML markup looks like:"}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"html","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"html","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"div"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"class"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"os-scrollbar os-scrollbar-horizontal"'}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"div"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"class"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"os-scrollbar-track"'}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"div"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"class"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"os-scrollbar-handle"'}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:""})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:""})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:""})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"div"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"class"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"os-scrollbar os-scrollbar-vertical"'}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"div"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"class"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"os-scrollbar-track"'}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"div"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"class"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"os-scrollbar-handle"'}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:""})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:""})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:""})]})]})})}),(0,t.jsxs)(s.p,{children:["The class names are simplified, in a real application the ",(0,t.jsx)(s.code,{children:".os-scrollbar"})," element can have additional class names which modify the appearance (mostly visibility and alignment)."]}),(0,t.jsx)(s.p,{children:"Below is a list of the most important class names you will encounter:"}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"CSS class name"}),(0,t.jsx)(s.th,{align:"left",children:"description"})]})}),(0,t.jsxs)(s.tbody,{children:[(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar"})}),(0,t.jsx)(s.td,{align:"left",children:"The root element of a scrollbar."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-rtl"})}),(0,t.jsxs)(s.td,{align:"left",children:["Indicates a ",(0,t.jsx)(s.code,{children:"RTL"})," direction of the host element the scrollbar belongs to."]})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-horizontal"})}),(0,t.jsx)(s.td,{align:"left",children:"The root element of a horizontal scrollbar."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-vertical"})}),(0,t.jsx)(s.td,{align:"left",children:"The root element of a vertical scrollbar."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-handle-interactive"})}),(0,t.jsxs)(s.td,{align:"left",children:["Indicates that the handle inside the scrollbar is interactive (",(0,t.jsx)(s.code,{children:"scrollbars.dragScroll"})," is ",(0,t.jsx)(s.code,{children:"true"}),")."]})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-track-interactive"})}),(0,t.jsxs)(s.td,{align:"left",children:["Indicates that the track inside the scrollbar is interactive (",(0,t.jsx)(s.code,{children:"scrollbars.clickScroll"})," is ",(0,t.jsx)(s.code,{children:"true"}),")."]})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-track"})}),(0,t.jsxs)(s.td,{align:"left",children:["The track element. This is the track of the nested handle element. If ",(0,t.jsx)(s.code,{children:"scrollbars.clickScroll"})," is ",(0,t.jsx)(s.code,{children:"true"})," this is the element users can click to change the scroll offset."]})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-handle"})}),(0,t.jsxs)(s.td,{align:"left",children:["The handle element. If ",(0,t.jsx)(s.code,{children:"scrollbars.dragScroll"})," is ",(0,t.jsx)(s.code,{children:"true"})," this is the handle users can drag to change the scroll offset."]})]})]})]}),(0,t.jsx)(s.p,{children:"If you create your own theme, please only use the classes listed above. All other classes are modifier classes used to change visibility, alignment and pointer-events of the scrollbars."}),(0,t.jsx)(s.h3,{id:"gotchas",children:"Gotchas"}),(0,t.jsxs)(s.p,{children:["Its important that the chosen theme class name in your CSS file matches the assigned theme name in the options. If the CSS class name is ",(0,t.jsx)(s.code,{children:".my-theme"})," the ",(0,t.jsx)(s.code,{children:"scrollbars.theme"})," has to be ",(0,t.jsx)(s.code,{children:"'my-theme'"}),"."]}),(0,t.jsxs)(s.p,{children:["Please be aware of your stack. ",(0,t.jsx)(s.code,{children:"css-modules"})," for example will alter your class names to prevent naming collisions. Always double check if your CSS is really what you expect it to be."]})]}),"\n",(0,t.jsx)(s.h2,{id:"plugins",children:"Plugins"}),"\n",(0,t.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,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.strong,{children:"ScrollbarsHidingPlugin"}),": Is needed for old browsers which aren't supporting native scrollbar styling features. ",(0,t.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,t.jsx)(s.code,{children:"iOS Safari >= 14"})," is marked as unsupported you only need this plugin for ",(0,t.jsx)(s.code,{children:"iOS < 7.1"}),")."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.strong,{children:"SizeObserverPlugin"}),": Is needed for old browsers which aren't supporting the ",(0,t.jsx)(s.code,{children:"ResizeObserver"})," api. ",(0,t.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,t.jsxs)(s.li,{children:[(0,t.jsx)(s.strong,{children:"ClickScrollPlugin"}),": If you want to use the option ",(0,t.jsx)(s.code,{children:"scrollbars: { clickScroll: true }"}),"."]}),"\n"]}),"\n",(0,t.jsx)(s.h3,{id:"consuming-plugins",children:"Consuming Plugins"}),"\n",(0,t.jsx)(s.p,{children:"Plugins are consumed like:"}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#859900"},children:"import"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" { "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"} "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"from"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'overlayscrollbars'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// single plugin"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:");"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// multiple plugins"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(["}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"]);"})]})]})})}),"\n",(0,t.jsx)(s.h3,{id:"writing-plugins",children:"Writing Plugins"}),"\n",(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,t.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,t.jsx)(s.p,{children:"You can write and publish your own Plugins. This section is a work in progress."}),"\n",(0,t.jsx)(s.h2,{id:"faq",children:"FAQ"}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsxs)(s.p,{children:["How do I ",(0,t.jsx)("code",{children:"get / set"})," the ",(0,t.jsx)("code",{children:"scroll position"})," of an element I applied the OverlayScrollbars to?"]})}),(0,t.jsx)("br",{}),(0,t.jsxs)(s.p,{children:["If you applied ",(0,t.jsx)(s.code,{children:"OverlayScrollbars"})," to the ",(0,t.jsx)(s.code,{children:"body"})," element you can use ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX",children:(0,t.jsx)(s.code,{children:"window.scrollX"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY",children:(0,t.jsx)(s.code,{children:"window.scrollY"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll",children:(0,t.jsx)(s.code,{children:"window.scroll"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo",children:(0,t.jsx)(s.code,{children:"window.scrollTo"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy",children:(0,t.jsx)(s.code,{children:"window.scrollBy"})})," or any other native api."]}),(0,t.jsxs)(s.p,{children:["If the plugin was applied to any other element you have to get the ",(0,t.jsx)(s.code,{children:"viewport"})," element with the ",(0,t.jsx)(s.code,{children:"instance.elements()"})," function first. With this element you can use ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop",children:(0,t.jsx)(s.code,{children:"element.scrollTop"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft",children:(0,t.jsx)(s.code,{children:"element.scrollLeft"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll",children:(0,t.jsx)(s.code,{children:"element.scroll"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo",children:(0,t.jsx)(s.code,{children:"element.scrollTo"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy",children:(0,t.jsx)(s.code,{children:"element.scrollBy"})})," or any other native api."]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" { "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"viewport"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" } "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"osInstance"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"elements"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"();"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" { "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"scrollLeft"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"scrollTop"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" } "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"viewport"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"; "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// get scroll offset"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"viewport"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"scrollTo"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"({ top: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" }); "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// set scroll offset"})]})]})})})]}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsxs)(s.p,{children:["Is it possible to ",(0,t.jsx)("code",{children:"limit / adjust the scrollbar handle length"}),"?"]})}),(0,t.jsx)("br",{}),(0,t.jsxs)(s.p,{children:["You can adjust a scrollbars handle length by setting a ",(0,t.jsx)(s.code,{children:"min-width / min-height"})," and ",(0,t.jsx)(s.code,{children:"max-width / max-height"})," style:"]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"css","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"css","data-theme":"default",children:[(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"/* horizontal boundaries */"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-scrollbar-horizontal"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-scrollbar-handle"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"min-width"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:": "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"50"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"max-width"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:": "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"200"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"/* vertical boundaries */"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-scrollbar-vertical"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-scrollbar-handle"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"min-height"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:": "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"40"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"max-height"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:": "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"40"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),(0,t.jsxs)(s.p,{children:["You can assign the same value to both properties to force the scrollbar to be always the same size.",(0,t.jsx)(s.br,{}),"\n","Setting the ",(0,t.jsx)(s.code,{children:"width"})," and ",(0,t.jsx)(s.code,{children:"height"})," properties won't work since those are set by the plugin automatically."]})]}),"\n",(0,t.jsxs)(s.h2,{id:"feature-comparison-to-v1",children:["Feature comparison to ",(0,t.jsx)(s.code,{children:"v1"})]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["The ",(0,t.jsx)(s.code,{children:"scroll"})," function is missing. Planned as a ",(0,t.jsx)(s.code,{children:"plugin"}),". (WIP)"]}),"\n",(0,t.jsxs)(s.li,{children:["Initialization to the ",(0,t.jsx)(s.code,{children:"textarea"})," element isn't supported yet. Planned as a ",(0,t.jsx)(s.code,{children:"plugin"}),". (WIP)"]}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"future-plans",children:"Future Plans"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"Provide plugin based support for missing features. (treeshakeable)"}),"\n",(0,t.jsx)(s.li,{children:"Frequent updates in terms of bug-fixes and enhancements. (always use latest browser features)"}),"\n",(0,t.jsx)(s.li,{children:"Improve tests. (unit & browser tests)"}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"license",children:"License"}),"\n",(0,t.jsx)(s.p,{children:"MIT"})]})}var f=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},s=Object.assign({},(0,g.ah)(),e.components).wrapper;return s?(0,t.jsx)(s,Object.assign({},e,{children:(0,t.jsx)(B,e)})):B(e)},b=l(4028),v=l.n(b),A=function(e){return(0,t.jsx)("div",{className:"my-6 text-center font-medium text-sm uppercase relative",children:(0,t.jsxs)("span",{className:"p-3 bg-white",children:[e,(0,t.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,t.jsxs)(h,{className:"px-6",children:[(0,t.jsx)("div",{className:"mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44",children:(0,t.jsx)("div",{className:i()("h-full",v().logo),children:(0,t.jsx)("img",{src:j.src,className:"h-full",alt:"OverlayScrollbars Logo",width:"200",height:"200"})})}),(0,t.jsxs)("h1",{className:"text-center xxs:text-4xl text-2xl font-bold my-11",children:["Overlay",(0,t.jsx)("wbr",{}),"Scrollbars"]}),(0,t.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."}),A("used by"),(0,t.jsx)(x.E,{defer:!0,children:(0,t.jsx)("div",{className:"flex justify-center",children:(0,t.jsxs)("div",{className:i()("inline-flex items-center gap-6 py-6",v().usedBy),children:[(0,t.jsx)("div",{className:"h-11 px-3 flex-grow flex-shrink-0",style:{filter:"brightness(0.35)"},children:(0,t.jsx)("img",{className:"h-full",src:p.src,alt:""})}),(0,t.jsx)("div",{className:"h-11 px-3 py-1.5 flex-grow flex-shrink-0",children:(0,t.jsx)("img",{className:"h-full",src:y.src,alt:""})}),(0,t.jsx)("div",{className:"h-11 p-3 flex-grow flex-shrink-0",children:(0,t.jsx)("img",{className:"h-full",src:m.src,alt:""})})]})})}),A((0,t.jsxs)("a",{href:"https://github.com/KingSora/OverlayScrollbars",target:"_blank",rel:"noreferrer",children:[(0,t.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:u,icon:"github"}),(0,t.jsx)("span",{className:"sr-only",children:"OverlayScrollbars on Github"})]})),(0,t.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,t.jsx)("br",{}),"Looking for the v1 docs?"," ",(0,t.jsx)("a",{href:"v1",className:"text-primary-blue2 underline",children:"Follow this link"}),"."]}),(0,t.jsxs)("div",{className:"mx-auto flex sm:flex-row justify-center gap-2 items-center flex-wrap",children:[(0,t.jsx)("a",{href:"https://www.npmjs.com/package/overlayscrollbars",children:(0,t.jsx)("img",{className:"min-h-[20px]",src:"https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square",alt:"Downloads"})}),(0,t.jsx)("a",{href:"https://www.npmjs.com/package/overlayscrollbars",children:(0,t.jsx)("img",{className:"min-h-[20px]",src:"https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square",alt:"Version"})}),(0,t.jsx)("a",{href:"https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE",children:(0,t.jsx)("img",{className:"min-h-[20px]",src:"https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square",alt:"License"})}),(0,t.jsx)("a",{href:"https://app.codecov.io/gh/KingSora/OverlayScrollbars",children:(0,t.jsx)("img",{className:"min-h-[20px]",src:"https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square",alt:"Code Coverage"})}),(0,t.jsx)("a",{href:"https://bundlephobia.com/package/overlayscrollbars",children:(0,t.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,t.jsx)("div",{className:"mt-11 prose prose-primary mx-auto pb-32",children:(0,t.jsx)(f,{})})]})}},4028:function(e){e.exports={logo:"assets_logo__UC59w",usedBySeparator:"assets_usedBySeparator__yqt5h",usedBy:"assets_usedBy__FHTGG"}}},function(e){e.O(0,[774,888,179],function(){return e(e.s=2766)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/docs/_next/static/chunks/pages/index-c016a008b2f405c3.js b/docs/_next/static/chunks/pages/index-c016a008b2f405c3.js deleted file mode 100644 index de5280a..0000000 --- a/docs/_next/static/chunks/pages/index-c016a008b2f405c3.js +++ /dev/null @@ -1,5 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{42:function(e,s){var l; /*! - Copyright (c) 2018 Jed Watson. - Licensed under the MIT License (MIT), see - http://jedwatson.github.io/classnames -*/ !function(){"use strict";var n={}.hasOwnProperty;function r(){for(var e=[],s=0;s"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"script"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"type"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"text/javascript"'}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"src"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"path/to/overlayscrollbars.js"'}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"defer>"})]})]})})}),(0,t.jsxs)(s.p,{children:["You can use the global variable ",(0,t.jsx)(s.code,{children:"OverlayScrollbarsGlobal"})," to access the api:"]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"var"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbarsGlobal"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"body"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", {});"})]})]})})})]}),"\n",(0,t.jsx)(s.h2,{id:"initialization",children:"Initialization"}),"\n",(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": During initialization its expected that the ",(0,t.jsx)("b",{children:"CSS file is loaded and parsed"})," by the browser."]}),"\n"]}),"\n",(0,t.jsxs)(s.p,{children:["You can initialize either directly with an ",(0,t.jsx)(s.code,{children:"Element"})," or with an ",(0,t.jsx)(s.code,{children:"Object"})," where you have more control over the initialization process."]}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// simple initialization with an element"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"osInstance"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"), {});"})]})]})})}),"\n",(0,t.jsx)(s.h3,{id:"bridging-initialization-flickering",children:"Bridging initialization flickering"}),"\n",(0,t.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,t.jsxs)(s.p,{children:["To fix this behavior apply the ",(0,t.jsx)(s.code,{children:"data-overlayscrollbars-initialize"})," attribute to the target element (and ",(0,t.jsx)(s.code,{children:"html"})," element if the target element is ",(0,t.jsx)(s.code,{children:"body"}),")."]}),"\n",(0,t.jsx)(s.h3,{id:"initialization-with-an-object",children:"Initialization with an Object"}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,t.jsx)("br",{}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,t.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description of all possibilities."]}),"\n"]}),(0,t.jsxs)(s.p,{children:["The only required field is the ",(0,t.jsx)(s.code,{children:"target"})," field. This is the field to which the plugin is applied to.",(0,t.jsx)(s.br,{}),"\n","If you use the object initialization only with the ",(0,t.jsx)(s.code,{children:"target"})," field, the outcome is equivalent to the element initialization:"]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// Both initializations have the same outcome"})}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"), {});"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"({ target: "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:") }, {});"})]})]})})}),(0,t.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,t.jsx)(s.code,{children:"viewport"})," element. Like this the library won't generate it but take the specified element instead:"]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" elements: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" viewport: "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#viewport'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,t.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,t.jsx)(s.hr,{}),(0,t.jsx)(s.p,{children:"You can also decide to which element the scrollbars should be applied to:"}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" slot: "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"parentElement"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,t.jsx)(s.hr,{}),(0,t.jsx)(s.p,{children:"And last but not least you can decide when the initialization should be canceled:"}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"({ "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" target: "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#target'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"),"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" cancel: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" nativeScrollbarsOverlaid: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"true"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" body: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}, {});"})})]})})}),(0,t.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,t.jsx)(s.code,{children:"body"})," element and the plugin determined that a initialization to the ",(0,t.jsx)(s.code,{children:"body"})," element would affect native functionality like ",(0,t.jsx)(s.code,{children:"window.scrollTo"}),"."]})]}),"\n",(0,t.jsx)(s.h2,{id:"options",children:"Options"}),"\n",(0,t.jsxs)(s.p,{children:["You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the ",(0,t.jsx)(s.code,{children:"options"})," method:"]}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"), {"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" overflow: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" x: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'hidden'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),"\n",(0,t.jsx)(s.h3,{id:"options-in-depth",children:"Options in depth"}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,t.jsx)("br",{}),(0,t.jsx)(s.p,{children:"The default options are:"}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"defaultOptions"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" paddingAbsolute: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" showNativeOverlaidScrollbars: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" update: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" elementEvents: [["}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'img'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'load'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"]],"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" debounce: ["}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"33"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"],"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" attributes: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" ignoreMutation: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"null"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" overflow: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" x: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'scroll'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" y: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'scroll'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" scrollbars: {"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" theme: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'os-theme-dark'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" visibility: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'auto'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" autoHide: "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'never'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" autoHideDelay: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"1300"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" dragScroll: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"true"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" clickScroll: "}),(0,t.jsx)(s.span,{style:{color:"#B58900"},children:"false"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:","})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" pointers: ["}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'mouse'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'touch'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'pen'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"],"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" },"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"};"})})]})})}),(0,t.jsx)(s.h3,{id:"paddingabsolute",children:(0,t.jsx)(s.code,{children:"paddingAbsolute"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"boolean"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"false"})})]})})]}),(0,t.jsx)(s.p,{children:"Indicates whether the padding for the content shall be absolute."}),(0,t.jsx)(s.h3,{id:"shownativeoverlaidscrollbars",children:(0,t.jsx)(s.code,{children:"showNativeOverlaidScrollbars"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"boolean"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"false"})})]})})]}),(0,t.jsx)(s.p,{children:"Indicates whether the native overlaid scrollbars shall be visible."}),(0,t.jsx)(s.h3,{id:"updateelementevents",children:(0,t.jsx)(s.code,{children:"update.elementEvents"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"Array<[string, string]> | null"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"[['img', 'load']]"})})]})})]}),(0,t.jsxs)(s.p,{children:["An array of tuples. The first value in the tuple is an ",(0,t.jsx)(s.code,{children:"selector"})," and the second value are ",(0,t.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,t.jsx)(s.code,{children:"img"})," element emits an ",(0,t.jsx)(s.code,{children:"load"}),' event."']}),(0,t.jsx)(s.h3,{id:"updatedebounce",children:(0,t.jsx)(s.code,{children:"update.debounce"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"[number, number] | number | null"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"[0, 33]"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": If 0 is used for the timeout, ",(0,t.jsx)(s.code,{children:"requestAnimationFrame"})," instead of ",(0,t.jsx)(s.code,{children:"setTimeout"})," is used for the debounce."]}),"\n"]}),(0,t.jsxs)(s.p,{children:["Debounces the ",(0,t.jsx)(s.code,{children:"MutationObserver"})," which tracks changes to the content. If a ",(0,t.jsx)(s.strong,{children:"tuple"})," is passed, the first value is the timeout and second is the max wait. If only a ",(0,t.jsx)(s.strong,{children:"number"})," is passed you specify only the timeout and there is no max wait. With ",(0,t.jsx)(s.strong,{children:"null"})," there is no debounce. ",(0,t.jsx)(s.strong,{children:"Usefull to fine-tune performance."})]}),(0,t.jsx)(s.h3,{id:"updateattributes",children:(0,t.jsx)(s.code,{children:"update.attributes"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string[] | null"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"null"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": There is a base array of attributes that the ",(0,t.jsx)(s.code,{children:"MutationObserver"})," always observes, even if this option is ",(0,t.jsx)(s.code,{children:"null"}),"."]}),"\n"]}),(0,t.jsxs)(s.p,{children:["An array of additional attributes that the ",(0,t.jsx)(s.code,{children:"MutationObserver"})," should observe for the content."]}),(0,t.jsx)(s.h3,{id:"updateignoremutation",children:(0,t.jsx)(s.code,{children:"update.ignoreMutation"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"((mutation) => any) | null"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"null"})})]})})]}),(0,t.jsxs)(s.p,{children:["A function which receives a ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord",children:(0,t.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,t.jsx)(s.strong,{children:"Usefull to fine-tune performance."})]}),(0,t.jsx)(s.h3,{id:"overflowx",children:(0,t.jsx)(s.code,{children:"overflow.x"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"'scroll'"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,t.jsx)(s.code,{children:"'hidden'"}),", ",(0,t.jsx)(s.code,{children:"'scroll'"}),", ",(0,t.jsx)(s.code,{children:"'visible'"}),", ",(0,t.jsx)(s.code,{children:"'visible-hidden'"})," and ",(0,t.jsx)(s.code,{children:"'visible-scroll'"}),"."]}),"\n"]}),(0,t.jsx)(s.p,{children:"The overflow behavior for the horizontal (x) axis."}),(0,t.jsx)(s.h3,{id:"overflowy",children:(0,t.jsx)(s.code,{children:"overflow.y"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"'scroll'"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,t.jsx)(s.code,{children:"'hidden'"}),", ",(0,t.jsx)(s.code,{children:"'scroll'"}),", ",(0,t.jsx)(s.code,{children:"'visible'"}),", ",(0,t.jsx)(s.code,{children:"'visible-hidden'"})," and ",(0,t.jsx)(s.code,{children:"'visible-scroll'"}),"."]}),"\n"]}),(0,t.jsx)(s.p,{children:"The overflow behavior for the vertical (y) axis."}),(0,t.jsx)(s.h3,{id:"scrollbarstheme",children:(0,t.jsx)(s.code,{children:"scrollbars.theme"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string | null"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"'os-theme-dark'"})})]})})]}),(0,t.jsx)(s.p,{children:"Applies the specified theme (classname) to the scrollbars."}),(0,t.jsx)(s.h3,{id:"scrollbarsvisibility",children:(0,t.jsx)(s.code,{children:"scrollbars.visibility"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"'auto'"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,t.jsx)(s.code,{children:"'visible'"}),", ",(0,t.jsx)(s.code,{children:"'hidden'"}),", and ",(0,t.jsx)(s.code,{children:"'auto'"}),"."]}),"\n"]}),(0,t.jsx)(s.p,{children:"The base visibility of the scrollbars."}),(0,t.jsx)(s.h3,{id:"scrollbarsautohide",children:(0,t.jsx)(s.code,{children:"scrollbars.autoHide"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"'never'"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": Valid values are: ",(0,t.jsx)(s.code,{children:"'never'"}),", ",(0,t.jsx)(s.code,{children:"'scroll'"}),", ",(0,t.jsx)(s.code,{children:"'leave'"})," and ",(0,t.jsx)(s.code,{children:"'move'"}),"."]}),"\n"]}),(0,t.jsx)(s.p,{children:"The possibility to hide visible scrollbars automatically after a certain user action."}),(0,t.jsx)(s.h3,{id:"scrollbarsautohidedelay",children:(0,t.jsx)(s.code,{children:"scrollbars.autoHideDelay"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"number"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"1300"})})]})})]}),(0,t.jsx)(s.p,{children:"The delay in milliseconds before the scrollbars are hidden automatically."}),(0,t.jsx)(s.h3,{id:"scrollbarsdragscroll",children:(0,t.jsx)(s.code,{children:"scrollbars.dragScroll"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"boolean"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"true"})})]})})]}),(0,t.jsx)(s.p,{children:"Indicates whether you can drag the scrollbar handles for scrolling."}),(0,t.jsx)(s.h3,{id:"scrollbarsclickscroll",children:(0,t.jsx)(s.code,{children:"scrollbars.clickScroll"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"boolean"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"false"})})]})})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": This options requires the ",(0,t.jsx)(s.strong,{children:"ClickScrollPlugin"})," to work."]}),"\n"]}),(0,t.jsx)(s.p,{children:"Indicates whether you can click on the scrollbar track for scrolling."}),(0,t.jsx)(s.h3,{id:"scrollbarspointers",children:(0,t.jsx)(s.code,{children:"scrollbars.pointers"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"type"}),(0,t.jsx)(s.th,{align:"left",children:"default"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"string[] | null"})}),(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"['mouse', 'touch', 'pen']"})})]})})]}),(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType",children:(0,t.jsx)(s.code,{children:"PointerTypes"})})," the plugin should react to."]})]}),"\n",(0,t.jsx)(s.h2,{id:"events",children:"Events"}),"\n",(0,t.jsxs)(s.p,{children:["You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the ",(0,t.jsx)(s.code,{children:"on"})," and ",(0,t.jsx)(s.code,{children:"off"})," methods:"]}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"document"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"querySelector"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'#myElement'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"), {}, {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"updated"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(osInstance, onUpdatedArgs) {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// ..."})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" }"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"});"})})]})})}),"\n",(0,t.jsx)(s.h3,{id:"events-in-depth",children:"Events in depth"}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,t.jsx)("br",{}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": Every event receives the ",(0,t.jsx)(s.code,{children:"instance"})," from which it was invoked as the first argument. Always."]}),"\n"]}),(0,t.jsx)(s.h3,{id:"initialized",children:(0,t.jsx)(s.code,{children:"initialized"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"arguments"}),(0,t.jsx)(s.th,{align:"left",children:"description"})]})}),(0,t.jsx)(s.tbody,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"instance"})}),(0,t.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]})})]}),(0,t.jsx)(s.p,{children:"Is invoked after all generated elements, observers and events were appended to the DOM."}),(0,t.jsx)(s.h3,{id:"updated",children:(0,t.jsx)(s.code,{children:"updated"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"arguments"}),(0,t.jsx)(s.th,{align:"left",children:"description"})]})}),(0,t.jsxs)(s.tbody,{children:[(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"instance"})}),(0,t.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"onUpdatedArgs"})}),(0,t.jsxs)(s.td,{align:"left",children:["An ",(0,t.jsx)(s.code,{children:"object"})," which describes the update in detail."]})]})]})]}),(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": If an update was triggered but nothing changed, the event won't be invoked."]}),"\n"]}),(0,t.jsx)(s.p,{children:"Is invoked after the instace was updated."}),(0,t.jsx)(s.h3,{id:"destroyed",children:(0,t.jsx)(s.code,{children:"destroyed"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"arguments"}),(0,t.jsx)(s.th,{align:"left",children:"description"})]})}),(0,t.jsxs)(s.tbody,{children:[(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"instance"})}),(0,t.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"canceled"})}),(0,t.jsxs)(s.td,{align:"left",children:["An ",(0,t.jsx)(s.code,{children:"boolean"})," which indicates whether the initialization was canceled and thus destroyed."]})]})]})]}),(0,t.jsx)(s.p,{children:"Is invoked after all generated elements, observers and events were removed from the DOM."}),(0,t.jsx)(s.h3,{id:"scroll",children:(0,t.jsx)(s.code,{children:"scroll"})}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"arguments"}),(0,t.jsx)(s.th,{align:"left",children:"description"})]})}),(0,t.jsxs)(s.tbody,{children:[(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"instance"})}),(0,t.jsx)(s.td,{align:"left",children:"The instance which invoked the event."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:"event"})}),(0,t.jsxs)(s.td,{align:"left",children:["The original ",(0,t.jsx)(s.code,{children:"event"})," argument of the DOM event."]})]})]})]}),(0,t.jsx)(s.p,{children:"Is invoked by scrolling the viewport."})]}),"\n",(0,t.jsx)(s.h2,{id:"instance",children:"Instance"}),"\n",(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,t.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"interface"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"options"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"Options"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"options"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(newOptions"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"PartialOptions"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", pure"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"Options"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(eventListeners"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListeners"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", pure"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">)"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"on"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">[])"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" () "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"=>"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"off"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">)"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"off"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"extends"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"keyof"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListenerArgs"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">(name"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", listener"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListener"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"N"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:">[])"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"update"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(force"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"boolean"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"state"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"State"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"elements"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"Elements"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"destroy"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),"\n",(0,t.jsx)(s.h2,{id:"static-methods",children:"Static Methods"}),"\n",(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,t.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"interface"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbarsStatic"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" (target"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"InitializationTarget"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"|"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"undefined"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" (target"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"InitializationTarget"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", options"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"PartialOptions"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", eventListeners"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"?:"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"EventListeners"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(plugin"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"Plugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"|"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"Plugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"[])"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"void"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"valid"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(osInstance"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"any"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:")"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" osInstance "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"is"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"env"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"()"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:":"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#CB4B16"},children:"Environment"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),"\n",(0,t.jsx)(s.h2,{id:"styling",children:"Styling"}),"\n",(0,t.jsxs)(s.p,{children:["OverlayScrollbars comes with two themes called ",(0,t.jsx)(s.code,{children:"os-theme-dark"})," and ",(0,t.jsx)(s.code,{children:"os-theme-light"}),". You can use the ",(0,t.jsx)(s.code,{children:"scrollbars.theme"})," option to change the theme."]}),"\n",(0,t.jsxs)(s.p,{children:["Custom themes can be done in multiple ways. The easiest and fastest is to use the predefined set of ",(0,t.jsx)(s.code,{children:"CSS Custom Properties"})," aka. CSS variables. In case those aren't enought you can add custom class names or add custom styling to the existing class names."]}),"\n",(0,t.jsx)(s.h3,{id:"styling-in-depth",children:"Styling in depth"}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsx)(s.p,{children:"This is a in depth topic. Click here to read it."})}),(0,t.jsx)(s.h3,{id:"css-custom-properties",children:"CSS Custom properties"}),(0,t.jsxs)(s.p,{children:["OverlayScrollbars provides a set of ",(0,t.jsx)(s.code,{children:"CSS Custom Properties"})," which makes scrollbar styling easy and fast:"]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"scss","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"scss","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-scrollbar"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The size of the scrollbar"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-size: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The axis-perpedicular padding of the scrollbar (horizontal: padding-y, vertical: padding-x)"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-padding-perpendicular: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The axis padding of the scrollbar (horizontal: padding-x, vertical: padding-y)"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-padding-axis: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The border radius of the scrollbar track"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-border-radius: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The background of the scrollbar track"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-bg: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :hover background of the scrollbar track"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-bg-hover: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :active background of the scrollbar track"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-bg-active: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The border of the scrollbar track"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-border: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :hover background of the scrollbar track"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-border-hover: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :active background of the scrollbar track"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-track-border-active: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The border radius of the scrollbar handle"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-border-radius: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The background of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-bg: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :hover background of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-bg-hover: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :active background of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-bg-active: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The border of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-border: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :hover border of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-border-hover: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :active border of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-border-active: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The min size of the scrollbar handle"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-min-size: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"33"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The max size of the scrollbar handle"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-max-size: none;"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-perpendicular-size: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"100"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"%"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :hover axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-perpendicular-size-hover: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"100"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"%"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// The :active axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-perpendicular-size-active: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"100"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"%"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// Increases the interactive area of the scrollbar handle."})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-handle-interactive-area-offset: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),(0,t.jsx)(s.p,{children:"You can alter the properties either for both scrollbars at once or per scrollbar axis:"}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"scss","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"scss","data-theme":"default",children:[(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// horizontal and vertical scrollbar are 10px "})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-theme-custom"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-size: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"10"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// horizontal scrollbar is 10px"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-theme-custom.os-scrollbar-horizontal"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-size: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"10"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// vertical scrollbar is 20px"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-theme-custom.os-scrollbar-vertical"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" --os-size: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"20"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),(0,t.jsx)(s.p,{children:"Since scrollbar styles are usually simple, this set of options should be enough to get your desired styling.\r\nIn case you need more freedom you can create your own styles by adding styling to the base class names described in the next section."}),(0,t.jsx)(s.h3,{id:"scrollbars-structure-and-css-class-names",children:"Scrollbars structure and CSS class names"}),(0,t.jsx)(s.p,{children:"The scrollbars HTML markup looks like:"}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"html","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"html","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"div"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"class"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"os-scrollbar os-scrollbar-horizontal"'}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"div"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"class"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"os-scrollbar-track"'}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"div"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"class"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"os-scrollbar-handle"'}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:""})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:""})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:""})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"div"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"class"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"os-scrollbar os-scrollbar-vertical"'}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"div"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"class"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"os-scrollbar-track"'}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"<"}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"div"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"class"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"os-scrollbar-handle"'}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:""})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:""})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:""})]})]})})}),(0,t.jsxs)(s.p,{children:["The class names are simplified, in a real application the ",(0,t.jsx)(s.code,{children:".os-scrollbar"})," element can have additional class names which modify the appearance (mostly visibility and alignment)."]}),(0,t.jsx)(s.p,{children:"Below is a list of the most important class names you will encounter:"}),(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{align:"left",children:"CSS class name"}),(0,t.jsx)(s.th,{align:"left",children:"description"})]})}),(0,t.jsxs)(s.tbody,{children:[(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar"})}),(0,t.jsx)(s.td,{align:"left",children:"The root element of a scrollbar."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-rtl"})}),(0,t.jsxs)(s.td,{align:"left",children:["Indicates a ",(0,t.jsx)(s.code,{children:"RTL"})," direction of the host element the scrollbar belongs to."]})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-horizontal"})}),(0,t.jsx)(s.td,{align:"left",children:"The root element of a horizontal scrollbar."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-vertical"})}),(0,t.jsx)(s.td,{align:"left",children:"The root element of a vertical scrollbar."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-handle-interactive"})}),(0,t.jsxs)(s.td,{align:"left",children:["Indicates that the handle inside the scrollbar is interactive (",(0,t.jsx)(s.code,{children:"scrollbars.dragScroll"})," is ",(0,t.jsx)(s.code,{children:"true"}),")."]})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-track-interactive"})}),(0,t.jsxs)(s.td,{align:"left",children:["Indicates that the track inside the scrollbar is interactive (",(0,t.jsx)(s.code,{children:"scrollbars.clickScroll"})," is ",(0,t.jsx)(s.code,{children:"true"}),")."]})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-track"})}),(0,t.jsxs)(s.td,{align:"left",children:["The track element. This is the track of the nested handle element. If ",(0,t.jsx)(s.code,{children:"scrollbars.clickScroll"})," is ",(0,t.jsx)(s.code,{children:"true"})," this is the element users can click to change the scroll offset."]})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{align:"left",children:(0,t.jsx)(s.code,{children:".os-scrollbar-handle"})}),(0,t.jsxs)(s.td,{align:"left",children:["The handle element. If ",(0,t.jsx)(s.code,{children:"scrollbars.dragScroll"})," is ",(0,t.jsx)(s.code,{children:"true"})," this is the handle users can drag to change the scroll offset."]})]})]})]}),(0,t.jsx)(s.p,{children:"If you create your own theme, please only use the classes listed above. All other classes are modifier classes used to change visibility, alignment and pointer-events of the scrollbars."})]}),"\n",(0,t.jsx)(s.h2,{id:"plugins",children:"Plugins"}),"\n",(0,t.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,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.strong,{children:"ScrollbarsHidingPlugin"}),": Is needed for old browsers which aren't supporting native scrollbar styling features. ",(0,t.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,t.jsx)(s.code,{children:"iOS Safari >= 14"})," is marked as unsupported you only need this plugin for ",(0,t.jsx)(s.code,{children:"iOS < 7.1"}),")."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.strong,{children:"SizeObserverPlugin"}),": Is needed for old browsers which aren't supporting the ",(0,t.jsx)(s.code,{children:"ResizeObserver"})," api. ",(0,t.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,t.jsxs)(s.li,{children:[(0,t.jsx)(s.strong,{children:"ClickScrollPlugin"}),": If you want to use the option ",(0,t.jsx)(s.code,{children:"scrollbars: { clickScroll: true }"}),"."]}),"\n"]}),"\n",(0,t.jsx)(s.h3,{id:"consuming-plugins",children:"Consuming Plugins"}),"\n",(0,t.jsx)(s.p,{children:"Plugins are consumed like:"}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#859900"},children:"import"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" { "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"} "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"from"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'overlayscrollbars'"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// single plugin"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"("}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"ScrollbarsHidingPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:");"})]}),"\n",(0,t.jsx)(s.span,{className:"line"}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// multiple plugins"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"OverlayScrollbars"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"plugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"(["}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"SizeObserverPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"ClickScrollPlugin"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"]);"})]})]})})}),"\n",(0,t.jsx)(s.h3,{id:"writing-plugins",children:"Writing Plugins"}),"\n",(0,t.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": For now please refer to the ",(0,t.jsx)("b",{children:"TypeScript definitions"})," for a more detailed description."]}),"\n"]}),"\n",(0,t.jsx)(s.p,{children:"You can write and publish your own Plugins. This section is a work in progress."}),"\n",(0,t.jsx)(s.h2,{id:"faq",children:"FAQ"}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsxs)(s.p,{children:["How do I ",(0,t.jsx)("code",{children:"get / set"})," the ",(0,t.jsx)("code",{children:"scroll position"})," of an element I applied the OverlayScrollbars to?"]})}),(0,t.jsx)("br",{}),(0,t.jsxs)(s.p,{children:["If you applied ",(0,t.jsx)(s.code,{children:"OverlayScrollbars"})," to the ",(0,t.jsx)(s.code,{children:"body"})," element you can use ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX",children:(0,t.jsx)(s.code,{children:"window.scrollX"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY",children:(0,t.jsx)(s.code,{children:"window.scrollY"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll",children:(0,t.jsx)(s.code,{children:"window.scroll"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo",children:(0,t.jsx)(s.code,{children:"window.scrollTo"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy",children:(0,t.jsx)(s.code,{children:"window.scrollBy"})})," or any other native api."]}),(0,t.jsxs)(s.p,{children:["If the plugin was applied to any other element you have to get the ",(0,t.jsx)(s.code,{children:"viewport"})," element with the ",(0,t.jsx)(s.code,{children:"instance.elements()"})," function first. With this element you can use ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop",children:(0,t.jsx)(s.code,{children:"element.scrollTop"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft",children:(0,t.jsx)(s.code,{children:"element.scrollLeft"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll",children:(0,t.jsx)(s.code,{children:"element.scroll"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo",children:(0,t.jsx)(s.code,{children:"element.scrollTo"})}),", ",(0,t.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy",children:(0,t.jsx)(s.code,{children:"element.scrollBy"})})," or any other native api."]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" { "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"viewport"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" } "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"osInstance"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"elements"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"();"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#586E75",fontStyle:"italic"},children:"const"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" { "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"scrollLeft"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:", "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"scrollTop"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" } "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"viewport"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"; "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// get scroll offset"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"viewport"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"."}),(0,t.jsx)(s.span,{style:{color:"#268BD2"},children:"scrollTo"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"({ top: "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"0"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" }); "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"// set scroll offset"})]})]})})})]}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsxs)(s.p,{children:["Is it possible to ",(0,t.jsx)("code",{children:"limit / adjust the scrollbar handle length"}),"?"]})}),(0,t.jsx)("br",{}),(0,t.jsxs)(s.p,{children:["You can adjust a scrollbars handle length by setting a ",(0,t.jsx)(s.code,{children:"min-width / min-height"})," and ",(0,t.jsx)(s.code,{children:"max-width / max-height"})," style:"]}),(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"css","data-theme":"default",children:(0,t.jsxs)(s.code,{"data-language":"css","data-theme":"default",children:[(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"/* horizontal boundaries */"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-scrollbar-horizontal"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-scrollbar-handle"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"min-width"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:": "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"50"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"max-width"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:": "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"200"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"/* vertical boundaries */"})}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-scrollbar-vertical"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:".os-scrollbar-handle"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" {"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"min-height"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:": "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"40"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsxs)(s.span,{className:"line",children:[(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"max-height"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:": "}),(0,t.jsx)(s.span,{style:{color:"#D33682"},children:"40"}),(0,t.jsx)(s.span,{style:{color:"#859900"},children:"px"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:";"})]}),"\n",(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"}"})})]})})}),(0,t.jsxs)(s.p,{children:["You can assign the same value to both properties to force the scrollbar to be always the same size.",(0,t.jsx)(s.br,{}),"\n","Setting the ",(0,t.jsx)(s.code,{children:"width"})," and ",(0,t.jsx)(s.code,{children:"height"})," properties won't work since those are set by the plugin automatically."]})]}),"\n",(0,t.jsxs)(s.h2,{id:"feature-comparison-to-v1",children:["Feature comparison to ",(0,t.jsx)(s.code,{children:"v1"})]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["The ",(0,t.jsx)(s.code,{children:"scroll"})," function is missing. Planned as a ",(0,t.jsx)(s.code,{children:"plugin"}),". (WIP)"]}),"\n",(0,t.jsxs)(s.li,{children:["Initialization to the ",(0,t.jsx)(s.code,{children:"textarea"})," element isn't supported yet. Planned as a ",(0,t.jsx)(s.code,{children:"plugin"}),". (WIP)"]}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"future-plans",children:"Future Plans"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"Provide plugin based support for missing features. (treeshakeable)"}),"\n",(0,t.jsx)(s.li,{children:"Frequent updates in terms of bug-fixes and enhancements. (always use latest browser features)"}),"\n",(0,t.jsx)(s.li,{children:"Improve tests. (unit & browser tests)"}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"license",children:"License"}),"\n",(0,t.jsx)(s.p,{children:"MIT"})]})}var b=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},s=Object.assign({},(0,g.ah)(),e.components).wrapper;return s?(0,t.jsx)(s,Object.assign({},e,{children:(0,t.jsx)(B,e)})):B(e)},f=l(4028),v=l.n(f),A=function(e){return(0,t.jsx)("div",{className:"my-6 text-center font-medium text-sm uppercase relative",children:(0,t.jsxs)("span",{className:"p-3 bg-white",children:[e,(0,t.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,t.jsxs)(h,{className:"px-6",children:[(0,t.jsx)("div",{className:"mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44",children:(0,t.jsx)("div",{className:i()("h-full",v().logo),children:(0,t.jsx)("img",{src:j.src,className:"h-full",alt:"OverlayScrollbars Logo",width:"200",height:"200"})})}),(0,t.jsxs)("h1",{className:"text-center xxs:text-4xl text-2xl font-bold my-11",children:["Overlay",(0,t.jsx)("wbr",{}),"Scrollbars"]}),(0,t.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."}),A("used by"),(0,t.jsx)(x.E,{defer:!0,children:(0,t.jsx)("div",{className:"flex justify-center",children:(0,t.jsxs)("div",{className:i()("inline-flex items-center gap-6 py-6",v().usedBy),children:[(0,t.jsx)("div",{className:"h-11 px-3 flex-grow flex-shrink-0",style:{filter:"brightness(0.35)"},children:(0,t.jsx)("img",{className:"h-full",src:p.src,alt:""})}),(0,t.jsx)("div",{className:"h-11 px-3 py-1.5 flex-grow flex-shrink-0",children:(0,t.jsx)("img",{className:"h-full",src:y.src,alt:""})}),(0,t.jsx)("div",{className:"h-11 p-3 flex-grow flex-shrink-0",children:(0,t.jsx)("img",{className:"h-full",src:m.src,alt:""})})]})})}),A((0,t.jsxs)("a",{href:"https://github.com/KingSora/OverlayScrollbars",target:"_blank",rel:"noreferrer",children:[(0,t.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:u,icon:"github"}),(0,t.jsx)("span",{className:"sr-only",children:"OverlayScrollbars on Github"})]})),(0,t.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,t.jsx)("br",{}),"Looking for the v1 docs?"," ",(0,t.jsx)("a",{href:"v1",className:"text-primary-blue2 underline",children:"Follow this link"}),"."]}),(0,t.jsxs)("div",{className:"mx-auto flex sm:flex-row justify-center gap-2 items-center flex-wrap",children:[(0,t.jsx)("a",{href:"https://www.npmjs.com/package/overlayscrollbars",children:(0,t.jsx)("img",{className:"min-h-[20px]",src:"https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square",alt:"Downloads"})}),(0,t.jsx)("a",{href:"https://www.npmjs.com/package/overlayscrollbars",children:(0,t.jsx)("img",{className:"min-h-[20px]",src:"https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square",alt:"Version"})}),(0,t.jsx)("a",{href:"https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE",children:(0,t.jsx)("img",{className:"min-h-[20px]",src:"https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square",alt:"License"})}),(0,t.jsx)("a",{href:"https://app.codecov.io/gh/KingSora/OverlayScrollbars",children:(0,t.jsx)("img",{className:"min-h-[20px]",src:"https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square",alt:"Code Coverage"})}),(0,t.jsx)("a",{href:"https://bundlephobia.com/package/overlayscrollbars",children:(0,t.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,t.jsx)("div",{className:"mt-11 prose prose-primary mx-auto pb-32",children:(0,t.jsx)(b,{})})]})}},4028:function(e){e.exports={logo:"assets_logo__UC59w",usedBySeparator:"assets_usedBySeparator__yqt5h",usedBy:"assets_usedBy__FHTGG"}}},function(e){e.O(0,[774,888,179],function(){return e(e.s=2766)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 0ea4817..178b2a4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,17 +1,18 @@ -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

  • Simple, powerful and well documented API
    • -
  • High browser compatibility - Firefox 59+, Chrome 55+, Opera 42+, Edge 12+, Safari 10+ and IE 11
    • -
  • Can be run on the server - SSR, SSG and ISR support
    • -
  • Tested on various devices - Mobile, Desktop and Tablet
    • -
  • Tested with various (and mixed) inputs - Mouse, touch and pen
    • -
  • Treeshaking - bundle only what you really need
    • -
  • Automatic update detection - no polling
    • -
  • Usage of latest browser features - best performance in new browsers
    • +
  • High browser compatibility - Firefox 59+, Chrome 55+, Opera 42+, Edge 12+, Safari 10+ and IE 11
    • +
  • Can be run on the server - SSR, SSG and ISR support
    • +
  • Tested on various devices - Mobile, Desktop and Tablet
    • +
  • Tested with various (and mixed) inputs - Mouse, touch and pen
    • +
  • Treeshaking - bundle only what you really need
    • +
  • Automatic update detection - no polling
    • +
  • Usage of latest browser features - best performance in new browsers
  • Bidirectional - LTR or RTL direction support
  • Supports usage on the body element
    • +
  • Supports all virtual scrolling libraries
  • Simple and effective scrollbar styling
  • Highly customizable
  • TypeScript support - fully written in TypeScript
    • @@ -22,24 +23,39 @@

    Additionally to the vanilla JavaScript version you can use the official framework components & utilities:

    ReactVueAngularSvelteSolid

    Getting started

    -

    npm & node

    +

    npm & nodejs

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

    npm install overlayscrollbars

    After installation it can be imported:

    import 'overlayscrollbars/overlayscrollbars.css';
-import { OverlayScrollbars } from 'overlayscrollbars';
    +import { + OverlayScrollbars, + ScrollbarsHidingPlugin, + SizeObserverPlugin, + ClickScrollPlugin +} from 'overlayscrollbars';
-

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

+

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

Manual download & embedding

-

These instructions are for quick prototyping or old stacks. Click here to read them.


You can use OverlayScrollbars without any bundler or package manager.
-Simply download it from the Releases or use a CDN.

    +

    You can use OverlayScrollbars without any bundler or package manager.
    +Simply download it from the Releases or use a CDN.

    +
    • Use the javascript files with the .browser extension.
      • -
    • If you target old browsers use the .es5 javascript file, for new browsers .es6.
      • +
    • Use the javascript files with the .es5 extension if you need to support older browsers like IE11, otherwise use the .es6 files.
    • For production use the javascript / stylesheet files with the .min extension.
      • -

    Embedd OverlayScrollbars manually in your HTML:

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

    You can use the global variable OverlayScrollbarsGlobal to access the api:

    var OverlayScrollbars = OverlayScrollbarsGlobal.OverlayScrollbars;
-OverlayScrollbars(document.body, {});
+ +

Embedd OverlayScrollbars manually in your HTML:

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

You can then use the global variable OverlayScrollbarsGlobal to access the api similar to how you can do it in nodejs / modules:

+
var { 
+  OverlayScrollbars, 
+  ScrollbarsHidingPlugin, 
+  SizeObserverPlugin, 
+  ClickScrollPlugin  
+} = OverlayScrollbarsGlobal;
+

The examples in this documentation will use the import syntax instead of the OverlayScrollbarsGlobal object. Both versions are equivalent though.

Initialization

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

@@ -222,7 +238,7 @@ For example you can appoint an existing element as the viewport ele --os-handle-perpendicular-size-active: 100%; // Increases the interactive area of the scrollbar handle. --os-handle-interactive-area-offset: 0; -}

You can alter the properties either for both scrollbars at once or per scrollbar axis:

// horizontal and vertical scrollbar are 10px 
+}

You can alter the properties either for both scrollbars at once or per scrollbar axis. In the example below I've chosen os-theme-custom as the theme name:

// horizontal and vertical scrollbar are 10px 
 .os-theme-custom {
   --os-size: 10px;
 }
@@ -234,7 +250,11 @@ For example you can appoint an existing element as the viewport ele
 // vertical scrollbar is 20px
 .os-theme-custom.os-scrollbar-vertical {
   --os-size: 20px;
-}

Since scrollbar styles are usually simple, this set of options should be enough to get your desired styling. +}

You can then use your theme by assigning it via the scrollbars.theme option:

OverlayScrollbars(document.body, {
+  scrollbars: {
+    theme: 'os-theme-custom'
+  }
+});

Since scrollbar styles are usually simple, this set of options should be enough to get your desired styling. In case you need more freedom you can create your own styles by adding styling to the base class names described in the next section.

Scrollbars structure and CSS class names

The scrollbars HTML markup looks like:

<div class="os-scrollbar os-scrollbar-horizontal">
     <div class="os-scrollbar-track">
         <div class="os-scrollbar-handle">
@@ -246,7 +266,7 @@ In case you need more freedom you can create your own styles by adding styling t
         <div class="os-scrollbar-handle">
         </div>
     </div>
-</div>

The class names are simplified, in a real application the .os-scrollbar element can have additional class names which modify the appearance (mostly visibility and alignment).

Below is a list of the most important class names you will encounter:

CSS class namedescription
.os-scrollbarThe root element of a scrollbar.
.os-scrollbar-rtlIndicates a RTL direction of the host element the scrollbar belongs to.
.os-scrollbar-horizontalThe root element of a horizontal scrollbar.
.os-scrollbar-verticalThe root element of a vertical scrollbar.
.os-scrollbar-handle-interactiveIndicates that the handle inside the scrollbar is interactive (scrollbars.dragScroll is true).
.os-scrollbar-track-interactiveIndicates that the track inside the scrollbar is interactive (scrollbars.clickScroll is true).
.os-scrollbar-trackThe track element. This is the track of the nested handle element. If scrollbars.clickScroll is true this is the element users can click to change the scroll offset.
.os-scrollbar-handleThe handle element. If scrollbars.dragScroll is true this is the handle users can drag to change the scroll offset.

If you create your own theme, please only use the classes listed above. All other classes are modifier classes used to change visibility, alignment and pointer-events of the scrollbars.

+</div>

The class names are simplified, in a real application the .os-scrollbar element can have additional class names which modify the appearance (mostly visibility and alignment).

Below is a list of the most important class names you will encounter:

CSS class namedescription
.os-scrollbarThe root element of a scrollbar.
.os-scrollbar-rtlIndicates a RTL direction of the host element the scrollbar belongs to.
.os-scrollbar-horizontalThe root element of a horizontal scrollbar.
.os-scrollbar-verticalThe root element of a vertical scrollbar.
.os-scrollbar-handle-interactiveIndicates that the handle inside the scrollbar is interactive (scrollbars.dragScroll is true).
.os-scrollbar-track-interactiveIndicates that the track inside the scrollbar is interactive (scrollbars.clickScroll is true).
.os-scrollbar-trackThe track element. This is the track of the nested handle element. If scrollbars.clickScroll is true this is the element users can click to change the scroll offset.
.os-scrollbar-handleThe handle element. If scrollbars.dragScroll is true this is the handle users can drag to change the scroll offset.

If you create your own theme, please only use the classes listed above. All other classes are modifier classes used to change visibility, alignment and pointer-events of the scrollbars.

Gotchas

Its important that the chosen theme class name in your CSS file matches the assigned theme name in the options. If the CSS class name is .my-theme the scrollbars.theme has to be 'my-theme'.

Please be aware of your stack. css-modules for example will alter your class names to prevent naming collisions. Always double check if your CSS is really what you expect it to be.

Plugins

Everything thats considered not core functionality or old browser compatibility is exposed via a plugin. This is done because all unused plugins are treeshaken and thus won't end up in your final bundle. OverlayScrollbars comes with the following plugins:

    @@ -300,4 +320,4 @@ In case you need more freedom you can create your own styles by adding styling t
  • Improve tests. (unit & browser tests)

License

-

MIT

\ No newline at end of file +

MIT

\ No newline at end of file diff --git a/packages/overlayscrollbars/README.md b/packages/overlayscrollbars/README.md index da1b193..3144c46 100644 --- a/packages/overlayscrollbars/README.md +++ b/packages/overlayscrollbars/README.md @@ -22,18 +22,19 @@ 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 +## Goals & Features.es6 - Simple, powerful and well documented API - - High browser compatibility - Firefox 59+, Chrome 55+, Opera 42+, Edge 12+, Safari 10+ and IE 11 - - Can be run on the server - SSR, SSG and ISR support - - Tested on various devices - Mobile, Desktop and Tablet - - Tested with various (and mixed) inputs - Mouse, touch and pen - - Treeshaking - bundle only what you really need - - Automatic update detection - no polling - - Usage of latest browser features - best performance in new browsers + - High browser compatibility - **Firefox 59+**, **Chrome 55+**, **Opera 42+**, **Edge 12+**, **Safari 10+** and **IE 11** + - Can be run on the server - **SSR**, **SSG** and **ISR** support + - Tested on various devices - **Mobile**, **Desktop** and **Tablet** + - Tested with various (and mixed) inputs - **Mouse**, **touch** and **pen** + - **Treeshaking** - bundle only what you really need + - Automatic update detection - **no polling** + - Usage of latest browser features - best **performance** in new browsers - Bidirectional - LTR or RTL direction support - Supports usage on the `body` element + - Supports all **virtual scrolling** libraries - Simple and effective scrollbar styling - Highly customizable - TypeScript support - fully written in TypeScript @@ -53,6 +54,7 @@ Additionally to the vanilla JavaScript version you can use the official framewor ## Getting started ### npm & nodejs + OverlayScrollbars can be downloaded from [npm](https://www.npmjs.com/package/overlayscrollbars) or the package manager of your choice: ```sh npm install overlayscrollbars diff --git a/website/src/components/index.mdx b/website/src/components/index.mdx index 14b733d..aeca623 100644 --- a/website/src/components/index.mdx +++ b/website/src/components/index.mdx @@ -5,21 +5,22 @@ I created this plugin because I hate ugly and space consuming scrollbars. Simila ## Goals & Features - Simple, powerful and well documented API - - High browser compatibility - Firefox 59+, Chrome 55+, Opera 42+, Edge 12+, Safari 10+ and IE 11 - - Can be run on the server - SSR, SSG and ISR support - - Tested on various devices - Mobile, Desktop and Tablet - - Tested with various (and mixed) inputs - Mouse, touch and pen - - Treeshaking - bundle only what you really need - - Automatic update detection - no polling - - Usage of latest browser features - best performance in new browsers + - High browser compatibility - **Firefox 59+**, **Chrome 55+**, **Opera 42+**, **Edge 12+**, **Safari 10+** and **IE 11** + - Can be run on the server - **SSR**, **SSG** and **ISR** support + - Tested on various devices - **Mobile**, **Desktop** and **Tablet** + - Tested with various (and mixed) inputs - **Mouse**, **touch** and **pen** + - **Treeshaking** - bundle only what you really need + - Automatic update detection - **no polling** + - Usage of latest browser features - best **performance** in new browsers - Bidirectional - LTR or RTL direction support - Supports usage on the `body` element + - Supports all **virtual scrolling** libraries - Simple and effective scrollbar styling - Highly customizable - TypeScript support - fully written in TypeScript - Dependency free - 100% self written to ensure small size and best functionality - High quality and fully typed framework versions for [`react`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react), [`vue`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue), [`angular`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx), [`svelte`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte) and [`solid`](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid). - + ## Choose your framework Additionally to the vanilla JavaScript version you can use the official framework components & utilities: @@ -34,7 +35,8 @@ Additionally to the vanilla JavaScript version you can use the official framewor ## Getting started -### npm & node +### npm & nodejs + OverlayScrollbars can be downloaded from [npm](https://www.npmjs.com/package/overlayscrollbars) or the package manager of your choice: ```sh npm install overlayscrollbars @@ -42,39 +44,42 @@ npm install overlayscrollbars After installation it can be imported: ```js import 'overlayscrollbars/overlayscrollbars.css'; -import { OverlayScrollbars } from 'overlayscrollbars'; +import { + OverlayScrollbars, + ScrollbarsHidingPlugin, + SizeObserverPlugin, + ClickScrollPlugin +} from 'overlayscrollbars'; ``` -> __Note__: In older node versions use `'overlayscrollbars/styles/overlayscrollbars.css'` as the import path for the CSS file. +> __Note__: In older nodejs versions use `'overlayscrollbars/styles/overlayscrollbars.css'` as the import path for the CSS file. ### Manual download & embedding -
- - These instructions are for quick prototyping or old stacks. Click here to read them. - -
- You can use OverlayScrollbars without any bundler or package manager. Simply download it from the [Releases](https://github.com/KingSora/OverlayScrollbars/releases) or use a [CDN](https://cdnjs.com/libraries/overlayscrollbars). - Use the javascript files with the `.browser` extension. -- If you target old browsers use the `.es5` javascript file, for new browsers `.es6`. +- Use the javascript files with the `.es5` extension if you need to support older browsers like IE11, otherwise use the `.es6` files. - For production use the javascript / stylesheet files with the `.min` extension. Embedd OverlayScrollbars manually in your HTML: ```html - + ``` -You can use the global variable `OverlayScrollbarsGlobal` to access the api: +You can then use the global variable `OverlayScrollbarsGlobal` to access the api similar to how you can do it in nodejs / modules: ```js -var OverlayScrollbars = OverlayScrollbarsGlobal.OverlayScrollbars; -OverlayScrollbars(document.body, {}); +var { + OverlayScrollbars, + ScrollbarsHidingPlugin, + SizeObserverPlugin, + ClickScrollPlugin +} = OverlayScrollbarsGlobal; ``` -
+The examples in this documentation will use the `import` syntax instead of the `OverlayScrollbarsGlobal` object. Both versions are equivalent though. ## Initialization @@ -507,7 +512,7 @@ Custom themes can be done in multiple ways. The easiest and fastest is to use th } ``` - You can alter the properties either for both scrollbars at once or per scrollbar axis: + You can alter the properties either for both scrollbars at once or per scrollbar axis. In the example below I've chosen `os-theme-custom` as the theme name: ```scss // horizontal and vertical scrollbar are 10px @@ -525,6 +530,16 @@ Custom themes can be done in multiple ways. The easiest and fastest is to use th } ``` + You can then use your theme by assigning it via the `scrollbars.theme` option: + + ```js + OverlayScrollbars(document.body, { + scrollbars: { + theme: 'os-theme-custom' + } + }); + ``` + Since scrollbar styles are usually simple, this set of options should be enough to get your desired styling. In case you need more freedom you can create your own styles by adding styling to the base class names described in the next section. @@ -564,6 +579,13 @@ Custom themes can be done in multiple ways. The easiest and fastest is to use th If you create your own theme, please only use the classes listed above. All other classes are modifier classes used to change visibility, alignment and pointer-events of the scrollbars. + ### Gotchas + + Its important that the chosen theme class name in your CSS file matches the assigned theme name in the options. If the CSS class name is `.my-theme` the `scrollbars.theme` has to be `'my-theme'`. + + + Please be aware of your stack. `css-modules` for example will alter your class names to prevent naming collisions. Always double check if your CSS is really what you expect it to be. + ## Plugins