OverlayScrollbars/docs/_next/static/chunks/pages/index-d0071a39b860db74.js

(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<arguments.length;s++){var l=arguments[s];if(l){var c=typeof l;if("string"===c||"number"===c)e.push(l);else if(Array.isArray(l)){if(l.length){var i=r.apply(null,l);i&&e.push(i)}}else if("object"===c){if(l.toString!==Object.prototype.toString&&!l.toString.toString().includes("[native code]")){e.push(l.toString());continue}for(var a in l)n.call(l,a)&&l[a]&&e.push(a)}}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0!==(l=(function(){return r}).apply(s,[]))&&(e.exports=l)}()},2766:function(e,s,l){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return l(852)}])},852:function(e,s,l){"use strict";l.r(s),l.d(s,{default:function(){return N}});var n=l(9722),r=l(169),c=l(1373),i=l(42),a=l.n(i),o=l(7378),t=l(4246),d=(0,o.forwardRef)(function(e,s){var l=e.svg,i=e.icon,o=e.className,d=(0,c.Z)(e,["svg","icon","className"]);if(l){var h=l.src,x=l.width,j=l.height;return(0,t.jsx)("svg",(0,r.Z)((0,n.Z)({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 ".concat(x," ").concat(j),ref:s,width:x,className:a()("default:fill-current",o)},d),{children:i?(0,t.jsx)("use",{href:"".concat(h,"#").concat(i)}):(0,t.jsx)("image",{href:h,width:"100%",height:"100%"})}))}return null}),h=function(e){var s=e.children,l=e.className;return(0,t.jsx)("div",{className:a()(l,"sm:container"),children:s})},x=l(785),j={src:"/OverlayScrollbars/_next/static/media/logo.5dcad24b.svg",height:1e3,width:1e3},p={src:"/OverlayScrollbars/_next/static/media/spotify-logo.0dffbf88.svg",height:60,width:120},y={src:"/OverlayScrollbars/_next/static/media/storybook-logo.e62f5bdf.svg",height:60,width:300},m={src:"/OverlayScrollbars/_next/static/media/adminlte-logo.22257d89.png",height:27,width:160,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAYAAADjAO9DAAAAKElEQVR4nGMUkzXIY2Bg+AfEjAxs7G//370rzFRQdo85LOXB/08fRAGPXgvx1EcwpwAAAABJRU5ErkJggg==",blurWidth:8,blurHeight:1},u={src:"/OverlayScrollbars/_next/static/media/github.f9873dbb.svg",height:24,width:24},g=l(1670);function B(e){var s=Object.assign({h2:"h2",p:"p",ul:"ul",li:"li",a:"a",code:"code",h3:"h3",div:"div",pre:"pre",span:"span",blockquote:"blockquote",strong:"strong",br:"br",hr:"hr",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},(0,g.ah)(),e.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h2,{id:"why",children:"Why"}),"\n",(0,t.jsx)(s.p,{children:"I created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support."}),"\n",(0,t.jsx)(s.h2,{id:"goals--features",children:"Goals & Features"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"Simple, powerful and good documented API"}),"\n",(0,t.jsxs)(s.li,{children:["High browser compatibility - ",(0,t.jsx)("b",{children:"Firefox"}),", ",(0,t.jsx)("b",{children:"Chrome"}),", ",(0,t.jsx)("b",{children:"Opera"}),", ",(0,t.jsx)("b",{children:"Edge"}),", ",(0,t.jsx)("b",{children:"Safari 10+"})," and ",(0,t.jsx)("b",{children:"IE 11"})]}),"\n",(0,t.jsxs)(s.li,{children:["Can be run on the server - ",(0,t.jsx)("b",{children:"SSR"}),", ",(0,t.jsx)("b",{children:"SSG"})," and ",(0,t.jsx)("b",{children:"ISR"})," support"]}),"\n",(0,t.jsxs)(s.li,{children:["Tested on various devices - ",(0,t.jsx)("b",{children:"Mobile"}),", ",(0,t.jsx)("b",{children:"Desktop"})," and ",(0,t.jsx)("b",{children:"Tablet"})]}),"\n",(0,t.jsxs)(s.li,{children:["Tested with various (and mixed) inputs - ",(0,t.jsx)("b",{children:"Mouse"}),", ",(0,t.jsx)("b",{children:"touch"})," and ",(0,t.jsx)("b",{children:"pen"})]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)("b",{children:"Treeshaking"})," - bundle only what you really need"]}),"\n",(0,t.jsxs)(s.li,{children:["Automatic update detection - ",(0,t.jsx)("b",{children:"no polling"})]}),"\n",(0,t.jsxs)(s.li,{children:["Usage of latest browser features - best ",(0,t.jsx)("b",{children:"performance"})," in new browsers"]}),"\n",(0,t.jsx)(s.li,{children:"Bidirectional - LTR or RTL direction support"}),"\n",(0,t.jsx)(s.li,{children:"Simple and effective scrollbar styling"}),"\n",(0,t.jsx)(s.li,{children:"Highly customizable"}),"\n",(0,t.jsx)(s.li,{children:"TypeScript support - fully written in TypeScript"}),"\n",(0,t.jsx)(s.li,{children:"Dependency free - 100% self written to ensure small size and best functionality"}),"\n",(0,t.jsxs)(s.li,{children:["High quality and fully typed Framework versions for ",(0,t.jsx)(s.a,{href:"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react",children:(0,t.jsx)(s.code,{children:"react"})}),", ",(0,t.jsx)(s.a,{href:"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue",children:(0,t.jsx)(s.code,{children:"vue"})}),", ",(0,t.jsx)(s.a,{href:"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx",children:(0,t.jsx)(s.code,{children:"angular"})}),", ",(0,t.jsx)(s.a,{href:"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte",children:(0,t.jsx)(s.code,{children:"svelte"})})," and ",(0,t.jsx)(s.a,{href:"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid",children:(0,t.jsx)(s.code,{children:"solid"})}),"."]}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"choose-your-framework",children:"Choose your framework"}),"\n",(0,t.jsx)(s.p,{children:"Additionally to the vanilla JavaScript version you can use the official framework components & utilities:"}),"\n",(0,t.jsxs)("div",{className:"flex flex-wrap",children:[(0,t.jsx)("a",{className:"flex-grow-0 flex-shrink-0",href:"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react",children:(0,t.jsx)("img",{className:"h-[80px] mx-1 my-1",src:"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg",width:"80",height:"80",alt:"React"})}),(0,t.jsx)("a",{className:"flex-grow-0 flex-shrink-0",href:"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue",children:(0,t.jsx)("img",{className:"h-[80px] mx-1 my-1",src:"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg",width:"80",height:"80",alt:"Vue"})}),(0,t.jsx)("a",{className:"flex-grow-0 flex-shrink-0",href:"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx",children:(0,t.jsx)("img",{className:"h-[80px] mx-1 my-1",src:"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg",width:"80",height:"80",alt:"Angular"})}),(0,t.jsx)("a",{className:"flex-grow-0 flex-shrink-0",href:"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte",children:(0,t.jsx)("img",{className:"h-[80px] mx-1 my-1",src:"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg",width:"80",height:"80",alt:"Svelte"})}),(0,t.jsx)("a",{className:"flex-grow-0 flex-shrink-0",href:"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid",children:(0,t.jsx)("img",{className:"h-[80px] mx-1 my-1",src:"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg",width:"80",height:"80",alt:"Solid"})})]}),"\n",(0,t.jsx)(s.h2,{id:"getting-started",children:"Getting started"}),"\n",(0,t.jsx)(s.h3,{id:"npm--node",children:"npm & node"}),"\n",(0,t.jsxs)(s.p,{children:["OverlayScrollbars can be downloaded from ",(0,t.jsx)(s.a,{href:"https://www.npmjs.com/package/overlayscrollbars",children:"npm"})," or the package manager of your choice:"]}),"\n",(0,t.jsx)(s.div,{"data-rehype-pretty-code-fragment":"",children:(0,t.jsx)(s.pre,{"data-language":"sh","data-theme":"default",children:(0,t.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,t.jsx)(s.span,{className:"line",children:(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"npm install overlayscrollbars"})})})})}),"\n",(0,t.jsx)(s.p,{children:"After installation it can be imported:"}),"\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:"#859900"},children:"import"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:"'overlayscrollbars/overlayscrollbars.css'"}),(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:"#859900"},children:"import"}),(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:"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.jsxs)(s.blockquote,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Note"}),": In older node versions use ",(0,t.jsx)(s.code,{children:"'overlayscrollbars/styles/overlayscrollbars.css'"})," as the import path for the CSS file."]}),"\n"]}),"\n",(0,t.jsx)(s.h3,{id:"manual-download--embedding",children:"Manual download & embedding"}),"\n",(0,t.jsxs)("details",{children:[(0,t.jsx)("summary",{children:(0,t.jsx)(s.p,{children:"These instructions are for quick prototyping or old stacks. Click here to read them."})}),(0,t.jsx)("br",{}),(0,t.jsxs)(s.p,{children:["You can use OverlayScrollbars without any bundler or package manager.",(0,t.jsx)(s.br,{}),"\n","Simply download it from the ",(0,t.jsx)(s.a,{href:"https://github.com/KingSora/OverlayScrollbars/releases",children:"Releases"})," or use a ",(0,t.jsx)(s.a,{href:"https://cdnjs.com/libraries/overlayscrollbars",children:"CDN"}),"."]}),(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["Use the javascript files with the ",(0,t.jsx)(s.code,{children:".browser"})," extension."]}),"\n",(0,t.jsxs)(s.li,{children:["If you target old browsers use the ",(0,t.jsx)(s.code,{children:".es5"})," javascript file, for new browsers ",(0,t.jsx)(s.code,{children:".es6"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:["For production use the javascript / stylesheet files with the ",(0,t.jsx)(s.code,{children:".min"})," extension."]}),"\n"]}),(0,t.jsx)(s.p,{children:"Embedd OverlayScrollbars manually in your HTML:"}),(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:"link"}),(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/css"'}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"href"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"path/to/overlayscrollbars.css"'}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:" "}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:"rel"}),(0,t.jsx)(s.span,{style:{color:"#657B83"},children:"="}),(0,t.jsx)(s.span,{style:{color:"#2AA198"},children:'"stylesheet"'}),(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.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.jsx)(s.span,{style:{color:"#268BD2"},children:"script"}),(0,t.jsx)(s.span,{style:{color:"#93A1A1"},children:">"})]})]})})}),(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.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:"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 nativ 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),w=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:a()("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."}),w("used by"),(0,t.jsx)(x.E,{defer:!0,children:(0,t.jsx)("div",{className:"flex justify-center",children:(0,t.jsxs)("div",{className:a()("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:""})})]})})}),w((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()}]);