diff --git a/docs/404.html b/docs/404.html index b261a408..bff07db6 100644 --- a/docs/404.html +++ b/docs/404.html @@ -1 +1 @@ -404: This page could not be found.OverlayScrollbars

404

This page could not be found.

\ No newline at end of file +404: This page could not be found.OverlayScrollbars

404

This page could not be found.

\ No newline at end of file diff --git a/docs/_next/static/chunks/app/layout-4b29f91646997073.js b/docs/_next/static/chunks/app/layout-b751ad67d23f0013.js similarity index 89% rename from docs/_next/static/chunks/app/layout-4b29f91646997073.js rename to docs/_next/static/chunks/app/layout-b751ad67d23f0013.js index e86c3c5d..36b79b29 100644 --- a/docs/_next/static/chunks/app/layout-4b29f91646997073.js +++ b/docs/_next/static/chunks/app/layout-b751ad67d23f0013.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[185],{4481:function(e,r,t){Promise.resolve().then(t.t.bind(t,2987,23)),Promise.resolve().then(t.t.bind(t,1890,23)),Promise.resolve().then(t.bind(t,293))},293:function(e,r,t){"use strict";t.r(r),t.d(r,{Html:function(){return i}});var a=t(7437),l=t(2265),o=t(7556),s=t(6554),n=t(8618);n.UN.plugin(n.ZA);let i=e=>{let{children:r}=e,[t]=(0,o.A)({defer:!0,options:{scrollbars:{clickScroll:!0}}});return(0,l.useEffect)(()=>{let{type:e}=new s.UAParser().getDevice(),r=!!window.getComputedStyle(document.body).getPropertyValue("scrollbar-width");t({target:document.body,cancel:{nativeScrollbarsOverlaid:!r&&!!e&&["console","mobile","tablet","smarttv"].includes(e)}})},[t]),(0,a.jsx)("html",{lang:"en",className:"w-full h-full font-sans font-medium text-primary-dark bg-slate-50","data-overlayscrollbars-initialize":"",children:(0,a.jsxs)("body",{className:"w-full h-full","data-overlayscrollbars-initialize":"",children:[(0,a.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify({"@context":"http://schema.org","@type":"SoftwareSourceCode",url:"https://kingsora.github.io/OverlayScrollbars",name:"OverlayScrollbars",description:"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.",license:"https://en.wikipedia.org/wiki/MIT_License",keywords:"js,javascript,typescript,overlayscrollbars,overlay,scrollbars,custom,scrollbar,plugin,react,vue,angular,treeshaking",isAccessibleForFree:!0,image:"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/logo/logo.png",codeRepository:"https://github.com/KingSora/OverlayScrollbars",runtimePlatform:"browser",maintainer:{"@type":"Person",name:"Rene Haas",additionalName:"KingSora",url:"https://github.com/KingSora"},programmingLanguage:{"@type":"ComputerLanguage",name:"javascript",alternateName:"js"}})}}),r]})})}},2987:function(){},1890:function(){}},function(e){e.O(0,[554,556,971,69,744],function(){return e(e.s=4481)}),_N_E=e.O()}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[185],{9769:function(e,r,t){Promise.resolve().then(t.t.bind(t,1890,23)),Promise.resolve().then(t.t.bind(t,2987,23)),Promise.resolve().then(t.bind(t,293))},293:function(e,r,t){"use strict";t.r(r),t.d(r,{Html:function(){return i}});var a=t(7437),l=t(2265),o=t(7556),s=t(6554),n=t(8618);n.UN.plugin(n.ZA);let i=e=>{let{children:r}=e,[t]=(0,o.A)({defer:!0,options:{scrollbars:{clickScroll:!0}}});return(0,l.useEffect)(()=>{let{type:e}=new s.UAParser().getDevice(),r=!!window.getComputedStyle(document.body).getPropertyValue("scrollbar-width");t({target:document.body,cancel:{nativeScrollbarsOverlaid:!r&&!!e&&["console","mobile","tablet","smarttv"].includes(e)}})},[t]),(0,a.jsx)("html",{lang:"en",className:"w-full h-full font-sans font-medium text-primary-dark bg-slate-50","data-overlayscrollbars-initialize":"",children:(0,a.jsxs)("body",{className:"w-full h-full","data-overlayscrollbars-initialize":"",children:[(0,a.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify({"@context":"http://schema.org","@type":"SoftwareSourceCode",url:"https://kingsora.github.io/OverlayScrollbars",name:"OverlayScrollbars",description:"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.",license:"https://en.wikipedia.org/wiki/MIT_License",keywords:"js,javascript,typescript,overlayscrollbars,overlay,scrollbars,custom,scrollbar,plugin,react,vue,angular,treeshaking",isAccessibleForFree:!0,image:"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/logo/logo.png",codeRepository:"https://github.com/KingSora/OverlayScrollbars",runtimePlatform:"browser",maintainer:{"@type":"Person",name:"Rene Haas",additionalName:"KingSora",url:"https://github.com/KingSora"},programmingLanguage:{"@type":"ComputerLanguage",name:"javascript",alternateName:"js"}})}}),r]})})}},2987:function(){},1890:function(){}},function(e){e.O(0,[554,556,971,69,744],function(){return e(e.s=9769)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/docs/_next/static/chunks/webpack-994f4026fd63b252.js b/docs/_next/static/chunks/webpack-42808d76a09bd4a9.js similarity index 98% rename from docs/_next/static/chunks/webpack-994f4026fd63b252.js rename to docs/_next/static/chunks/webpack-42808d76a09bd4a9.js index 33d39571..c13ff0e6 100644 --- a/docs/_next/static/chunks/webpack-994f4026fd63b252.js +++ b/docs/_next/static/chunks/webpack-42808d76a09bd4a9.js @@ -1 +1 @@ -!function(){"use strict";var e,t,r,n,o,u,i,c,f,a={},l={};function s(e){var t=l[e];if(void 0!==t)return t.exports;var r=l[e]={exports:{}},n=!0;try{a[e].call(r.exports,r,r.exports,s),n=!1}finally{n&&delete l[e]}return r.exports}s.m=a,s.amdO={},e=[],s.O=function(t,r,n,o){if(r){o=o||0;for(var u=e.length;u>0&&e[u-1][2]>o;u--)e[u]=e[u-1];e[u]=[r,n,o];return}for(var i=1/0,u=0;u=o&&Object.keys(s.O).every(function(e){return s.O[e](r[f])})?r.splice(f--,1):(c=!1,o0&&e[u-1][2]>o;u--)e[u]=e[u-1];e[u]=[r,n,o];return}for(var i=1/0,u=0;u=o&&Object.keys(s.O).every(function(e){return s.O[e](r[f])})?r.splice(f--,1):(c=!1,oli):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111;border-bottom:1px solid;border-color:#cbd5e1;padding-bottom:.5rem}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333;border-bottom:1px solid;border-color:#cbd5e1;padding-bottom:.5rem}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows)/10%),0 3px 0 rgb(var(--tw-prose-kbd-shadows)/10%);font-size:.875em;border-radius:.3125rem;padding:.1875em .375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:500;font-size:.875em;background:var(--tw-prose-pre-bg);padding:.25rem;border-radius:.375rem;overflow-wrap:break-word}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:17 24 39;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-left:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose :where(b):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500}.prose :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)){color:#0a376b;font-weight:500;font-size:.875rem;font-size:[object Object]}.prose :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)){color:#0a376b;font-weight:500;font-size:.875rem;font-size:[object Object]}.prose :where(blockquote>p>strong:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){color:#338eff}.prose :where(a:hover>code):not(:where([class~=not-prose],[class~=not-prose] *)){text-decoration:underline}.prose :where(summary>:only-child,):not(:where([class~=not-prose],[class~=not-prose] *)){display:inline;margin:0}.prose :where(details):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1rem;margin-bottom:1rem;border-radius:.25rem}.prose :where(summary):not(:where([class~=not-prose],[class~=not-prose] *)){display:list-item;cursor:pointer;border-radius:.25rem}.prose :where(summary+br):not(:where([class~=not-prose],[class~=not-prose] *)){display:none}.prose-primary{--tw-prose-body:#475774;--tw-prose-headings:#0a376b;--tw-prose-lead:#475774;--tw-prose-links:#4276ff;--tw-prose-bold:#0a376b;--tw-prose-counters:#475774;--tw-prose-bullets:#4276ff;--tw-prose-hr:#e2e8f0;--tw-prose-quotes:#0a376b;--tw-prose-quote-borders:#e2e8f0;--tw-prose-captions:#475774;--tw-prose-code:#0a376b;--tw-prose-pre-code:#fce7f3;--tw-prose-pre-bg:#f1f5f9;--tw-prose-th-borders:#e2e8f0;--tw-prose-td-borders:#e2e8f0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.left-1\/2{left:50%}.top-0{top:0}.top-1\/2{top:50%}.-z-10{z-index:-10}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-11{margin-top:2.75rem;margin-bottom:2.75rem}.my-6{margin-top:1.5rem}.mb-6,.my-6{margin-bottom:1.5rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-11{height:2.75rem}.h-16{height:4rem}.h-\[33vh\]{height:33vh}.h-\[80px\]{height:80px}.h-full{height:100%}.max-h-40{max-height:10rem}.min-h-\[20px\]{min-height:20px}.w-11{width:2.75rem}.w-16{width:4rem}.w-full{width:100%}.max-w-screen-sm{max-width:768px}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.flex-grow-0{flex-grow:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-items-center{justify-items:center}.gap-2{gap:.5rem}.gap-6{gap:1.5rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-t-\[1px\]{border-top-width:1px}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity))}.bg-current{background-color:currentColor}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-contain{background-size:contain}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.object-contain{-o-object-fit:contain;object-fit:contain}.p-3{padding:.75rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-12{padding-bottom:3rem}.text-center{text-align:center}.font-sans{font-family:Inter,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semiBold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[0\]{line-height:0}.text-primary-blue2{--tw-text-opacity:1;color:rgb(66 118 255/var(--tw-text-opacity))}.text-primary-dark{--tw-text-opacity:1;color:rgb(10 55 107/var(--tw-text-opacity))}.text-primary-gray2{--tw-text-opacity:1;color:rgb(105 121 150/var(--tw-text-opacity))}.no-underline{text-decoration-line:none}.opacity-30{opacity:.3}.opacity-60{opacity:.6}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-slate-300\/25{--tw-shadow-color:rgba(203,213,225,.25);--tw-shadow:var(--tw-shadow-colored)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transformColor{transition-property:transform,color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.mask-contain{-webkit-mask-size:contain;mask-size:contain}.mask-center{-webkit-mask-position:center center;mask-position:center center}.mask-no-repeat{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.grid-cols-fit-56{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.\[background\:linear-gradient\(0deg\2c currentColor\2c currentColor\)_no-repeat_right_bottom_\/_0_2px\]{background:linear-gradient(0deg,currentColor,currentColor) no-repeat 100% 100% /0 2px}.\[filter\:blur\(20px\)\]{filter:blur(20px)}.\[filter\:brightness\(0\.8\)_sepia\(1\)_saturate\(1\.44\)_hue-rotate\(175deg\)\]{filter:brightness(.8) sepia(1) saturate(1.44) hue-rotate(175deg)}.\[transition\:background-size_250ms\]{transition:background-size .25s}@media (min-width:768px){.sm\:container{width:100%;margin-right:auto;margin-left:auto}@media (min-width:374px){.sm\:container{max-width:374px}}@media (min-width:640px){.sm\:container{max-width:640px}}@media (min-width:768px){.sm\:container{max-width:768px}}@media (min-width:960px){.sm\:container{max-width:960px}}@media (min-width:1280px){.sm\:container{max-width:1280px}}@media (min-width:1440px){.sm\:container{max-width:1440px}}@media (min-width:1536px){.sm\:container{max-width:1536px}}}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:left-0:before{content:var(--tw-content);left:0}.before\:top-2:before{content:var(--tw-content);top:.5rem}.before\:top-2\.5:before{content:var(--tw-content);top:.625rem}.before\:-z-10:before{content:var(--tw-content);z-index:-10}.before\:h-full:before{content:var(--tw-content);height:100%}.before\:w-full:before{content:var(--tw-content);width:100%}.before\:bg-\[url\(\/OverlayScrollbars\/img\/logo\.svg\)\]:before{content:var(--tw-content);background-image:url(/OverlayScrollbars/img/logo.svg)}.before\:bg-contain:before{content:var(--tw-content);background-size:contain}.before\:bg-center:before{content:var(--tw-content);background-position:50%}.before\:bg-no-repeat:before{content:var(--tw-content);background-repeat:no-repeat}.before\:opacity-50:before{content:var(--tw-content);opacity:.5}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.before\:\[filter\:blur\(33px\)_saturate\(1\.22\)\]:before{content:var(--tw-content);filter:blur(33px) saturate(1.22)}.before\:\[transform\:translateZ\(0\)\]:before{content:var(--tw-content);transform:translateZ(0)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:left-0:after{content:var(--tw-content);left:0}.after\:top-0:after{content:var(--tw-content);top:0}.after\:-z-10:after{content:var(--tw-content);z-index:-10}.after\:h-full:after{content:var(--tw-content);height:100%}.after\:w-full:after{content:var(--tw-content);width:100%}.after\:bg-\[url\(\/OverlayScrollbars\/img\/logo\.svg\)\]:after{content:var(--tw-content);background-image:url(/OverlayScrollbars/img/logo.svg)}.after\:bg-contain:after{content:var(--tw-content);background-size:contain}.after\:bg-center:after{content:var(--tw-content);background-position:50%}.after\:bg-no-repeat:after{content:var(--tw-content);background-repeat:no-repeat}.after\:opacity-10:after{content:var(--tw-content);opacity:.1}.after\:content-\[\"\"\]:after{--tw-content:"";content:var(--tw-content)}.after\:\[filter\:drop-shadow\(0_6px_22px_\#5242e3\)_saturate\(1\.5\)\]:after{content:var(--tw-content);filter:drop-shadow(0 6px 22px #5242e3) saturate(1.5)}.after\:\[transform\:translateZ\(0\)\]:after{content:var(--tw-content);transform:translateZ(0)}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:text-primary-blue1:hover{--tw-text-opacity:1;color:rgb(51 142 255/var(--tw-text-opacity))}.hover\:\[background-position-x\:left\]:hover{background-position-x:left}.hover\:\[background-size\:100\%_2px\]:hover{background-size:100% 2px}.focus-visible\:rounded-sm:focus-visible{border-radius:.125rem}.active\:text-primary-blue2:active{--tw-text-opacity:1;color:rgb(66 118 255/var(--tw-text-opacity))}.group:focus .group-focus\:scale-110,.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}html :where(.default\:block){display:block}html :where(.default\:h-full){height:100%}html :where(.default\:w-full){width:100%}html :where(.default\:flex-none){flex:none}html :where(.default\:bg-current){background-color:currentColor}html :where(.default\:px-6){padding-left:1.5rem;padding-right:1.5rem}html :where(.default\:data-\[ad-status\]\:flex[data-ad-status]){display:flex}@media (min-width:374px){.xxs\:max-h-44{max-height:11rem}.xxs\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:640px){.xs\:w-\[80\%\]{width:80%}}@media (min-width:768px){.sm\:flex-row{flex-direction:row}} + /*! * OverlayScrollbars * Version: 2.9.2 @@ -6,8 +12,4 @@ * https://github.com/KingSora * * Released under the MIT license. - */.os-size-observer,.os-size-observer-listener{scroll-behavior:auto!important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(.1)}.os-size-observer:before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(calc(1 / .1))}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:"";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}[data-overlayscrollbars-initialize],[data-overlayscrollbars-viewport~=scrollbarHidden]{scrollbar-width:none!important}[data-overlayscrollbars-initialize]::-webkit-scrollbar,[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner{-webkit-appearance:none!important;appearance:none!important;display:none!important;width:0!important;height:0!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars-padding],[data-overlayscrollbars~=host]{display:flex;align-items:stretch!important;flex-direction:row!important;flex-wrap:nowrap!important;scroll-behavior:auto!important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto!important;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]:before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport],[data-overlayscrollbars]{overflow:hidden!important}[data-overlayscrollbars-padding~=noClipping],[data-overlayscrollbars~=noClipping]{overflow:visible!important}[data-overlayscrollbars-viewport~=measuring]{overflow:hidden!important;scroll-behavior:auto!important;scroll-snap-type:none!important}[data-overlayscrollbars-viewport~=overflowXVisible]:not([data-overlayscrollbars-viewport~=measuring]){overflow-x:visible!important}[data-overlayscrollbars-viewport~=overflowXHidden]{overflow-x:hidden!important}[data-overlayscrollbars-viewport~=overflowXScroll]{overflow-x:scroll!important}[data-overlayscrollbars-viewport~=overflowYVisible]:not([data-overlayscrollbars-viewport~=measuring]){overflow-y:visible!important}[data-overlayscrollbars-viewport~=overflowYHidden]{overflow-y:hidden!important}[data-overlayscrollbars-viewport~=overflowYScroll]{overflow-y:scroll!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0!important;line-height:0!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*{display:none!important;position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border-width:0!important}[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto!important;scroll-snap-type:none!important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport]{height:auto!important;width:auto!important}@property --os-scroll-percent{syntax:"";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:"";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc(var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) * var(--os-scroll-direction));contain:size layout;contain:size layout style;transition:opacity .15s,visibility .15s,top .15s,right .15s,bottom .15s,left .15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none!important}.os-scrollbar-track{position:relative;padding:0!important;border:none!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-handle,.os-scrollbar-track{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle,.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important;transition:none!important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type:size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity .15s,background-color .15s,border-color .15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-handle:before,.os-scrollbar-track:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,height .15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,width .15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}.os-theme-none.os-scrollbar,[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar{display:none!important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:rgba(0,0,0,.44);--os-handle-bg-hover:rgba(0,0,0,.55);--os-handle-bg-active:rgba(0,0,0,.66)}.os-theme-light{--os-handle-bg:hsla(0,0%,100%,.44);--os-handle-bg-hover:hsla(0,0%,100%,.55);--os-handle-bg-active:hsla(0,0%,100%,.66)}@font-face{font-family:Inter;font-style:normal;font-weight:100 1000;font-display:swap;src:url(/OverlayScrollbars/font/inter/inter-variable-slnt-wght.woff2) format("woff2 supports variations"),url(/OverlayScrollbars/font/inter/inter-variable-slnt-wght.woff2) format("woff2-variations")} - -/* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com -*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}button:focus-visible{outline-style:solid;outline-width:2px;outline-color:#4276ff;outline-offset:2px}a:focus-visible{outline-style:solid;outline-width:2px;outline-color:#4276ff;outline-offset:2px}input[type=button]:focus-visible{outline-style:solid;outline-width:2px;outline-color:#4276ff;outline-offset:2px}input[type=file]:focus-visible{outline-style:solid;outline-width:2px;outline-color:#4276ff;outline-offset:2px}input[type=reset]:focus-visible{outline-style:solid;outline-width:2px;outline-color:#4276ff;outline-offset:2px}details:focus-visible{outline-style:solid;outline-width:2px;outline-color:#4276ff;outline-offset:2px}summary:focus-visible{outline-style:solid;outline-width:2px;outline-color:#4276ff;outline-offset:2px}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:500}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111;border-bottom:1px solid;border-color:#cbd5e1;padding-bottom:.5rem}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333;border-bottom:1px solid;border-color:#cbd5e1;padding-bottom:.5rem}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows)/10%),0 3px 0 rgb(var(--tw-prose-kbd-shadows)/10%);font-size:.875em;border-radius:.3125rem;padding:.1875em .375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:500;font-size:.875em;background:var(--tw-prose-pre-bg);padding:.25rem;border-radius:.375rem;overflow-wrap:break-word}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.5714286em;padding-bottom:.5714286em;padding-left:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:17 24 39;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-left:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose :where(b):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500}.prose :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)){color:#0a376b;font-weight:500;font-size:.875rem;font-size:[object Object]}.prose :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)){color:#0a376b;font-weight:500;font-size:.875rem;font-size:[object Object]}.prose :where(blockquote>p>strong:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){color:#338eff}.prose :where(a:hover>code):not(:where([class~=not-prose],[class~=not-prose] *)){text-decoration:underline}.prose :where(summary>:only-child,):not(:where([class~=not-prose],[class~=not-prose] *)){display:inline;margin:0}.prose :where(details):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1rem;margin-bottom:1rem;border-radius:.25rem}.prose :where(summary):not(:where([class~=not-prose],[class~=not-prose] *)){display:list-item;cursor:pointer;border-radius:.25rem}.prose :where(summary+br):not(:where([class~=not-prose],[class~=not-prose] *)){display:none}.prose-primary{--tw-prose-body:#475774;--tw-prose-headings:#0a376b;--tw-prose-lead:#475774;--tw-prose-links:#4276ff;--tw-prose-bold:#0a376b;--tw-prose-counters:#475774;--tw-prose-bullets:#4276ff;--tw-prose-hr:#e2e8f0;--tw-prose-quotes:#0a376b;--tw-prose-quote-borders:#e2e8f0;--tw-prose-captions:#475774;--tw-prose-code:#0a376b;--tw-prose-pre-code:#fce7f3;--tw-prose-pre-bg:#f1f5f9;--tw-prose-th-borders:#e2e8f0;--tw-prose-td-borders:#e2e8f0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.left-1\/2{left:50%}.top-0{top:0}.top-1\/2{top:50%}.-z-10{z-index:-10}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-11{margin-top:2.75rem;margin-bottom:2.75rem}.my-6{margin-top:1.5rem}.mb-6,.my-6{margin-bottom:1.5rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-11{height:2.75rem}.h-16{height:4rem}.h-\[33vh\]{height:33vh}.h-\[80px\]{height:80px}.h-full{height:100%}.max-h-40{max-height:10rem}.min-h-\[20px\]{min-height:20px}.w-11{width:2.75rem}.w-16{width:4rem}.w-full{width:100%}.max-w-screen-sm{max-width:768px}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.flex-grow-0{flex-grow:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-items-center{justify-items:center}.gap-2{gap:.5rem}.gap-6{gap:1.5rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-t-\[1px\]{border-top-width:1px}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity))}.bg-current{background-color:currentColor}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-contain{background-size:contain}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.object-contain{-o-object-fit:contain;object-fit:contain}.p-3{padding:.75rem}.p-4{padding:1rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-12{padding-bottom:3rem}.text-center{text-align:center}.font-sans{font-family:Inter,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semiBold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[0\]{line-height:0}.text-primary-blue2{--tw-text-opacity:1;color:rgb(66 118 255/var(--tw-text-opacity))}.text-primary-dark{--tw-text-opacity:1;color:rgb(10 55 107/var(--tw-text-opacity))}.text-primary-gray2{--tw-text-opacity:1;color:rgb(105 121 150/var(--tw-text-opacity))}.no-underline{text-decoration-line:none}.opacity-30{opacity:.3}.opacity-60{opacity:.6}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-slate-300\/25{--tw-shadow-color:rgba(203,213,225,.25);--tw-shadow:var(--tw-shadow-colored)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transformColor{transition-property:transform,color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.mask-contain{-webkit-mask-size:contain;mask-size:contain}.mask-center{-webkit-mask-position:center center;mask-position:center center}.mask-no-repeat{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.grid-cols-fit-56{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.\[background\:linear-gradient\(0deg\2c currentColor\2c currentColor\)_no-repeat_right_bottom_\/_0_2px\]{background:linear-gradient(0deg,currentColor,currentColor) no-repeat 100% 100% /0 2px}.\[filter\:blur\(20px\)\]{filter:blur(20px)}.\[filter\:brightness\(0\.8\)_sepia\(1\)_saturate\(1\.44\)_hue-rotate\(175deg\)\]{filter:brightness(.8) sepia(1) saturate(1.44) hue-rotate(175deg)}.\[transition\:background-size_250ms\]{transition:background-size .25s}@media (min-width:768px){.sm\:container{width:100%;margin-right:auto;margin-left:auto}@media (min-width:374px){.sm\:container{max-width:374px}}@media (min-width:640px){.sm\:container{max-width:640px}}@media (min-width:768px){.sm\:container{max-width:768px}}@media (min-width:960px){.sm\:container{max-width:960px}}@media (min-width:1280px){.sm\:container{max-width:1280px}}@media (min-width:1440px){.sm\:container{max-width:1440px}}@media (min-width:1536px){.sm\:container{max-width:1536px}}}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:left-0:before{content:var(--tw-content);left:0}.before\:top-2:before{content:var(--tw-content);top:.5rem}.before\:top-2\.5:before{content:var(--tw-content);top:.625rem}.before\:-z-10:before{content:var(--tw-content);z-index:-10}.before\:h-full:before{content:var(--tw-content);height:100%}.before\:w-full:before{content:var(--tw-content);width:100%}.before\:bg-\[url\(\/OverlayScrollbars\/img\/logo\.svg\)\]:before{content:var(--tw-content);background-image:url(/OverlayScrollbars/img/logo.svg)}.before\:bg-contain:before{content:var(--tw-content);background-size:contain}.before\:bg-center:before{content:var(--tw-content);background-position:50%}.before\:bg-no-repeat:before{content:var(--tw-content);background-repeat:no-repeat}.before\:opacity-50:before{content:var(--tw-content);opacity:.5}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.before\:\[filter\:blur\(33px\)_saturate\(1\.22\)\]:before{content:var(--tw-content);filter:blur(33px) saturate(1.22)}.before\:\[transform\:translateZ\(0\)\]:before{content:var(--tw-content);transform:translateZ(0)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:left-0:after{content:var(--tw-content);left:0}.after\:top-0:after{content:var(--tw-content);top:0}.after\:-z-10:after{content:var(--tw-content);z-index:-10}.after\:h-full:after{content:var(--tw-content);height:100%}.after\:w-full:after{content:var(--tw-content);width:100%}.after\:bg-\[url\(\/OverlayScrollbars\/img\/logo\.svg\)\]:after{content:var(--tw-content);background-image:url(/OverlayScrollbars/img/logo.svg)}.after\:bg-contain:after{content:var(--tw-content);background-size:contain}.after\:bg-center:after{content:var(--tw-content);background-position:50%}.after\:bg-no-repeat:after{content:var(--tw-content);background-repeat:no-repeat}.after\:opacity-10:after{content:var(--tw-content);opacity:.1}.after\:content-\[\"\"\]:after{--tw-content:"";content:var(--tw-content)}.after\:\[filter\:drop-shadow\(0_6px_22px_\#5242e3\)_saturate\(1\.5\)\]:after{content:var(--tw-content);filter:drop-shadow(0 6px 22px #5242e3) saturate(1.5)}.after\:\[transform\:translateZ\(0\)\]:after{content:var(--tw-content);transform:translateZ(0)}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:text-primary-blue1:hover{--tw-text-opacity:1;color:rgb(51 142 255/var(--tw-text-opacity))}.hover\:\[background-position-x\:left\]:hover{background-position-x:left}.hover\:\[background-size\:100\%_2px\]:hover{background-size:100% 2px}.focus-visible\:rounded-sm:focus-visible{border-radius:.125rem}.active\:text-primary-blue2:active{--tw-text-opacity:1;color:rgb(66 118 255/var(--tw-text-opacity))}.group:focus .group-focus\:scale-110,.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}html :where(.default\:block){display:block}html :where(.default\:h-full){height:100%}html :where(.default\:w-full){width:100%}html :where(.default\:flex-none){flex:none}html :where(.default\:bg-current){background-color:currentColor}html :where(.default\:px-6){padding-left:1.5rem;padding-right:1.5rem}html :where(.default\:data-\[ad-status\]\:flex[data-ad-status]){display:flex}@media (min-width:374px){.xxs\:max-h-44{max-height:11rem}.xxs\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:640px){.xs\:w-\[80\%\]{width:80%}}@media (min-width:768px){.sm\:flex-row{flex-direction:row}} \ No newline at end of file + */.os-size-observer,.os-size-observer-listener{scroll-behavior:auto!important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(.1)}.os-size-observer:before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(calc(1 / .1))}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:"";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}[data-overlayscrollbars-initialize],[data-overlayscrollbars-viewport~=scrollbarHidden]{scrollbar-width:none!important}[data-overlayscrollbars-initialize]::-webkit-scrollbar,[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner{-webkit-appearance:none!important;appearance:none!important;display:none!important;width:0!important;height:0!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars-padding],[data-overlayscrollbars~=host]{display:flex;align-items:stretch!important;flex-direction:row!important;flex-wrap:nowrap!important;scroll-behavior:auto!important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto!important;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]:before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport],[data-overlayscrollbars]{overflow:hidden!important}[data-overlayscrollbars-padding~=noClipping],[data-overlayscrollbars~=noClipping]{overflow:visible!important}[data-overlayscrollbars-viewport~=measuring]{overflow:hidden!important;scroll-behavior:auto!important;scroll-snap-type:none!important}[data-overlayscrollbars-viewport~=overflowXVisible]:not([data-overlayscrollbars-viewport~=measuring]){overflow-x:visible!important}[data-overlayscrollbars-viewport~=overflowXHidden]{overflow-x:hidden!important}[data-overlayscrollbars-viewport~=overflowXScroll]{overflow-x:scroll!important}[data-overlayscrollbars-viewport~=overflowYVisible]:not([data-overlayscrollbars-viewport~=measuring]){overflow-y:visible!important}[data-overlayscrollbars-viewport~=overflowYHidden]{overflow-y:hidden!important}[data-overlayscrollbars-viewport~=overflowYScroll]{overflow-y:scroll!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0!important;line-height:0!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*{display:none!important;position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border-width:0!important}[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto!important;scroll-snap-type:none!important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport]{height:auto!important;width:auto!important}@property --os-scroll-percent{syntax:"";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:"";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc(var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) * var(--os-scroll-direction));contain:size layout;contain:size layout style;transition:opacity .15s,visibility .15s,top .15s,right .15s,bottom .15s,left .15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none!important}.os-scrollbar-track{position:relative;padding:0!important;border:none!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-handle,.os-scrollbar-track{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle,.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important;transition:none!important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type:size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity .15s,background-color .15s,border-color .15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-handle:before,.os-scrollbar-track:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,height .15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,width .15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}.os-theme-none.os-scrollbar,[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar{display:none!important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:rgba(0,0,0,.44);--os-handle-bg-hover:rgba(0,0,0,.55);--os-handle-bg-active:rgba(0,0,0,.66)}.os-theme-light{--os-handle-bg:hsla(0,0%,100%,.44);--os-handle-bg-hover:hsla(0,0%,100%,.55);--os-handle-bg-active:hsla(0,0%,100%,.66)} \ No newline at end of file diff --git a/docs/_next/static/Tbm89d3eTKe7qRwyGO_83/_buildManifest.js b/docs/_next/static/mUfOAMbGlm_Yaqym1qF6r/_buildManifest.js similarity index 100% rename from docs/_next/static/Tbm89d3eTKe7qRwyGO_83/_buildManifest.js rename to docs/_next/static/mUfOAMbGlm_Yaqym1qF6r/_buildManifest.js diff --git a/docs/_next/static/Tbm89d3eTKe7qRwyGO_83/_ssgManifest.js b/docs/_next/static/mUfOAMbGlm_Yaqym1qF6r/_ssgManifest.js similarity index 100% rename from docs/_next/static/Tbm89d3eTKe7qRwyGO_83/_ssgManifest.js rename to docs/_next/static/mUfOAMbGlm_Yaqym1qF6r/_ssgManifest.js diff --git a/docs/examples.html b/docs/examples.html index bc211ae9..4e382e84 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -1 +1 @@ -OverlayScrollbars Examples
Documentation
JavaScript

JavaScript Examples

React

React Examples

Vue

Vue Examples

Angular

Angular Examples

Solid

Solid Examples

Svelte

Svelte Examples

\ No newline at end of file +OverlayScrollbars Examples
Documentation
JavaScript

JavaScript Examples

React

React Examples

Vue

Vue Examples

Angular

Angular Examples

Solid

Solid Examples

Svelte

Svelte Examples

\ No newline at end of file diff --git a/docs/examples.txt b/docs/examples.txt index d13417e6..2318413a 100644 --- a/docs/examples.txt +++ b/docs/examples.txt @@ -1,7 +1,7 @@ 2:I[5250,["250","static/chunks/250-803c01549b05a15b.js","668","static/chunks/app/examples/page-874222f5f6501ae2.js"],""] 3:I[5613,[],""] 4:I[1778,[],""] -5:I[293,["554","static/chunks/554-ea66ad1362920aef.js","556","static/chunks/556-2555a825b8c6e47f.js","185","static/chunks/app/layout-4b29f91646997073.js"],"Html"] -0:["Tbm89d3eTKe7qRwyGO_83",[[["",{"children":["examples",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["examples",{"children":["__PAGE__",{},["$L1",["$","div",null,{"className":"h-full sm:container default:px-6","children":["$","main",null,{"className":"h-full grid items-center justify-items-center py-5 grid-rows-[auto_1fr]","children":[["$","$L2",null,{"href":"/","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm p-4","children":"Documentation"}],["$","div",null,{"className":"w-full grid gap-6 grid-cols-fit-56 py-6","children":[["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(/OverlayScrollbars/icon/javascript.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"/OverlayScrollbars/icon/javascript.svg","alt":"JavaScript","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["JavaScript"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/overlayscrollbars",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/overlayscrollbars","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-example-29hk3v",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-example-29hk3v","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg","alt":"React","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["React"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/react",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/react","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-react",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-react","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-react-example-ddz458",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-react-example-ddz458","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg","alt":"Vue","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Vue"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/vue",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/vue","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-vue",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-vue","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-vue-example-rh3vjm",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-vue-example-rh3vjm","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg","alt":"Angular","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Angular"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/angular",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/angular","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-ngx",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-ngx","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-ngx-example-dwtg9q",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-ngx-example-dwtg9q","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg","alt":"Solid","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Solid"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/solid",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/solid","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-solid",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-solid","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-solid-example-wxl45n",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-solid-example-wxl45n","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg","alt":"Svelte","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Svelte"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/svelte",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/svelte","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-svelte",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-svelte","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-svelte-example-8gqhrp",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-svelte-example-8gqhrp","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}]]}]]}]}],null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","examples","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}]]},[null,["$","$L5",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/OverlayScrollbars/_next/static/css/cc954f78e3da9e86.css","precedence":"next","crossOrigin":""}]],"$L6"]]]] +5:I[293,["554","static/chunks/554-ea66ad1362920aef.js","556","static/chunks/556-2555a825b8c6e47f.js","185","static/chunks/app/layout-b751ad67d23f0013.js"],"Html"] +0:["mUfOAMbGlm_Yaqym1qF6r",[[["",{"children":["examples",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["examples",{"children":["__PAGE__",{},["$L1",["$","div",null,{"className":"h-full sm:container default:px-6","children":["$","main",null,{"className":"h-full grid items-center justify-items-center py-5 grid-rows-[auto_1fr]","children":[["$","$L2",null,{"href":"/","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm p-4","children":"Documentation"}],["$","div",null,{"className":"w-full grid gap-6 grid-cols-fit-56 py-6","children":[["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(/OverlayScrollbars/icon/javascript.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"/OverlayScrollbars/icon/javascript.svg","alt":"JavaScript","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["JavaScript"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/overlayscrollbars",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/overlayscrollbars","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-example-29hk3v",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-example-29hk3v","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg","alt":"React","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["React"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/react",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/react","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-react",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-react","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-react-example-ddz458",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-react-example-ddz458","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg","alt":"Vue","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Vue"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/vue",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/vue","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-vue",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-vue","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-vue-example-rh3vjm",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-vue-example-rh3vjm","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg","alt":"Angular","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Angular"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/angular",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/angular","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-ngx",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-ngx","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-ngx-example-dwtg9q",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-ngx-example-dwtg9q","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg","alt":"Solid","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Solid"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/solid",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/solid","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-solid",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-solid","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-solid-example-wxl45n",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-solid-example-wxl45n","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}],["$","div",null,{"className":"flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white","children":[["$","div",null,{"className":"relative w-16 h-16 mx-auto mb-6","children":[["$","div",null,{"style":{"backgroundImage":"url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg)"},"className":"bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"}],["$","img",null,{"src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg","alt":"Svelte","className":"absolute top-0 left-0 w-full h-full object-contain"}]]}],["$","h2",null,{"className":"font-semiBold text-base text-center","children":["Svelte"," Examples"]}],["$","ul",null,{"className":"list-disc list-inside px-3 mt-6 space-y-2","children":[["$","li","Demo App/OverlayScrollbars/example/svelte",{"children":["$","a",null,{"href":"/OverlayScrollbars/example/svelte","children":"Demo App","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","StackBlitzhttps://stackblitz.com/edit/overlayscrollbars-svelte",{"children":["$","a",null,{"href":"https://stackblitz.com/edit/overlayscrollbars-svelte","children":"StackBlitz","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}],["$","li","CodeSandboxhttps://codesandbox.io/p/sandbox/overlayscrollbars-svelte-example-8gqhrp",{"children":["$","a",null,{"href":"https://codesandbox.io/p/sandbox/overlayscrollbars-svelte-example-8gqhrp","children":"CodeSandbox","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]}]]}]]}]]}]]}]}],null]]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","examples","children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}]]},[null,["$","$L5",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/OverlayScrollbars/_next/static/css/239180dd2803a441.css","precedence":"next","crossOrigin":""}]],"$L6"]]]] 6:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"name":"theme-color","content":"#36befd"}],["$","meta","2",{"charSet":"utf-8"}],["$","title","3",{"children":"OverlayScrollbars Examples"}],["$","meta","4",{"name":"description","content":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."}],["$","link","5",{"rel":"author","href":"https://github.com/KingSora"}],["$","meta","6",{"name":"author","content":"Rene Haas"}],["$","link","7",{"rel":"author","href":"https://github.com/KingSora"}],["$","meta","8",{"name":"author","content":"KingSora"}],["$","meta","9",{"name":"keywords","content":"OverlayScrollbars,Overlay,Scroll,Bar,Custom,Scrollbar,React,Vue,Angular,Solid,Solidjs,Svelte,JavaScript,TypeScript,Plugin,Library"}],["$","meta","10",{"name":"creator","content":"Rene Haas"}],["$","meta","11",{"name":"publisher","content":"Rene Haas"}],["$","meta","12",{"name":"twitter:card","content":"summary"}],["$","meta","13",{"name":"twitter:title","content":"OverlayScrollbars"}],["$","meta","14",{"name":"twitter:description","content":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."}],["$","link","15",{"rel":"icon","href":"/OverlayScrollbars/favicon.ico","type":"image/x-icon","sizes":"256x256"}]] 1:null diff --git a/docs/index.html b/docs/index.html index 1d757c35..44dee642 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,4 +1,4 @@ -OverlayScrollbars
OverlayScrollbars Logo

OverlayScrollbars

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

used by
SpotifyIntelliJ IDEAStorybookAdmin LTEScramble.cloud
OverlayScrollbars on Github

Looking for the v1 docs? Follow this link.

DownloadsVersionLicenseCode CoverageMax. Bundle Size

Why?

+OverlayScrollbars
OverlayScrollbars Logo

OverlayScrollbars

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

used by
SpotifyIntelliJ IDEAStorybookAdmin LTEScramble.cloud
OverlayScrollbars on Github

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 didn't meet my requirements in terms of features, quality, simplicity, license or browser support.

Goals & Features

    @@ -626,4 +626,4 @@

    Future Plans

  • Improve tests. (unit & browser tests)

License

-

MIT

\ No newline at end of file +

MIT

\ No newline at end of file diff --git a/docs/index.txt b/docs/index.txt index 975d2118..101a64d0 100644 --- a/docs/index.txt +++ b/docs/index.txt @@ -1,8 +1,8 @@ 2:I[9009,["250","static/chunks/250-803c01549b05a15b.js","556","static/chunks/556-2555a825b8c6e47f.js","931","static/chunks/app/page-9da703c5ef0baf03.js"],"OverlayScrollbarsClientComponent"] 3:I[5250,["250","static/chunks/250-803c01549b05a15b.js","556","static/chunks/556-2555a825b8c6e47f.js","931","static/chunks/app/page-9da703c5ef0baf03.js"],""] -4:I[293,["554","static/chunks/554-ea66ad1362920aef.js","556","static/chunks/556-2555a825b8c6e47f.js","185","static/chunks/app/layout-4b29f91646997073.js"],"Html"] +4:I[293,["554","static/chunks/554-ea66ad1362920aef.js","556","static/chunks/556-2555a825b8c6e47f.js","185","static/chunks/app/layout-b751ad67d23f0013.js"],"Html"] 5:I[5613,[],""] 6:I[1778,[],""] -0:["Tbm89d3eTKe7qRwyGO_83",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},["$L1",["$","div",null,{"className":"sm:container default:px-6","children":[["$","div",null,{"className":"mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44","children":["$","div",null,{"className":"h-full relative before:content-[\"\"] before:bg-[url(/OverlayScrollbars/img/logo.svg)] before:absolute before:left-0 before:w-full before:h-full before:bg-contain before:bg-center before:bg-no-repeat before:-z-10 before:[transform:translateZ(0)] before:[filter:blur(33px)_saturate(1.22)] before:opacity-50 before:top-2.5 after:content-[\"\"] after:bg-[url(/OverlayScrollbars/img/logo.svg)] after:absolute after:left-0 after:w-full after:h-full after:bg-contain after:bg-center after:bg-no-repeat after:-z-10 after:[transform:translateZ(0)] after:[filter:drop-shadow(0_6px_22px_#5242e3)_saturate(1.5)] after:opacity-10 after:top-0","children":["$","img",null,{"src":"/OverlayScrollbars/img/logo.svg","className":"h-full","alt":"OverlayScrollbars Logo","width":"200","height":"200"}]}]}],["$","h1",null,{"className":"text-center xxs:text-4xl text-2xl font-bold my-11","children":["Overlay",["$","wbr",null,{}],"Scrollbars"]}],["$","p",null,{"className":"text-center mx-auto max-w-screen-sm my-11 font-medium","children":"A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel."}],["$","div",null,{"className":"my-6 text-center font-semiBold text-sm uppercase relative","children":["$","span",null,{"className":"p-3 bg-slate-50","children":[["$","span",null,{"children":"used by"}],["$","span",null,{"className":"absolute block top-1/2 left-1/2 w-full xs:w-[80%] border-t-[1px] border-slate-300 -translate-x-1/2 -translate-y-1/2 -z-10"}]]}]}],["$","$L2",null,{"defer":true,"children":["$","div",null,{"className":"flex justify-center","children":["$","div",null,{"className":"inline-flex items-center gap-6 px-1 py-6 opacity-60 [filter:brightness(0.8)_sepia(1)_saturate(1.44)_hue-rotate(175deg)]","children":[["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group py-1","target":"_blank","href":"https://github.com/KingSora/OverlayScrollbars/issues/150#issuecomment-658658186","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/spotify-logo.svg","alt":"Spotify","style":{"filter":"brightness(0.35)"}}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group","target":"_blank","href":"https://github.com/JetBrains/intellij-community/blob/ee35416f381ed33f976d7b9322a5ee6156e7fa2f/platform/platform-api/src/com/intellij/ui/jcef/JBCefScrollbarsHelper.java#L41-L50","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/intellij-idea-logo.svg","alt":"IntelliJ IDEA"}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group py-1.5","target":"_blank","href":"https://github.com/storybookjs/storybook/blob/32d2fafa8d1d2e197e885349f2c01f5422bde5b4/code/ui/components/package.json#L66-L67","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/storybook-logo.svg","alt":"Storybook"}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group py-3","target":"_blank","href":"https://github.com/ColorlibHQ/AdminLTE/blob/3113ac5efed25971ccd0972f5eeff3c364f218dc/src/html/components/_scripts.astro#L6-L7","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/adminlte-logo.png","alt":"Admin LTE"}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group","target":"_blank","href":"https://scramble.cloud/#credits","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/scramble-logo.svg","alt":"Scramble.cloud"}]}]]}]}]}],["$","div",null,{"className":"my-6 text-center font-semiBold text-sm uppercase relative","children":["$","span",null,{"className":"p-3 bg-slate-50","children":[["$","span",null,{"children":["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars","target":"_blank","className":"inline-block leading-[0] rounded-full","children":[["$","span",null,{"style":{"maskImage":"url(/OverlayScrollbars/icon/github.svg)","WebkitMaskImage":"url(/OverlayScrollbars/icon/github.svg)"},"className":"default:block default:flex-none default:bg-current mask-center mask-contain mask-no-repeat inline-block w-11 h-11 hover:scale-110 text-primary-dark hover:text-primary-blue1 active:text-primary-blue2 transition-transformColor ease-in-out duration-300"}],["$","span",null,{"className":"sr-only","children":"OverlayScrollbars on Github"}]]}]}],["$","span",null,{"className":"absolute block top-1/2 left-1/2 w-full xs:w-[80%] border-t-[1px] border-slate-300 -translate-x-1/2 -translate-y-1/2 -z-10"}]]}]}],["$","p",null,{"className":"text-center text-sm text-primary-gray2 mx-auto max-w-screen-sm my-11 font-medium","children":["Looking for the v1 docs? ",["$","$L3",null,{"href":"/v1","children":"Follow this link","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],"."]}],["$","div",null,{"className":"mx-auto flex sm:flex-row justify-center gap-2 items-center flex-wrap","children":[["$","a",null,{"href":"https://www.npmjs.com/package/overlayscrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square","alt":"Downloads"}]}],["$","a",null,{"href":"https://www.npmjs.com/package/overlayscrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square","alt":"Version"}]}],["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square","alt":"License"}]}],["$","a",null,{"href":"https://app.codecov.io/gh/KingSora/OverlayScrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square","alt":"Code Coverage"}]}],["$","a",null,{"href":"https://bundlephobia.com/package/overlayscrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/bundlephobia/minzip/overlayscrollbars?label=max.%20bundle%20size&style=flat-square","alt":"Max. Bundle Size"}]}]]}],["$","nav",null,{"className":"mx-auto my-6 text-lg flex sm:flex-row justify-center gap-2 items-center flex-wrap","children":[["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars","target":"_blank","children":"GitHub","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],["$","span",null,{"children":"  •  "}],["$","$L3",null,{"href":"/examples","target":"_blank","children":"Examples","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]]}],["$","main",null,{"className":"prose prose-primary mx-auto pb-12","children":[["$","h2",null,{"children":"Why?"}],"\n",["$","p",null,{"children":"I created this plugin because I hate ugly and space-consuming scrollbars. Similar plugins didn't meet my requirements in terms of features, quality, simplicity, license or browser support."}],"\n",["$","h2",null,{"children":"Goals & Features"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Simple, powerful and well-documented API"}],"\n",["$","li",null,{"children":["High browser compatibility - ",["$","strong",null,{"children":"Firefox 59+"}],", ",["$","strong",null,{"children":"Chrome 55+"}],", ",["$","strong",null,{"children":"Opera 42+"}],", ",["$","strong",null,{"children":"Edge 15+"}]," and ",["$","strong",null,{"children":"Safari 10+"}]]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Fully Accessible"}]," - Native scrolling behavior is fully preserved"]}],"\n",["$","li",null,{"children":["Can run on the server (",["$","code",null,{"children":"Node"}],", ",["$","code",null,{"children":"Deno"}]," and ",["$","code",null,{"children":"Bun"}],") - ",["$","strong",null,{"children":"SSR"}],", ",["$","strong",null,{"children":"SSG"}]," and ",["$","strong",null,{"children":"ISR"}]," support"]}],"\n",["$","li",null,{"children":["Tested on various devices - ",["$","strong",null,{"children":"Mobile"}],", ",["$","strong",null,{"children":"Desktop"}]," and ",["$","strong",null,{"children":"Tablet"}],"."]}],"\n",["$","li",null,{"children":["Tested with various (and mixed) inputs - ",["$","strong",null,{"children":"Mouse"}],", ",["$","strong",null,{"children":"Touch"}]," and ",["$","strong",null,{"children":"Pen"}],"."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Treeshaking"}]," - bundle only what you really need"]}],"\n",["$","li",null,{"children":["Automatic update detection - ",["$","strong",null,{"children":"no polling required"}],"."]}],"\n",["$","li",null,{"children":"Leverage latest browser features - best performance in new browsers"}],"\n",["$","li",null,{"children":["Flow independent - supports all values for ",["$","code",null,{"children":"direction"}],", ",["$","code",null,{"children":"flex-direction"}]," and ",["$","code",null,{"children":"writing-mode"}],"."]}],"\n",["$","li",null,{"children":"Supports scroll snapping"}],"\n",["$","li",null,{"children":["Supports all ",["$","strong",null,{"children":"virtual scrolling"}]," libraries"]}],"\n",["$","li",null,{"children":"Supports the `body' element"}],"\n",["$","li",null,{"children":"Easy and effective scrollbar styling"}],"\n",["$","li",null,{"children":"Highly customizable"}],"\n",["$","li",null,{"children":"TypeScript support - completely written in TypeScript"}],"\n",["$","li",null,{"children":"Dependency-free - 100% self-written to ensure small size and best functionality"}],"\n",["$","li",null,{"children":["High quality and fully typed framework versions for ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react","children":["$","code",null,{"children":"react"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue","children":["$","code",null,{"children":"vue"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx","children":["$","code",null,{"children":"angular"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte","children":["$","code",null,{"children":"svelte"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," and ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid","children":["$","code",null,{"children":"solid"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],"."]}],"\n"]}],"\n",["$","h2",null,{"children":"Choose your framework"}],"\n",["$","p",null,{"children":"In addition to the vanilla JavaScript version, you can use the official framework components & utilities:"}],"\n",["$","div",null,{"className":"flex flex-wrap","children":[["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg","width":"80","height":"80","alt":"React"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg","width":"80","height":"80","alt":"Vue"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg","width":"80","height":"80","alt":"Angular"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg","width":"80","height":"80","alt":"Svelte"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg","width":"80","height":"80","alt":"Solid"}]}]]}],"\n",["$","h2",null,{"children":"Getting started"}],"\n",["$","h3",null,{"children":"npm & nodejs"}],"\n",["$","p",null,{"children":["OverlayScrollbars can be downloaded from ",["$","a",null,{"href":"https://www.npmjs.com/package/overlayscrollbars","children":"npm","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or the package manager of your choice:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"sh","data-theme":"solarized-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"npm"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" install"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" overlayscrollbars"}]]}]}]}]}],"\n",["$","p",null,{"children":"Once installed, it can be imported:"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"import"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" 'overlayscrollbars/overlayscrollbars.css'"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"import"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"} "}],["$","span",null,{"style":{"color":"#859900"},"children":"from"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" 'overlayscrollbars'"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}]]}]}]}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": If the path ",["$","code",null,{"children":"'overlayscrollbars/overlayscrollbars.css'"}]," is not working use ",["$","code",null,{"children":"'overlayscrollbars/styles/overlayscrollbars.css'"}]," as the import path for the CSS file."]}],"\n"]}],"\n",["$","p",null,{"children":["You can use this ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/examples/node","children":"Node Example","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," as an reference / starting point."]}],"\n",["$","h3",null,{"children":"Manual Download & Embedding"}],"\n",["$","p",null,{"children":["You can use OverlayScrollbars without any bundler or package manager.",["$","br",null,{}],"\n","Simply download it from the ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/releases","children":"Releases","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or use a ",["$","a",null,{"href":"https://cdnjs.com/libraries/overlayscrollbars","children":"CDN","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],"."]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["Use the javascript files with the ",["$","code",null,{"children":".browser"}]," extension."]}],"\n",["$","li",null,{"children":["Use the javascript files with the ",["$","code",null,{"children":".es5"}]," extension if you need to support older browsers, otherwise use the ",["$","code",null,{"children":".es6"}]," files."]}],"\n",["$","li",null,{"children":["For production use the javascript / stylesheet files with the ",["$","code",null,{"children":".min"}]," extension."]}],"\n"]}],"\n",["$","p",null,{"children":"Embed OverlayScrollbars manually in your HTML:"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"html","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"link"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" type"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"text/css\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" href"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"path/to/overlayscrollbars.css\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" rel"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"stylesheet\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"script"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" type"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"text/javascript\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" src"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"path/to/overlayscrollbars.browser.es.js\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" defer>"}]]}]]}]}]}],"\n",["$","p",null,{"children":["Use the global variable ",["$","code",null,{"children":"OverlayScrollbarsGlobal"}]," to access the api similar to how you can do it in nodejs / modules:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"var"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"} "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbarsGlobal"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}]]}]}]}],"\n",["$","p",null,{"children":["You can use this ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/examples/browser","children":"Browser Example","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," as an reference / starting point."]}],"\n",["$","p",null,{"children":["The examples in this documentation will use the ",["$","code",null,{"children":"import"}]," syntax instead of the ",["$","code",null,{"children":"OverlayScrollbarsGlobal"}]," object. However, both versions are equivalent."]}],"\n",["$","h2",null,{"children":"Initialization"}],"\n",["$","p",null,{"children":["The initialization of ",["$","code",null,{"children":"OverlayScrollbars"}]," is explicit ",["$","em",null,{"children":"per element"}],". Only the scrollbars of the element on which the plugin is initialized will be changed. Scrollbars of child elements will remain unchanged unless the plugin is initialized on them as well."]}],"\n",["$","p",null,{"children":["You can initialize either directly with an ",["$","code",null,{"children":"Element"}]," or with an ",["$","code",null,{"children":"Object"}]," where you have more control over the initialization process."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// simple initialization with an element"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {});"}]]}]]}]}]}],"\n",["$","h3",null,{"children":"Bridging initialization flickering"}],"\n",["$","p",null,{"children":"When you initialize OverlayScrollbars, it takes a few milliseconds to create and append all the elements to the DOM. During this time, the native scrollbars are still visible and will be switched out after the initialization is finished. This is seen as flickering."}],"\n",["$","p",null,{"children":["To fix this behavior apply the ",["$","code",null,{"children":"data-overlayscrollbars-initialize"}]," attribute to the target element (and the ",["$","code",null,{"children":"html"}]," element if the target element is ",["$","code",null,{"children":"body"}],")."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"html","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":""}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"html"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" data-overlayscrollbars-initialize>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"head"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" data-overlayscrollbars-initialize>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":""}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" data-overlayscrollbars-initialize>"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" OverlayScrollbars is applied to this div"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}]]}]]}]}]}],"\n",["$","h3",null,{"children":"Initialization with an Object"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","p",null,{"children":["The only required field is the ",["$","code",null,{"children":"target"}]," field. This is the field to which the plugin will be applied.",["$","br",null,{}],"\n","If you use the object initialization with only the ",["$","code",null,{"children":"target"}]," field, the result is equivalent to the element initialization:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Both initializations have the same outcome"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {});"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":") }, {});"}]]}]]}]}]}],["$","p",null,{"children":"In the initialization object you can specify how the library handles generated elements.\r\nFor example, you can specify an existing element as the `viewport' element. Then the library won't generate it, but use the specified element instead:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" elements: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" viewport: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#viewport'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}, {});"}]}]]}]}]}],["$","p",null,{"children":"This is very useful if you have a fixed DOM structure and don't want OverlayScrollbars to create its own elements. These cases are very common when you want another library to work with OverlayScrollbars."}],["$","hr",null,{}],["$","p",null,{"children":"You can also decide to which element the scrollbars should be applied to:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" slot: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":")."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"parentElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}, {});"}]}]]}]}]}],["$","hr",null,{}],["$","p",null,{"children":"Last but not least, you can decide when to cancel the initialization:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" cancel: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" nativeScrollbarsOverlaid: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"true"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" body: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"null"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}, {});"}]}]]}]}]}],["$","p",null,{"children":["In the above example, the initialization will be aborted if the native scrollbars are overlaid, or if your target is a ",["$","code",null,{"children":"body"}]," element and the plugin has determined that initializing to the ",["$","code",null,{"children":"body"}]," element would interfere with native functionality such as ",["$","code",null,{"children":"window.scrollTo"}],"."]}]]}],"\n",["$","h2",null,{"children":"Options"}],"\n",["$","p",null,{"children":["You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the ",["$","code",null,{"children":"options"}]," method:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" overflow: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" x: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'hidden'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"});"}]}]]}]}]}],"\n",["$","h3",null,{"children":"Options in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","p",null,{"children":"The default options are:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" defaultOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" paddingAbsolute: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" showNativeOverlaidScrollbars: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" update: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" elementEvents: [["}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'img'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'load'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]],"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" debounce: ["}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#D33682"},"children":"33"}],["$","span",null,{"style":{"color":"#657B83"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" attributes: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"null"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" ignoreMutation: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"null"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" overflow: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" x: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'scroll'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" y: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'scroll'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" theme: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'os-theme-dark'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" visibility: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'auto'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHide: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'never'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideDelay: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"1300"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideSuspend: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" dragScroll: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"true"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" clickScroll: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" pointers: ["}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'mouse'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'touch'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'pen'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}]]}]}]}],["$","h3",null,{"children":["$","code",null,{"children":"paddingAbsolute"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","p",null,{"children":"Indicates whether the padding for the content shall be absolute."}],["$","h3",null,{"children":["$","code",null,{"children":"showNativeOverlaidScrollbars"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","p",null,{"children":"Indicates whether the native overlaid scrollbars shall be visible."}],["$","h3",null,{"children":["$","code",null,{"children":"update.elementEvents"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Array<[string, string]> | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"[['img', 'load']]"}]}]]}]}]]}],["$","p",null,{"children":["An array of tuples. The first value in the tuple is an ",["$","code",null,{"children":"selector"}]," and the second value are ",["$","code",null,{"children":"event names"}],". The plugin will update itself if any of the elements with the specified selector will emit any specified event. The default value can be interpreted as \"The plugin will update itself if any ",["$","code",null,{"children":"img"}]," element emits an ",["$","code",null,{"children":"load"}]," event.\""]}],["$","h3",null,{"children":["$","code",null,{"children":"update.debounce"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"[number, number] | number | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"[0, 33]"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": If 0 is used for the timeout, ",["$","code",null,{"children":"requestAnimationFrame"}]," instead of ",["$","code",null,{"children":"setTimeout"}]," is used for the debounce."]}],"\n"]}],["$","p",null,{"children":["Debounces the ",["$","code",null,{"children":"MutationObserver"}]," which tracks changes to the content. If a ",["$","strong",null,{"children":"tuple"}]," is passed, the first value is the timeout and second is the max wait. If only a ",["$","strong",null,{"children":"number"}]," is passed you specify only the timeout and there is no max wait. With ",["$","strong",null,{"children":"null"}]," there is no debounce. ",["$","strong",null,{"children":"Usefull to fine-tune performance."}]]}],["$","h3",null,{"children":["$","code",null,{"children":"update.attributes"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string[] | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"null"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": There is a base array of attributes that the ",["$","code",null,{"children":"MutationObserver"}]," always observes, even if this option is ",["$","code",null,{"children":"null"}],"."]}],"\n"]}],["$","p",null,{"children":["An array of additional attributes that the ",["$","code",null,{"children":"MutationObserver"}]," should observe for the content."]}],["$","h3",null,{"children":["$","code",null,{"children":"update.ignoreMutation"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"((mutation) => any) | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"null"}]}]]}]}]]}],["$","p",null,{"children":["A function which receives a ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord","children":["$","code",null,{"children":"MutationRecord"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," as an argument. If the function returns a truthy value the mutation will be ignored and the plugin won't update. ",["$","strong",null,{"children":"Usefull to fine-tune performance."}]]}],["$","h3",null,{"children":["$","code",null,{"children":"overflow.x"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'scroll'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'hidden'"}],", ",["$","code",null,{"children":"'scroll'"}],", ",["$","code",null,{"children":"'visible'"}],", ",["$","code",null,{"children":"'visible-hidden'"}]," and ",["$","code",null,{"children":"'visible-scroll'"}],"."]}],"\n"]}],["$","p",null,{"children":"The overflow behavior for the horizontal (x) axis."}],["$","h3",null,{"children":["$","code",null,{"children":"overflow.y"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'scroll'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'hidden'"}],", ",["$","code",null,{"children":"'scroll'"}],", ",["$","code",null,{"children":"'visible'"}],", ",["$","code",null,{"children":"'visible-hidden'"}]," and ",["$","code",null,{"children":"'visible-scroll'"}],"."]}],"\n"]}],["$","p",null,{"children":"The overflow behavior for the vertical (y) axis."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.theme"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'os-theme-dark'"}]}]]}]}]]}],["$","p",null,{"children":"Applies the specified theme (classname) to the scrollbars."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.visibility"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'auto'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'visible'"}],", ",["$","code",null,{"children":"'hidden'"}],", and ",["$","code",null,{"children":"'auto'"}],"."]}],"\n"]}],["$","p",null,{"children":["The visibility of a scrollbar if its scroll axis is able to have a scrollable overflow. (Scrollable overflow for an axis is only possible with the overflow behavior ",["$","code",null,{"children":"'scroll'"}]," or ",["$","code",null,{"children":"'visible-scroll'"}],")."]}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.autoHide"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'never'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'never'"}],", ",["$","code",null,{"children":"'scroll'"}],", ",["$","code",null,{"children":"'leave'"}]," and ",["$","code",null,{"children":"'move'"}],"."]}],"\n"]}],["$","p",null,{"children":"The possibility to hide visible scrollbars automatically after a certain user action."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.autoHideDelay"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"number"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"1300"}]}]]}]}]]}],["$","p",null,{"children":"The delay in milliseconds before the scrollbars are hidden automatically."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.autoHideSuspend"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","p",null,{"children":["Suspend the autoHide functionality until the first scroll interaction was performed.",["$","br",null,{}],"\n","The default value for this option is ",["$","code",null,{"children":"false"}]," for backwards compatibility reasons but is recommended to be ",["$","code",null,{"children":"true"}]," for better accessibility."]}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.dragScroll"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"true"}]}]]}]}]]}],["$","p",null,{"children":"Indicates whether you can drag the scrollbar handles for scrolling."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.clickScroll"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": This options requires the ",["$","strong",null,{"children":"ClickScrollPlugin"}]," to work."]}],"\n"]}],["$","p",null,{"children":"Indicates whether you can click on the scrollbar track for scrolling."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.pointers"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string[] | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"['mouse', 'touch', 'pen']"}]}]]}]}]]}],["$","p",null,{"children":["The ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType","children":["$","code",null,{"children":"PointerTypes"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," the plugin should react to."]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// The options of a OverlayScrollbars instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the padding shall be absolute."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" paddingAbsolute"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether to show the native scrollbars. Has only an effect it the native scrollbars are overlaid."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" showNativeOverlaidScrollbars"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Customizes the automatic update behavior."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" update"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The given Event(s) from the elements with the given selector(s) will trigger an update."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Useful for everything the MutationObserver and ResizeObserver can't detect"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * e.g.: and Images `load` event or the `transitionend` / `animationend` events."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" elementEvents"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Array"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<[elementSelector: "}],["$","span",null,{"style":{"color":"#859900"},"children":"string"}],["$","span",null,{"style":{"color":"#657B83"},"children":", eventNames: "}],["$","span",null,{"style":{"color":"#859900"},"children":"string"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]> "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The debounce which is used to detect content changes."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If a tuple is provided you can customize the `timeout` and the `maxWait` in milliseconds."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If a single number customizes only the `timeout`."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" *"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If the `timeout` is `0`, a debounce still exists. (its executed via `requestAnimationFrame`)."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" debounce"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [timeout: "}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":", maxWait: "}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":"] "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" number"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * HTML attributes which will trigger an update if they're changed."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Basic attributes like `id`, `class`, `style` etc. are always observed and doesn't have to be added explicitly."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" attributes"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":"[] "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // A function which makes it possible to ignore a content mutation or null if nothing shall be ignored."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" ignoreMutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" ((mutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" MutationRecord"}],["$","span",null,{"style":{"color":"#657B83"},"children":") "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" any"}],["$","span",null,{"style":{"color":"#657B83"},"children":") "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Customizes the overflow behavior per axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflow"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The overflow behavior of the horizontal (x) axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" x"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverflowBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The overflow behavior of the vertical (y) axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" y"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverflowBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Customizes appearance of the scrollbars."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars theme. The theme value will be added as `class` to all `scrollbar` elements of the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" theme"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars visibility behavior."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" visibility"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" ScrollbarsVisibilityBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars auto hide behavior."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHide"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" ScrollbarsAutoHideBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars auto hide delay in milliseconds."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideDelay"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" number"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the scrollbars auto hide behavior is suspended until a scroll happened."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideSuspend"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether its possible to drag the handle of a scrollbar to scroll the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" dragScroll"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether its possible to click the track of a scrollbar to scroll the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" clickScroll"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // An array of pointer types which shall be supported."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" pointers"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":"[] "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Events"}],"\n",["$","p",null,{"children":["You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the ",["$","code",null,{"children":"on"}]," and ",["$","code",null,{"children":"off"}]," methods:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {}, {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" updated"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(osInstance, onUpdatedArgs) {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // ..."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"});"}]}]]}]}]}],"\n",["$","h3",null,{"children":"Events in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Every event receives the ",["$","code",null,{"children":"instance"}]," from which it was dispatched as the first argument. Always."]}],"\n"]}],["$","h3",null,{"children":["$","code",null,{"children":"initialized"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}]}]]}],["$","p",null,{"children":"Is dispatched after all generated elements, observers and events were appended to the DOM."}],["$","h3",null,{"children":["$","code",null,{"children":"updated"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"onUpdatedArgs"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An ",["$","code",null,{"children":"object"}]," which describes the update in detail."]}]]}]]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": If an update was triggered but nothing changed, the event won't be dispatched."]}],"\n"]}],["$","p",null,{"children":"Is dispatched after the instace was updated."}],["$","h3",null,{"children":["$","code",null,{"children":"destroyed"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"canceled"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An ",["$","code",null,{"children":"boolean"}]," which indicates whether the initialization was canceled and thus destroyed."]}]]}]]}]]}],["$","p",null,{"children":"Is dispatched after all generated elements, observers and events were removed from the DOM."}],["$","h3",null,{"children":["$","code",null,{"children":"scroll"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"event"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["The original ",["$","code",null,{"children":"event"}]," argument of the DOM event."]}]]}]]}]]}],["$","p",null,{"children":"Is dispatched by scrolling the viewport."}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// A mapping between event names and their listener arguments."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched after all elements are initialized and appended."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" initialized"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched after an update."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" updated"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", onUpdatedArgs: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OnUpdatedEventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched after all elements, observers and events are destroyed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" destroyed"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", canceled: "}],["$","span",null,{"style":{"color":"#859900"},"children":"boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched on scroll."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scroll"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", event: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Event"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OnUpdatedEventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Hints which describe what changed in the DOM."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" updateHints"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the size of the host element changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" sizeChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the direction of the host element changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" directionChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the intrinsic height behavior changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" heightIntrinsicChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the overflow edge (clientWidth / clientHeight) of the viewport element changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowEdgeChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the overflow amount changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowAmountChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the overflow style changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowStyleChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the scroll coordinates changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollCoordinatesChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether an host mutation took place."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" hostMutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether an content mutation took place."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" contentMutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The changed options."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" changedOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the update happened with an force invalidated cache."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" force"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Instance"}],"\n",["$","p",null,{"children":["The OverlayScrollbars instance is created by calling the ",["$","code",null,{"children":"OverlayScrollbars"}]," function with an element and options object."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#657B83"},"children":", {});"}]]}]}]}]}],"\n",["$","h3",null,{"children":"Instance Methods"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","h3",null,{"children":["$","code",null,{"children":"options(): Options"}]}],["$","p",null,{"children":"Get the current options of the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Options"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The current options."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"options(newOptions, pure?): Options"}]}],["$","p",null,{"children":"Sets the current options of the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"newOptions"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"PartialOptions"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The new (partial) options which should be applied."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"pure"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether the options should be reset before the new options are added."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Options"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The complete new options."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"on(eventListeners, pure?): Function"}]}],["$","p",null,{"children":"Adds event listeners to the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"eventListeners"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"EventListeners"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which contains the added listeners. The fields are the event names and the values the listeners."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"pure"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether all already added event listeners should be removed before the new listeners are added."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"A function which removes all added event listeners."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"on(name, listener): Function"}]}],["$","p",null,{"children":"Adds a single event listener to the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listener"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The function which is invoked when the event is dispatched."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"A function which removes the added event listener."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"on(name, listeners): Function"}]}],["$","p",null,{"children":"Adds multiple event listeners to the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listeners"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The functions which are invoked when the event is dispatched."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"A function which removes the added event listeners."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"off(name, listener): void"}]}],["$","p",null,{"children":"Removes a single event listener from the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listener"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The function to be removed."}]]}]]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"off(name, listeners): void"}]}],["$","p",null,{"children":"Removes multiple event listeners from the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listeners"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The functions to be removed."}]]}]]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"update(force?): boolean"}]}],["$","p",null,{"children":"Updates the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"force"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether the update should force the cache to be invalidated."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["A boolean which indicates whether the ",["$","code",null,{"children":"update"}]," event was triggered through this update."]}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"state(): State"}]}],["$","p",null,{"children":"Gets the instances state."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"State"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which describes the state of the instance."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"elements(): Elements"}]}],["$","p",null,{"children":"Gets the instances elments."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Elements"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which describes the elements of the instance."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"destroy(): void"}]}],["$","p",null,{"children":"Destroys the instance and removes all added elements."}],["$","h3",null,{"children":["$","code",null,{"children":"plugin(plugin: object): object | undefined"}]}],["$","p",null,{"children":"Gets the instance modules instance of the passed plugin."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An object which describes the plugins instance modules instance or ",["$","code",null,{"children":"undefined"}]," if no instance was found."]}]]}]}]]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// A simplified version of the OverlayScrollbars TypeScript interface."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Get the current options of the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" options"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Sets the current options of the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" options"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":", pure"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds event listeners to the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" on"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(eventListeners"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListeners"}],["$","span",null,{"style":{"color":"#657B83"},"children":", pure"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds a single event listener to the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" on"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">)"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds multiple event listeners to the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" on"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">[])"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Removes a single event listener from the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" off"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">)"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Removes multiple event listeners from the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" off"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">[])"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Updates the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" update"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(force"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instances state."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" state"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" State"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instances elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Destroys the instance and removes all added elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" destroy"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instance modules instance of the passed plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"P"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InstancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(osPlugin"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" P"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferInstancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"P"}],["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" undefined"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbars instances state."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" State"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Describes the current padding in pixel."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" padding"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" TRBL"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the current padding is absolute."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" paddingAbsolute"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The client width (x) & height (y) of the viewport in pixel."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowEdge"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The overflow amount in pixel."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowAmount"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The css overflow style of the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowStyle"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverflowStyle"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the viewport has an overflow."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" hasOverflow"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scroll coordinates of the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollCoordinates"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The start (origin) scroll coordinates for each axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" start"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The end scroll coordinates for each axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" end"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the direction is considered rtl."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" directionRTL"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the instance is considered destroyed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" destroyed"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes the elements of a OverlayScrollbars instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The element the instance was applied to."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The host element. Its the root of all other elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" host"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element which is responsible to apply correct paddings."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the Initialization it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" padding"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The element which is responsible to do any scrolling."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" viewport"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element which is responsible to hold the content."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the Initialization it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" content"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element through which you can get the current `scrollLeft` or `scrollTop` offset."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the target element it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollOffsetElement"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element through which you can add `scroll` events."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the target element it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollEventElement"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Document"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The horizontal scrollbar elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarHorizontal"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" CloneableScrollbarElements"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The vertical scrollbar elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarVertical"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" CloneableScrollbarElements"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Static Object"}],"\n",["$","p",null,{"children":["The static ",["$","code",null,{"children":"OverlayScrollbars"}]," object."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"SomePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}]}]}]}],"\n",["$","h3",null,{"children":"Static Object Methods"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","h3",null,{"children":["$","code",null,{"children":"valid(osInstance): boolean"}]}],["$","p",null,{"children":"Checks whether the passed value is a valid and not destroyed overlayscrollbars instance"}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"osInstance"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"any"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The value to be checked."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether the passed value is a valid and not destroyed overlayscrollbars instance."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"env(): Environment"}]}],["$","p",null,{"children":"Gets the environment."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Environment"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which described the environment."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"nonce(newNonce): void"}]}],["$","p",null,{"children":"Sets the nonce attribute for inline styles."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"newNonce"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The nonce attribute for inline styles."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"plugin(plugin): object | undefined"}]}],["$","p",null,{"children":"Adds a single plugin."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"plugin"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The plugin to be added."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object / void"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An object which describes the plugins static modules instance or ",["$","code",null,{"children":"void"}]," if no instance was found."]}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"plugin(plugins): (object | void)[]"}]}],["$","p",null,{"children":"Adds multiple plugins."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"plugins"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The plugins to be added."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"(object / void)[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An array which describes the plugins static modules instances or ",["$","code",null,{"children":"undefined"}]," if no instance was found."]}]]}]}]]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// The OverlayScrollbars static object."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbarsStatic"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instance of the passed target or `undefined` the target has no instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" (target"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InitializationTarget"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" undefined"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Initializes OverlayScrollbars to the passed target with passed options and event listeners."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" (target"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InitializationTarget"}],["$","span",null,{"style":{"color":"#657B83"},"children":", options"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":", eventListeners"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListeners"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Checks whether the passed value is a valid and not destroyed overlayscrollbars instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" valid"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" any"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" osInstance "}],["$","span",null,{"style":{"color":"#859900"},"children":"is"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the environment."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" env"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Environment"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Sets the nonce attribute for inline styles."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" nonce"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newNonce"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" undefined"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds a single plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(plugin"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferStaticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds multiple plugins."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(plugins"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"[])"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferStaticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">[];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes the OverlayScrollbars environment."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Environment"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The native scrollbars size of the browser / system."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarsSize"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the native scrollbars are overlaid."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarsOverlaid"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the browser supports native scrollbars hiding."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarsHiding"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the browser supports the ScrollTimeline API."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollTimeline"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The default Initialization to use if nothing else is specified."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" staticDefaultInitialization"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Initialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The default Options to use if nothing else is specified."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" staticDefaultOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Returns the current default Initialization."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getDefaultInitialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Initialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Returns the current default Options."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getDefaultOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Sets a new default Initialization."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If the new default Initialization is partially filled, its deeply merged with the current default Initialization."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@param"}],["$","span",null,{"style":{"color":"#268BD2","fontStyle":"italic"},"children":" newDefaultInitialization"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The new default Initialization."}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@returns"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The current default Initialization."}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" setDefaultInitialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newDefaultInitialization"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialInitialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Initialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Sets new default Options."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If the new default Options are partially filled, they're deeply merged with the current default Options."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@param"}],["$","span",null,{"style":{"color":"#268BD2","fontStyle":"italic"},"children":" newDefaultOptions"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The new default Options."}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@returns"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The current default options."}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" setDefaultOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newDefaultOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Styling"}],"\n",["$","p",null,{"children":["OverlayScrollbars comes with two themes called ",["$","code",null,{"children":"os-theme-dark"}]," and ",["$","code",null,{"children":"os-theme-light"}],". You can use the ",["$","code",null,{"children":"scrollbars.theme"}]," option to change the theme."]}],"\n",["$","p",null,{"children":["Custom themes can be done in several ways. The easiest and fastest way is to use the predefined set of ",["$","code",null,{"children":"CSS Custom Properties"}]," aka CSS variables. If that's not enough, you can add custom class names or add custom styling to the existing class names."]}],"\n",["$","h3",null,{"children":"Styling in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","h3",null,{"children":"CSS Custom properties"}],["$","p",null,{"children":["OverlayScrollbars provides a set of ",["$","code",null,{"children":"CSS Custom Properties"}]," which makes scrollbar styling easy and fast:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"scss","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-scrollbar"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The size of the scrollbar"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The axis-perpedicular padding of the scrollbar (horizontal: padding-y, vertical: padding-x)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-padding-perpendicular: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The axis padding of the scrollbar (horizontal: padding-x, vertical: padding-y)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-padding-axis: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border radius of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border-radius: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-bg: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-bg-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-bg-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border radius of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border-radius: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The background of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-bg: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover background of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-bg-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active background of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-bg-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover border of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active border of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The min size of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-min-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"33"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The max size of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-max-size: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-perpendicular-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"100"}],["$","span",null,{"style":{"color":"#859900"},"children":"%"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-perpendicular-size-hover: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"100"}],["$","span",null,{"style":{"color":"#859900"},"children":"%"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-perpendicular-size-active: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"100"}],["$","span",null,{"style":{"color":"#859900"},"children":"%"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Increases the interactive area of the scrollbar handle."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-interactive-area-offset: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["You can change the properties for both scrollbars at once, or for each scrollbar axis. In the example below, I've chosen ",["$","code",null,{"children":"os-theme-custom"}]," as the theme name:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"scss","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// horizontal and vertical scrollbar are 10px "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-theme-custom"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"10"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// horizontal scrollbar is 10px"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-theme-custom.os-scrollbar-horizontal"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"10"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// vertical scrollbar is 20px"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-theme-custom.os-scrollbar-vertical"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"20"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["You can then use your theme by assigning it via the ",["$","code",null,{"children":"scrollbars.theme"}]," option:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#657B83"},"children":", {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" theme: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'os-theme-custom'"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"});"}]}]]}]}]}],["$","p",null,{"children":"Since scrollbar styles are usually simple, this set of options should be enough to get the styling you want.\r\nIf you need more freedom, you can create your own styles by adding styling to the base class names described in the next section."}],["$","h3",null,{"children":"Scrollbars structure and CSS class names"}],["$","p",null,{"children":"The scrollbars HTML markup looks like:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"html","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar os-scrollbar-horizontal\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-track\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-handle\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar os-scrollbar-vertical\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-track\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-handle\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}]]}]]}]}]}],["$","p",null,{"children":["The class names are simplified, in a real application the ",["$","code",null,{"children":".os-scrollbar"}]," element can have additional class names which modify the appearance (mostly visibility and alignment)."]}],["$","p",null,{"children":"Below is a list of the most important class names you will encounter:"}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"CSS class name"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The root element of a scrollbar."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-rtl"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["Indicates a ",["$","code",null,{"children":"RTL"}]," direction of the host element the scrollbar belongs to."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-horizontal"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The root element of a horizontal scrollbar."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-vertical"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The root element of a vertical scrollbar."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-handle-interactive"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["Indicates that the handle inside the scrollbar is interactive (",["$","code",null,{"children":"scrollbars.dragScroll"}]," is ",["$","code",null,{"children":"true"}],")."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-track-interactive"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["Indicates that the track inside the scrollbar is interactive (",["$","code",null,{"children":"scrollbars.clickScroll"}]," is ",["$","code",null,{"children":"true"}],")."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-track"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["The track element. This is the track of the nested handle element. If ",["$","code",null,{"children":"scrollbars.clickScroll"}]," is ",["$","code",null,{"children":"true"}]," this is the element users can click to change the scroll offset."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-handle"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["The handle element. If ",["$","code",null,{"children":"scrollbars.dragScroll"}]," is ",["$","code",null,{"children":"true"}]," this is the handle users can drag to change the scroll offset."]}]]}]]}]]}],["$","p",null,{"children":"If you create your own theme, please only use the classes listed above. All other classes are modifier classes used to change visibility, alignment and pointer-events of the scrollbars."}],["$","h3",null,{"children":"Gotchas"}],["$","p",null,{"children":["It is important that the chosen theme class name in your CSS file matches the assigned theme name in the options. If the CSS class name is ",["$","code",null,{"children":".my-theme"}],", the ",["$","code",null,{"children":"scrollbars.theme"}]," must be ",["$","code",null,{"children":"'my-theme'"}],"."]}],["$","p",null,{"children":["Please be aware of your stack. For example, ",["$","code",null,{"children":"css-modules"}]," will change your class names to avoid naming collisions. Always check that your CSS is what you expect it to be."]}]]}],"\n",["$","h2",null,{"children":"Plugins"}],"\n",["$","p",null,{"children":"Anything that is not considered core functionality or old browser compatibility is exposed via a plugin. This is done because all unused plugins are treeshaken and won't end up in your final bundle. OverlayScrollbars ships with the following plugins:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":[["$","strong",null,{"children":"ScrollbarsHidingPlugin"}],": Needed for old browsers that don't support native scrollbar styling. ",["$","a",null,{"href":"https://caniuse.com/?search=scrollbar%20styling","children":"You can find the list of browsers where you need this plugin here","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," (note that even though ",["$","code",null,{"children":"iOS Safari >= 14"}]," is marked as unsupported, you only need this plugin for ",["$","code",null,{"children":"iOS < 7.1"}],")."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"SizeObserverPlugin"}],": Needed for old browsers that don't support the ",["$","code",null,{"children":"ResizeObserver"}]," api. ",["$","a",null,{"href":"https://caniuse.com/?search=ResizeObserver","children":"You can find the list of browsers that need this plugin here","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"ClickScrollPlugin"}],": If you want to use the option ",["$","code",null,{"children":"scrollbars: { clickScroll: true }"}],"."]}],"\n"]}],"\n",["$","h3",null,{"children":"Consuming Plugins"}],"\n",["$","p",null,{"children":"Plugins are consumed like:"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"import"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"} "}],["$","span",null,{"style":{"color":"#859900"},"children":"from"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" 'overlayscrollbars'"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// single plugin"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// multiple plugins"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(["}],["$","span",null,{"style":{"color":"#268BD2"},"children":"SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]);"}]]}]]}]}]}],"\n",["$","h3",null,{"children":"Plugins in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","p",null,{"children":["Plugins are plain objects with a ",["$","strong",null,{"children":"single field"}],", the name of the field is the name of the plugin. This name is the plugins identifier and ",["$","em",null,{"children":"must"}]," be unique across all plugin. In case multiple plugins have the same name, the last added plugin overwrites previously added plugins."]}],["$","h3",null,{"children":"Plugin Modules"}],["$","p",null,{"children":["A Plugin module is the constructor of a plugin modules instance. There are two kinds of plugin modules: ",["$","code",null,{"children":"static"}]," and ",["$","code",null,{"children":"instance"}],". A single plugin must have one or more modules. Plugin modules can return an instance, but doesnt have to."]}],["$","h4",null,{"children":"Static Plugin Module"}],["$","p",null,{"children":["The ",["$","code",null,{"children":"static"}]," plugin module is invoked when the plugin is added with the ",["$","code",null,{"children":"OverlayScrollbars.plugin"}]," function."]}],["$","p",null,{"children":["Example plugin with a ",["$","code",null,{"children":"static"}]," module:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticPlugin"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // plugin has the name `examplePlugin`"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" examplePlugin: {"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // static function describes a static module and returns the module instance or void / undefined if no instance is needed"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `osStatic` parameter is the global `OverlayScrollbars` object"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" static"}],["$","span",null,{"style":{"color":"#657B83"},"children":": (osStatic) "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" let"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#D33682"},"children":" 0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getCount"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#859900"},"children":"++"}],["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" return"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["When the plugin is added with the ",["$","code",null,{"children":"OverlayScrollbars.plugin"}]," function, all OverlayScrollbar instances will automatically add the plugin from that point on. Previously created instances will not have the plugin. The instance module instance is returned with the ",["$","code",null,{"children":"osInstance.plugin"}]," function:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"staticPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// plugins static module is invoked"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"staticModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 0"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"staticModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"staticModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 1"}]]}]]}]}]}],["$","h4",null,{"children":"Instance Plugin Module"}],["$","p",null,{"children":["The ",["$","code",null,{"children":"instance"}]," plugin module is invoked when a new ",["$","code",null,{"children":"OverlayScrollbars"}]," instance is created but before the ",["$","code",null,{"children":"initialized"}]," event is dispatched."]}],["$","p",null,{"children":["Example plugin with a ",["$","code",null,{"children":"instance"}]," module:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePlugin"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // plugin has the name `examplePlugin`"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" examplePlugin: {"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // instance function describes a instance module and returns the module instance or void / undefined if no instance is needed"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `osInstance` parameter is the OverlayScrollbar instance the plugin is bound to"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `event` parameter is a function which adds events to the instance which can't be removed from outside the plugin"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `osStatic` parameter is the gobal OverlayScrollbar object"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" instance"}],["$","span",null,{"style":{"color":"#657B83"},"children":": (osInstance, event, osStatic) "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" let"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#D33682"},"children":" 0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getCount"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#859900"},"children":"++"}],["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // event which fires when the instance was initialized"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" event"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'initialized'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" console"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"log"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"instance initialized\""}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // event which fires when the viewport was scrolled"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" removeScrollEvent"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" event"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'scroll'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" console"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"log"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"viewport scrolled\""}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" removeScrollEvent"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// removes the event after the first scroll"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" return"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["When the plugin is added with the ",["$","code",null,{"children":"OverlayScrollbars.plugin"}]," function all OverlayScrollbar instances will add the plugin automatically from that point on. Already created instances will not have the plugin. The instance modules instance is returned with the ",["$","code",null,{"children":"osInstance.plugin"}]," function:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// plugin is added"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#657B83"},"children":", {}); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// plugins instance module is invoked"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePluginInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePluginInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 0"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePluginInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePluginInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 1"}]]}]]}]}]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbar plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the name of the plugin"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the module instance type of the static module"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" S"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the module instance type of the instance module"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" I"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" ["}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"pluginName"}],["$","span",null,{"style":{"color":"#859900"},"children":" in"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModule"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"S"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"I"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbar plugin which has only a static module."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" StaticPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Name"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#859900"},"children":"void"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbar plugin which has only a instance module."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InstancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Name"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#859900"},"children":"void"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Infers the type of the static modules instance of the passed plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferStaticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" StaticPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Infers the type of the instance modules instance of the passed plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferInstancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InstancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"FAQ"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":["How do I ",["$","code",null,{"children":"get / set"}]," the ",["$","code",null,{"children":"scroll position"}]," of an element I applied OverlayScrollbars to?"]}]}],["$","br",null,{}],["$","p",null,{"children":["If you applied ",["$","code",null,{"children":"OverlayScrollbars"}]," to the ",["$","code",null,{"children":"body"}]," element you can use ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX","children":["$","code",null,{"children":"window.scrollX"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY","children":["$","code",null,{"children":"window.scrollY"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll","children":["$","code",null,{"children":"window.scroll"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo","children":["$","code",null,{"children":"window.scrollTo"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy","children":["$","code",null,{"children":"window.scrollBy"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or any other native api."]}],["$","p",null,{"children":["If the plugin was applied to any other element you have to get the ",["$","code",null,{"children":"viewport"}]," element with the ",["$","code",null,{"children":"instance.elements()"}]," function first. With this element you can use ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop","children":["$","code",null,{"children":"element.scrollTop"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft","children":["$","code",null,{"children":"element.scrollLeft"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll","children":["$","code",null,{"children":"element.scroll"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo","children":["$","code",null,{"children":"element.scrollTo"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy","children":["$","code",null,{"children":"element.scrollBy"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or any other native api."]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"viewport"}],["$","span",null,{"style":{"color":"#657B83"},"children":" } "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"scrollLeft"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"scrollTop"}],["$","span",null,{"style":{"color":"#657B83"},"children":" } "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" viewport"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// get scroll offset"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"viewport"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"scrollTo"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ top: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":" }); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// set scroll offset"}]]}]]}]}]}]]}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":["Is it possible to ",["$","code",null,{"children":"limit / adjust the scrollbar handle length"}],"?"]}]}],["$","br",null,{}],["$","p",null,{"children":["You can adjust a scrollbars handle length by setting a ",["$","code",null,{"children":"min-width / min-height"}]," and ",["$","code",null,{"children":"max-width / max-height"}]," style:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"css","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"/* horizontal boundaries */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-scrollbar-horizontal"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" .os-scrollbar-handle"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" min-width"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"50"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" max-width"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"200"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"/* vertical boundaries */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-scrollbar-vertical"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" .os-scrollbar-handle"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" min-height"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"40"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" max-height"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"40"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["You can assign the same value to both properties to force the scrollbar to be always the same size.",["$","br",null,{}],"\n","Setting the ",["$","code",null,{"children":"width"}]," and ",["$","code",null,{"children":"height"}]," properties won't work since those are set by the plugin automatically."]}]]}],"\n",["$","h2",null,{"children":["Feature comparison to ",["$","code",null,{"children":"v1"}]]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["The ",["$","code",null,{"children":"scroll"}]," function is missing. Planned as a ",["$","code",null,{"children":"plugin"}],". (WIP)"]}],"\n",["$","li",null,{"children":["Initialization to the ",["$","code",null,{"children":"textarea"}]," element isn't supported yet. Planned as a ",["$","code",null,{"children":"plugin"}],". (WIP)"]}],"\n"]}],"\n",["$","h2",null,{"children":"Future Plans"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Provide plugin based support for missing features. (treeshakeable)"}],"\n",["$","li",null,{"children":"Frequent updates in terms of bug-fixes and enhancements. (always use latest browser features)"}],"\n",["$","li",null,{"children":"Improve tests. (unit & browser tests)"}],"\n"]}],"\n",["$","h2",null,{"children":"License"}],"\n",["$","p",null,{"children":"MIT"}]]}]]}],null]]},[null,["$","$L4",null,{"children":["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/OverlayScrollbars/_next/static/css/cc954f78e3da9e86.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] +0:["mUfOAMbGlm_Yaqym1qF6r",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},["$L1",["$","div",null,{"className":"sm:container default:px-6","children":[["$","div",null,{"className":"mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44","children":["$","div",null,{"className":"h-full relative before:content-[\"\"] before:bg-[url(/OverlayScrollbars/img/logo.svg)] before:absolute before:left-0 before:w-full before:h-full before:bg-contain before:bg-center before:bg-no-repeat before:-z-10 before:[transform:translateZ(0)] before:[filter:blur(33px)_saturate(1.22)] before:opacity-50 before:top-2.5 after:content-[\"\"] after:bg-[url(/OverlayScrollbars/img/logo.svg)] after:absolute after:left-0 after:w-full after:h-full after:bg-contain after:bg-center after:bg-no-repeat after:-z-10 after:[transform:translateZ(0)] after:[filter:drop-shadow(0_6px_22px_#5242e3)_saturate(1.5)] after:opacity-10 after:top-0","children":["$","img",null,{"src":"/OverlayScrollbars/img/logo.svg","className":"h-full","alt":"OverlayScrollbars Logo","width":"200","height":"200"}]}]}],["$","h1",null,{"className":"text-center xxs:text-4xl text-2xl font-bold my-11","children":["Overlay",["$","wbr",null,{}],"Scrollbars"]}],["$","p",null,{"className":"text-center mx-auto max-w-screen-sm my-11 font-medium","children":"A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel."}],["$","div",null,{"className":"my-6 text-center font-semiBold text-sm uppercase relative","children":["$","span",null,{"className":"p-3 bg-slate-50","children":[["$","span",null,{"children":"used by"}],["$","span",null,{"className":"absolute block top-1/2 left-1/2 w-full xs:w-[80%] border-t-[1px] border-slate-300 -translate-x-1/2 -translate-y-1/2 -z-10"}]]}]}],["$","$L2",null,{"defer":true,"children":["$","div",null,{"className":"flex justify-center","children":["$","div",null,{"className":"inline-flex items-center gap-6 px-1 py-6 opacity-60 [filter:brightness(0.8)_sepia(1)_saturate(1.44)_hue-rotate(175deg)]","children":[["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group py-1","target":"_blank","href":"https://github.com/KingSora/OverlayScrollbars/issues/150#issuecomment-658658186","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/spotify-logo.svg","alt":"Spotify","style":{"filter":"brightness(0.35)"}}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group","target":"_blank","href":"https://github.com/JetBrains/intellij-community/blob/ee35416f381ed33f976d7b9322a5ee6156e7fa2f/platform/platform-api/src/com/intellij/ui/jcef/JBCefScrollbarsHelper.java#L41-L50","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/intellij-idea-logo.svg","alt":"IntelliJ IDEA"}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group py-1.5","target":"_blank","href":"https://github.com/storybookjs/storybook/blob/32d2fafa8d1d2e197e885349f2c01f5422bde5b4/code/ui/components/package.json#L66-L67","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/storybook-logo.svg","alt":"Storybook"}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group py-3","target":"_blank","href":"https://github.com/ColorlibHQ/AdminLTE/blob/3113ac5efed25971ccd0972f5eeff3c364f218dc/src/html/components/_scripts.astro#L6-L7","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/adminlte-logo.png","alt":"Admin LTE"}]}],["$","a",null,{"className":"h-11 flex-none rounded-sm px-3 group","target":"_blank","href":"https://scramble.cloud/#credits","children":["$","img",null,{"className":"h-full transition-all group-hover:scale-110 group-focus:scale-110","src":"/OverlayScrollbars/img/scramble-logo.svg","alt":"Scramble.cloud"}]}]]}]}]}],["$","div",null,{"className":"my-6 text-center font-semiBold text-sm uppercase relative","children":["$","span",null,{"className":"p-3 bg-slate-50","children":[["$","span",null,{"children":["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars","target":"_blank","className":"inline-block leading-[0] rounded-full","children":[["$","span",null,{"style":{"maskImage":"url(/OverlayScrollbars/icon/github.svg)","WebkitMaskImage":"url(/OverlayScrollbars/icon/github.svg)"},"className":"default:block default:flex-none default:bg-current mask-center mask-contain mask-no-repeat inline-block w-11 h-11 hover:scale-110 text-primary-dark hover:text-primary-blue1 active:text-primary-blue2 transition-transformColor ease-in-out duration-300"}],["$","span",null,{"className":"sr-only","children":"OverlayScrollbars on Github"}]]}]}],["$","span",null,{"className":"absolute block top-1/2 left-1/2 w-full xs:w-[80%] border-t-[1px] border-slate-300 -translate-x-1/2 -translate-y-1/2 -z-10"}]]}]}],["$","p",null,{"className":"text-center text-sm text-primary-gray2 mx-auto max-w-screen-sm my-11 font-medium","children":["Looking for the v1 docs? ",["$","$L3",null,{"href":"/v1","children":"Follow this link","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],"."]}],["$","div",null,{"className":"mx-auto flex sm:flex-row justify-center gap-2 items-center flex-wrap","children":[["$","a",null,{"href":"https://www.npmjs.com/package/overlayscrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/npm/dm/overlayscrollbars.svg?style=flat-square","alt":"Downloads"}]}],["$","a",null,{"href":"https://www.npmjs.com/package/overlayscrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/npm/v/overlayscrollbars.svg?style=flat-square","alt":"Version"}]}],["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/blob/master/LICENSE","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square","alt":"License"}]}],["$","a",null,{"href":"https://app.codecov.io/gh/KingSora/OverlayScrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/codecov/c/github/KingSora/OverlayScrollbars?style=flat-square","alt":"Code Coverage"}]}],["$","a",null,{"href":"https://bundlephobia.com/package/overlayscrollbars","className":"rounded-sm","children":["$","img",null,{"className":"min-h-[20px]","src":"https://img.shields.io/bundlephobia/minzip/overlayscrollbars?label=max.%20bundle%20size&style=flat-square","alt":"Max. Bundle Size"}]}]]}],["$","nav",null,{"className":"mx-auto my-6 text-lg flex sm:flex-row justify-center gap-2 items-center flex-wrap","children":[["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars","target":"_blank","children":"GitHub","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],["$","span",null,{"children":"  •  "}],["$","$L3",null,{"href":"/examples","target":"_blank","children":"Examples","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]]}],["$","main",null,{"className":"prose prose-primary mx-auto pb-12","children":[["$","h2",null,{"children":"Why?"}],"\n",["$","p",null,{"children":"I created this plugin because I hate ugly and space-consuming scrollbars. Similar plugins didn't meet my requirements in terms of features, quality, simplicity, license or browser support."}],"\n",["$","h2",null,{"children":"Goals & Features"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Simple, powerful and well-documented API"}],"\n",["$","li",null,{"children":["High browser compatibility - ",["$","strong",null,{"children":"Firefox 59+"}],", ",["$","strong",null,{"children":"Chrome 55+"}],", ",["$","strong",null,{"children":"Opera 42+"}],", ",["$","strong",null,{"children":"Edge 15+"}]," and ",["$","strong",null,{"children":"Safari 10+"}]]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Fully Accessible"}]," - Native scrolling behavior is fully preserved"]}],"\n",["$","li",null,{"children":["Can run on the server (",["$","code",null,{"children":"Node"}],", ",["$","code",null,{"children":"Deno"}]," and ",["$","code",null,{"children":"Bun"}],") - ",["$","strong",null,{"children":"SSR"}],", ",["$","strong",null,{"children":"SSG"}]," and ",["$","strong",null,{"children":"ISR"}]," support"]}],"\n",["$","li",null,{"children":["Tested on various devices - ",["$","strong",null,{"children":"Mobile"}],", ",["$","strong",null,{"children":"Desktop"}]," and ",["$","strong",null,{"children":"Tablet"}],"."]}],"\n",["$","li",null,{"children":["Tested with various (and mixed) inputs - ",["$","strong",null,{"children":"Mouse"}],", ",["$","strong",null,{"children":"Touch"}]," and ",["$","strong",null,{"children":"Pen"}],"."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"Treeshaking"}]," - bundle only what you really need"]}],"\n",["$","li",null,{"children":["Automatic update detection - ",["$","strong",null,{"children":"no polling required"}],"."]}],"\n",["$","li",null,{"children":"Leverage latest browser features - best performance in new browsers"}],"\n",["$","li",null,{"children":["Flow independent - supports all values for ",["$","code",null,{"children":"direction"}],", ",["$","code",null,{"children":"flex-direction"}]," and ",["$","code",null,{"children":"writing-mode"}],"."]}],"\n",["$","li",null,{"children":"Supports scroll snapping"}],"\n",["$","li",null,{"children":["Supports all ",["$","strong",null,{"children":"virtual scrolling"}]," libraries"]}],"\n",["$","li",null,{"children":"Supports the `body' element"}],"\n",["$","li",null,{"children":"Easy and effective scrollbar styling"}],"\n",["$","li",null,{"children":"Highly customizable"}],"\n",["$","li",null,{"children":"TypeScript support - completely written in TypeScript"}],"\n",["$","li",null,{"children":"Dependency-free - 100% self-written to ensure small size and best functionality"}],"\n",["$","li",null,{"children":["High quality and fully typed framework versions for ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react","children":["$","code",null,{"children":"react"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue","children":["$","code",null,{"children":"vue"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx","children":["$","code",null,{"children":"angular"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte","children":["$","code",null,{"children":"svelte"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," and ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid","children":["$","code",null,{"children":"solid"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],"."]}],"\n"]}],"\n",["$","h2",null,{"children":"Choose your framework"}],"\n",["$","p",null,{"children":"In addition to the vanilla JavaScript version, you can use the official framework components & utilities:"}],"\n",["$","div",null,{"className":"flex flex-wrap","children":[["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg","width":"80","height":"80","alt":"React"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg","width":"80","height":"80","alt":"Vue"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg","width":"80","height":"80","alt":"Angular"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg","width":"80","height":"80","alt":"Svelte"}]}],["$","a",null,{"className":"flex-grow-0 flex-shrink-0 rounded-sm transition-transform hover:scale-110","href":"https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid","children":["$","img",null,{"className":"h-[80px] mx-1 my-1","src":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg","width":"80","height":"80","alt":"Solid"}]}]]}],"\n",["$","h2",null,{"children":"Getting started"}],"\n",["$","h3",null,{"children":"npm & nodejs"}],"\n",["$","p",null,{"children":["OverlayScrollbars can be downloaded from ",["$","a",null,{"href":"https://www.npmjs.com/package/overlayscrollbars","children":"npm","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or the package manager of your choice:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"sh","data-theme":"solarized-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"npm"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" install"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" overlayscrollbars"}]]}]}]}]}],"\n",["$","p",null,{"children":"Once installed, it can be imported:"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"import"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" 'overlayscrollbars/overlayscrollbars.css'"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"import"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"} "}],["$","span",null,{"style":{"color":"#859900"},"children":"from"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" 'overlayscrollbars'"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}]]}]}]}],"\n",["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": If the path ",["$","code",null,{"children":"'overlayscrollbars/overlayscrollbars.css'"}]," is not working use ",["$","code",null,{"children":"'overlayscrollbars/styles/overlayscrollbars.css'"}]," as the import path for the CSS file."]}],"\n"]}],"\n",["$","p",null,{"children":["You can use this ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/examples/node","children":"Node Example","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," as an reference / starting point."]}],"\n",["$","h3",null,{"children":"Manual Download & Embedding"}],"\n",["$","p",null,{"children":["You can use OverlayScrollbars without any bundler or package manager.",["$","br",null,{}],"\n","Simply download it from the ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/releases","children":"Releases","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or use a ",["$","a",null,{"href":"https://cdnjs.com/libraries/overlayscrollbars","children":"CDN","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],"."]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["Use the javascript files with the ",["$","code",null,{"children":".browser"}]," extension."]}],"\n",["$","li",null,{"children":["Use the javascript files with the ",["$","code",null,{"children":".es5"}]," extension if you need to support older browsers, otherwise use the ",["$","code",null,{"children":".es6"}]," files."]}],"\n",["$","li",null,{"children":["For production use the javascript / stylesheet files with the ",["$","code",null,{"children":".min"}]," extension."]}],"\n"]}],"\n",["$","p",null,{"children":"Embed OverlayScrollbars manually in your HTML:"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"html","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"link"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" type"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"text/css\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" href"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"path/to/overlayscrollbars.css\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" rel"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"stylesheet\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"script"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" type"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"text/javascript\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" src"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"path/to/overlayscrollbars.browser.es.js\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" defer>"}]]}]]}]}]}],"\n",["$","p",null,{"children":["Use the global variable ",["$","code",null,{"children":"OverlayScrollbarsGlobal"}]," to access the api similar to how you can do it in nodejs / modules:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"var"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"} "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbarsGlobal"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}]]}]}]}],"\n",["$","p",null,{"children":["You can use this ",["$","a",null,{"href":"https://github.com/KingSora/OverlayScrollbars/tree/master/examples/browser","children":"Browser Example","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," as an reference / starting point."]}],"\n",["$","p",null,{"children":["The examples in this documentation will use the ",["$","code",null,{"children":"import"}]," syntax instead of the ",["$","code",null,{"children":"OverlayScrollbarsGlobal"}]," object. However, both versions are equivalent."]}],"\n",["$","h2",null,{"children":"Initialization"}],"\n",["$","p",null,{"children":["The initialization of ",["$","code",null,{"children":"OverlayScrollbars"}]," is explicit ",["$","em",null,{"children":"per element"}],". Only the scrollbars of the element on which the plugin is initialized will be changed. Scrollbars of child elements will remain unchanged unless the plugin is initialized on them as well."]}],"\n",["$","p",null,{"children":["You can initialize either directly with an ",["$","code",null,{"children":"Element"}]," or with an ",["$","code",null,{"children":"Object"}]," where you have more control over the initialization process."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// simple initialization with an element"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {});"}]]}]]}]}]}],"\n",["$","h3",null,{"children":"Bridging initialization flickering"}],"\n",["$","p",null,{"children":"When you initialize OverlayScrollbars, it takes a few milliseconds to create and append all the elements to the DOM. During this time, the native scrollbars are still visible and will be switched out after the initialization is finished. This is seen as flickering."}],"\n",["$","p",null,{"children":["To fix this behavior apply the ",["$","code",null,{"children":"data-overlayscrollbars-initialize"}]," attribute to the target element (and the ",["$","code",null,{"children":"html"}]," element if the target element is ",["$","code",null,{"children":"body"}],")."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"html","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":""}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"html"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" data-overlayscrollbars-initialize>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"head"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" data-overlayscrollbars-initialize>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":""}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" data-overlayscrollbars-initialize>"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" OverlayScrollbars is applied to this div"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}]]}]]}]}]}],"\n",["$","h3",null,{"children":"Initialization with an Object"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","p",null,{"children":["The only required field is the ",["$","code",null,{"children":"target"}]," field. This is the field to which the plugin will be applied.",["$","br",null,{}],"\n","If you use the object initialization with only the ",["$","code",null,{"children":"target"}]," field, the result is equivalent to the element initialization:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Both initializations have the same outcome"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {});"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":") }, {});"}]]}]]}]}]}],["$","p",null,{"children":"In the initialization object you can specify how the library handles generated elements.\r\nFor example, you can specify an existing element as the `viewport' element. Then the library won't generate it, but use the specified element instead:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" elements: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" viewport: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#viewport'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}, {});"}]}]]}]}]}],["$","p",null,{"children":"This is very useful if you have a fixed DOM structure and don't want OverlayScrollbars to create its own elements. These cases are very common when you want another library to work with OverlayScrollbars."}],["$","hr",null,{}],["$","p",null,{"children":"You can also decide to which element the scrollbars should be applied to:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" slot: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":")."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"parentElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}, {});"}]}]]}]}]}],["$","hr",null,{}],["$","p",null,{"children":"Last but not least, you can decide when to cancel the initialization:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target: "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#target'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" cancel: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" nativeScrollbarsOverlaid: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"true"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" body: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"null"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}, {});"}]}]]}]}]}],["$","p",null,{"children":["In the above example, the initialization will be aborted if the native scrollbars are overlaid, or if your target is a ",["$","code",null,{"children":"body"}]," element and the plugin has determined that initializing to the ",["$","code",null,{"children":"body"}]," element would interfere with native functionality such as ",["$","code",null,{"children":"window.scrollTo"}],"."]}]]}],"\n",["$","h2",null,{"children":"Options"}],"\n",["$","p",null,{"children":["You can initialize OverlayScrollbars with an initial set of options, which can be changed at any time with the ",["$","code",null,{"children":"options"}]," method:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" overflow: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" x: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'hidden'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"});"}]}]]}]}]}],"\n",["$","h3",null,{"children":"Options in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","p",null,{"children":"The default options are:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" defaultOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" paddingAbsolute: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" showNativeOverlaidScrollbars: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" update: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" elementEvents: [["}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'img'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'load'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]],"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" debounce: ["}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#D33682"},"children":"33"}],["$","span",null,{"style":{"color":"#657B83"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" attributes: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"null"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" ignoreMutation: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"null"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" overflow: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" x: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'scroll'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" y: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'scroll'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" theme: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'os-theme-dark'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" visibility: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'auto'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHide: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'never'"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideDelay: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"1300"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideSuspend: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" dragScroll: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"true"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" clickScroll: "}],["$","span",null,{"style":{"color":"#B58900"},"children":"false"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" pointers: ["}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'mouse'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'touch'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'pen'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"],"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}]]}]}]}],["$","h3",null,{"children":["$","code",null,{"children":"paddingAbsolute"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","p",null,{"children":"Indicates whether the padding for the content shall be absolute."}],["$","h3",null,{"children":["$","code",null,{"children":"showNativeOverlaidScrollbars"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","p",null,{"children":"Indicates whether the native overlaid scrollbars shall be visible."}],["$","h3",null,{"children":["$","code",null,{"children":"update.elementEvents"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Array<[string, string]> | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"[['img', 'load']]"}]}]]}]}]]}],["$","p",null,{"children":["An array of tuples. The first value in the tuple is an ",["$","code",null,{"children":"selector"}]," and the second value are ",["$","code",null,{"children":"event names"}],". The plugin will update itself if any of the elements with the specified selector will emit any specified event. The default value can be interpreted as \"The plugin will update itself if any ",["$","code",null,{"children":"img"}]," element emits an ",["$","code",null,{"children":"load"}]," event.\""]}],["$","h3",null,{"children":["$","code",null,{"children":"update.debounce"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"[number, number] | number | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"[0, 33]"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": If 0 is used for the timeout, ",["$","code",null,{"children":"requestAnimationFrame"}]," instead of ",["$","code",null,{"children":"setTimeout"}]," is used for the debounce."]}],"\n"]}],["$","p",null,{"children":["Debounces the ",["$","code",null,{"children":"MutationObserver"}]," which tracks changes to the content. If a ",["$","strong",null,{"children":"tuple"}]," is passed, the first value is the timeout and second is the max wait. If only a ",["$","strong",null,{"children":"number"}]," is passed you specify only the timeout and there is no max wait. With ",["$","strong",null,{"children":"null"}]," there is no debounce. ",["$","strong",null,{"children":"Usefull to fine-tune performance."}]]}],["$","h3",null,{"children":["$","code",null,{"children":"update.attributes"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string[] | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"null"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": There is a base array of attributes that the ",["$","code",null,{"children":"MutationObserver"}]," always observes, even if this option is ",["$","code",null,{"children":"null"}],"."]}],"\n"]}],["$","p",null,{"children":["An array of additional attributes that the ",["$","code",null,{"children":"MutationObserver"}]," should observe for the content."]}],["$","h3",null,{"children":["$","code",null,{"children":"update.ignoreMutation"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"((mutation) => any) | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"null"}]}]]}]}]]}],["$","p",null,{"children":["A function which receives a ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord","children":["$","code",null,{"children":"MutationRecord"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," as an argument. If the function returns a truthy value the mutation will be ignored and the plugin won't update. ",["$","strong",null,{"children":"Usefull to fine-tune performance."}]]}],["$","h3",null,{"children":["$","code",null,{"children":"overflow.x"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'scroll'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'hidden'"}],", ",["$","code",null,{"children":"'scroll'"}],", ",["$","code",null,{"children":"'visible'"}],", ",["$","code",null,{"children":"'visible-hidden'"}]," and ",["$","code",null,{"children":"'visible-scroll'"}],"."]}],"\n"]}],["$","p",null,{"children":"The overflow behavior for the horizontal (x) axis."}],["$","h3",null,{"children":["$","code",null,{"children":"overflow.y"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'scroll'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'hidden'"}],", ",["$","code",null,{"children":"'scroll'"}],", ",["$","code",null,{"children":"'visible'"}],", ",["$","code",null,{"children":"'visible-hidden'"}]," and ",["$","code",null,{"children":"'visible-scroll'"}],"."]}],"\n"]}],["$","p",null,{"children":"The overflow behavior for the vertical (y) axis."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.theme"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'os-theme-dark'"}]}]]}]}]]}],["$","p",null,{"children":"Applies the specified theme (classname) to the scrollbars."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.visibility"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'auto'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'visible'"}],", ",["$","code",null,{"children":"'hidden'"}],", and ",["$","code",null,{"children":"'auto'"}],"."]}],"\n"]}],["$","p",null,{"children":["The visibility of a scrollbar if its scroll axis is able to have a scrollable overflow. (Scrollable overflow for an axis is only possible with the overflow behavior ",["$","code",null,{"children":"'scroll'"}]," or ",["$","code",null,{"children":"'visible-scroll'"}],")."]}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.autoHide"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"'never'"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Valid values are: ",["$","code",null,{"children":"'never'"}],", ",["$","code",null,{"children":"'scroll'"}],", ",["$","code",null,{"children":"'leave'"}]," and ",["$","code",null,{"children":"'move'"}],"."]}],"\n"]}],["$","p",null,{"children":"The possibility to hide visible scrollbars automatically after a certain user action."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.autoHideDelay"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"number"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"1300"}]}]]}]}]]}],["$","p",null,{"children":"The delay in milliseconds before the scrollbars are hidden automatically."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.autoHideSuspend"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","p",null,{"children":["Suspend the autoHide functionality until the first scroll interaction was performed.",["$","br",null,{}],"\n","The default value for this option is ",["$","code",null,{"children":"false"}]," for backwards compatibility reasons but is recommended to be ",["$","code",null,{"children":"true"}]," for better accessibility."]}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.dragScroll"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"true"}]}]]}]}]]}],["$","p",null,{"children":"Indicates whether you can drag the scrollbar handles for scrolling."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.clickScroll"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"false"}]}]]}]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": This options requires the ",["$","strong",null,{"children":"ClickScrollPlugin"}]," to work."]}],"\n"]}],["$","p",null,{"children":"Indicates whether you can click on the scrollbar track for scrolling."}],["$","h3",null,{"children":["$","code",null,{"children":"scrollbars.pointers"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"default"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string[] | null"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"['mouse', 'touch', 'pen']"}]}]]}]}]]}],["$","p",null,{"children":["The ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType","children":["$","code",null,{"children":"PointerTypes"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," the plugin should react to."]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// The options of a OverlayScrollbars instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the padding shall be absolute."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" paddingAbsolute"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether to show the native scrollbars. Has only an effect it the native scrollbars are overlaid."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" showNativeOverlaidScrollbars"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Customizes the automatic update behavior."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" update"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The given Event(s) from the elements with the given selector(s) will trigger an update."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Useful for everything the MutationObserver and ResizeObserver can't detect"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * e.g.: and Images `load` event or the `transitionend` / `animationend` events."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" elementEvents"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Array"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<[elementSelector: "}],["$","span",null,{"style":{"color":"#859900"},"children":"string"}],["$","span",null,{"style":{"color":"#657B83"},"children":", eventNames: "}],["$","span",null,{"style":{"color":"#859900"},"children":"string"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]> "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The debounce which is used to detect content changes."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If a tuple is provided you can customize the `timeout` and the `maxWait` in milliseconds."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If a single number customizes only the `timeout`."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" *"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If the `timeout` is `0`, a debounce still exists. (its executed via `requestAnimationFrame`)."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" debounce"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [timeout: "}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":", maxWait: "}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":"] "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" number"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * HTML attributes which will trigger an update if they're changed."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Basic attributes like `id`, `class`, `style` etc. are always observed and doesn't have to be added explicitly."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" attributes"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":"[] "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // A function which makes it possible to ignore a content mutation or null if nothing shall be ignored."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" ignoreMutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" ((mutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" MutationRecord"}],["$","span",null,{"style":{"color":"#657B83"},"children":") "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" any"}],["$","span",null,{"style":{"color":"#657B83"},"children":") "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Customizes the overflow behavior per axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflow"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The overflow behavior of the horizontal (x) axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" x"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverflowBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The overflow behavior of the vertical (y) axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" y"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverflowBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Customizes appearance of the scrollbars."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars theme. The theme value will be added as `class` to all `scrollbar` elements of the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" theme"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars visibility behavior."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" visibility"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" ScrollbarsVisibilityBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars auto hide behavior."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHide"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" ScrollbarsAutoHideBehavior"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scrollbars auto hide delay in milliseconds."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideDelay"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" number"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the scrollbars auto hide behavior is suspended until a scroll happened."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" autoHideSuspend"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether its possible to drag the handle of a scrollbar to scroll the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" dragScroll"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether its possible to click the track of a scrollbar to scroll the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" clickScroll"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // An array of pointer types which shall be supported."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" pointers"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":"[] "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" null"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Events"}],"\n",["$","p",null,{"children":["You can initialize OverlayScrollbars with an initial set of events, which can be managed at any time with the ",["$","code",null,{"children":"on"}]," and ",["$","code",null,{"children":"off"}]," methods:"]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"querySelector"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'#myElement'"}],["$","span",null,{"style":{"color":"#657B83"},"children":"), {}, {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" updated"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(osInstance, onUpdatedArgs) {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // ..."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"});"}]}]]}]}]}],"\n",["$","h3",null,{"children":"Events in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": Every event receives the ",["$","code",null,{"children":"instance"}]," from which it was dispatched as the first argument. Always."]}],"\n"]}],["$","h3",null,{"children":["$","code",null,{"children":"initialized"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}]}]]}],["$","p",null,{"children":"Is dispatched after all generated elements, observers and events were appended to the DOM."}],["$","h3",null,{"children":["$","code",null,{"children":"updated"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"onUpdatedArgs"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An ",["$","code",null,{"children":"object"}]," which describes the update in detail."]}]]}]]}]]}],["$","blockquote",null,{"children":["\n",["$","p",null,{"children":[["$","strong",null,{"children":"Note"}],": If an update was triggered but nothing changed, the event won't be dispatched."]}],"\n"]}],["$","p",null,{"children":"Is dispatched after the instace was updated."}],["$","h3",null,{"children":["$","code",null,{"children":"destroyed"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"canceled"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An ",["$","code",null,{"children":"boolean"}]," which indicates whether the initialization was canceled and thus destroyed."]}]]}]]}]]}],["$","p",null,{"children":"Is dispatched after all generated elements, observers and events were removed from the DOM."}],["$","h3",null,{"children":["$","code",null,{"children":"scroll"}]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"arguments"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"instance"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The instance which dispatched the event."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"event"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["The original ",["$","code",null,{"children":"event"}]," argument of the DOM event."]}]]}]]}]]}],["$","p",null,{"children":"Is dispatched by scrolling the viewport."}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// A mapping between event names and their listener arguments."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched after all elements are initialized and appended."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" initialized"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched after an update."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" updated"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", onUpdatedArgs: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OnUpdatedEventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched after all elements, observers and events are destroyed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" destroyed"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", canceled: "}],["$","span",null,{"style":{"color":"#859900"},"children":"boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Dispatched on scroll."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scroll"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" [instance: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", event: "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Event"}],["$","span",null,{"style":{"color":"#657B83"},"children":"];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OnUpdatedEventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Hints which describe what changed in the DOM."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" updateHints"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the size of the host element changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" sizeChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the direction of the host element changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" directionChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the intrinsic height behavior changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" heightIntrinsicChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the overflow edge (clientWidth / clientHeight) of the viewport element changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowEdgeChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the overflow amount changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowAmountChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the overflow style changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowStyleChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the scroll coordinates changed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollCoordinatesChanged"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether an host mutation took place."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" hostMutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether an content mutation took place."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" contentMutation"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The changed options."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" changedOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the update happened with an force invalidated cache."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" force"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Instance"}],"\n",["$","p",null,{"children":["The OverlayScrollbars instance is created by calling the ",["$","code",null,{"children":"OverlayScrollbars"}]," function with an element and options object."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#657B83"},"children":", {});"}]]}]}]}]}],"\n",["$","h3",null,{"children":"Instance Methods"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","h3",null,{"children":["$","code",null,{"children":"options(): Options"}]}],["$","p",null,{"children":"Get the current options of the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Options"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The current options."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"options(newOptions, pure?): Options"}]}],["$","p",null,{"children":"Sets the current options of the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"newOptions"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"PartialOptions"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The new (partial) options which should be applied."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"pure"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether the options should be reset before the new options are added."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Options"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The complete new options."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"on(eventListeners, pure?): Function"}]}],["$","p",null,{"children":"Adds event listeners to the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"eventListeners"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"EventListeners"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which contains the added listeners. The fields are the event names and the values the listeners."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"pure"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether all already added event listeners should be removed before the new listeners are added."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"A function which removes all added event listeners."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"on(name, listener): Function"}]}],["$","p",null,{"children":"Adds a single event listener to the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listener"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The function which is invoked when the event is dispatched."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"A function which removes the added event listener."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"on(name, listeners): Function"}]}],["$","p",null,{"children":"Adds multiple event listeners to the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listeners"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The functions which are invoked when the event is dispatched."}]]}]]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"A function which removes the added event listeners."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"off(name, listener): void"}]}],["$","p",null,{"children":"Removes a single event listener from the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listener"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The function to be removed."}]]}]]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"off(name, listeners): void"}]}],["$","p",null,{"children":"Removes multiple event listeners from the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"name"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The event name."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"listeners"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The functions to be removed."}]]}]]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"update(force?): boolean"}]}],["$","p",null,{"children":"Updates the instance."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"force"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether the update should force the cache to be invalidated."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Function"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["A boolean which indicates whether the ",["$","code",null,{"children":"update"}]," event was triggered through this update."]}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"state(): State"}]}],["$","p",null,{"children":"Gets the instances state."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"State"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which describes the state of the instance."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"elements(): Elements"}]}],["$","p",null,{"children":"Gets the instances elments."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Elements"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which describes the elements of the instance."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"destroy(): void"}]}],["$","p",null,{"children":"Destroys the instance and removes all added elements."}],["$","h3",null,{"children":["$","code",null,{"children":"plugin(plugin: object): object | undefined"}]}],["$","p",null,{"children":"Gets the instance modules instance of the passed plugin."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An object which describes the plugins instance modules instance or ",["$","code",null,{"children":"undefined"}]," if no instance was found."]}]]}]}]]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// A simplified version of the OverlayScrollbars TypeScript interface."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Get the current options of the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" options"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Sets the current options of the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" options"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":", pure"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds event listeners to the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" on"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(eventListeners"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListeners"}],["$","span",null,{"style":{"color":"#657B83"},"children":", pure"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds a single event listener to the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" on"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">)"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds multiple event listeners to the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" on"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">[])"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Removes a single event listener from the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" off"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">)"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Removes multiple event listeners from the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" off"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" keyof"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListenerArgs"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(name"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" N"}],["$","span",null,{"style":{"color":"#657B83"},"children":", listener"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListener"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"N"}],["$","span",null,{"style":{"color":"#657B83"},"children":">[])"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Updates the instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" update"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(force"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instances state."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" state"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" State"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instances elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Destroys the instance and removes all added elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" destroy"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instance modules instance of the passed plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"P"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InstancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">(osPlugin"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" P"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferInstancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"P"}],["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"|"}],["$","span",null,{"style":{"color":"#859900"},"children":" undefined"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbars instances state."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" State"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Describes the current padding in pixel."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" padding"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" TRBL"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the current padding is absolute."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" paddingAbsolute"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The client width (x) & height (y) of the viewport in pixel."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowEdge"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The overflow amount in pixel."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowAmount"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The css overflow style of the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" overflowStyle"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"OverflowStyle"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the viewport has an overflow."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" hasOverflow"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The scroll coordinates of the viewport."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollCoordinates"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The start (origin) scroll coordinates for each axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" start"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The end scroll coordinates for each axis."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" end"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the direction is considered rtl."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" directionRTL"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the instance is considered destroyed."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" destroyed"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes the elements of a OverlayScrollbars instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The element the instance was applied to."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" target"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The host element. Its the root of all other elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" host"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element which is responsible to apply correct paddings."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the Initialization it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" padding"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The element which is responsible to do any scrolling."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" viewport"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element which is responsible to hold the content."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the Initialization it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" content"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element through which you can get the current `scrollLeft` or `scrollTop` offset."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the target element it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollOffsetElement"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * The element through which you can add `scroll` events."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Depending on the target element it can be the same as the viewport element."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollEventElement"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" HTMLElement"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Document"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The horizontal scrollbar elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarHorizontal"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" CloneableScrollbarElements"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The vertical scrollbar elements."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarVertical"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" CloneableScrollbarElements"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Static Object"}],"\n",["$","p",null,{"children":["The static ",["$","code",null,{"children":"OverlayScrollbars"}]," object."]}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"SomePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}]}]}]}],"\n",["$","h3",null,{"children":"Static Object Methods"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","h3",null,{"children":["$","code",null,{"children":"valid(osInstance): boolean"}]}],["$","p",null,{"children":"Checks whether the passed value is a valid and not destroyed overlayscrollbars instance"}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"osInstance"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"any"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The value to be checked."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"boolean"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"Whether the passed value is a valid and not destroyed overlayscrollbars instance."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"env(): Environment"}]}],["$","p",null,{"children":"Gets the environment."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"Environment"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"An object which described the environment."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"nonce(newNonce): void"}]}],["$","p",null,{"children":"Sets the nonce attribute for inline styles."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"newNonce"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"string / undefined"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The nonce attribute for inline styles."}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"plugin(plugin): object | undefined"}]}],["$","p",null,{"children":"Adds a single plugin."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"plugin"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The plugin to be added."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object / void"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An object which describes the plugins static modules instance or ",["$","code",null,{"children":"void"}]," if no instance was found."]}]]}]}]]}],["$","h3",null,{"children":["$","code",null,{"children":"plugin(plugins): (object | void)[]"}]}],["$","p",null,{"children":"Adds multiple plugins."}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"parameter"}],["$","th",null,{"style":{"textAlign":"left"},"children":"type"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":"plugins"}],["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"object[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The plugins to be added."}]]}]}]]}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"returns"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":"(object / void)[]"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["An array which describes the plugins static modules instances or ",["$","code",null,{"children":"undefined"}]," if no instance was found."]}]]}]}]]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// The OverlayScrollbars static object."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbarsStatic"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the instance of the passed target or `undefined` the target has no instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" (target"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InitializationTarget"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" undefined"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Initializes OverlayScrollbars to the passed target with passed options and event listeners."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" (target"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InitializationTarget"}],["$","span",null,{"style":{"color":"#657B83"},"children":", options"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":", eventListeners"}],["$","span",null,{"style":{"color":"#859900"},"children":"?:"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" EventListeners"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Checks whether the passed value is a valid and not destroyed overlayscrollbars instance."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" valid"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" any"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#657B83"},"children":" osInstance "}],["$","span",null,{"style":{"color":"#859900"},"children":"is"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Gets the environment."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" env"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Environment"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Sets the nonce attribute for inline styles."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" nonce"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newNonce"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" undefined"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds a single plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(plugin"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferStaticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Adds multiple plugins."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(plugins"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"[])"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferStaticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">[];"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes the OverlayScrollbars environment."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"interface"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Environment"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The native scrollbars size of the browser / system."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarsSize"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"number"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the native scrollbars are overlaid."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarsOverlaid"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" XY"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#859900"},"children":"boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the browser supports native scrollbars hiding."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbarsHiding"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Whether the browser supports the ScrollTimeline API."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" scrollTimeline"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#859900"},"children":" boolean"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The default Initialization to use if nothing else is specified."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" staticDefaultInitialization"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Initialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The default Options to use if nothing else is specified."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" staticDefaultOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Returns the current default Initialization."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getDefaultInitialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Initialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Returns the current default Options."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getDefaultOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":"()"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Sets a new default Initialization."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If the new default Initialization is partially filled, its deeply merged with the current default Initialization."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@param"}],["$","span",null,{"style":{"color":"#268BD2","fontStyle":"italic"},"children":" newDefaultInitialization"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The new default Initialization."}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@returns"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The current default Initialization."}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" setDefaultInitialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newDefaultInitialization"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialInitialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Initialization"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" /**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * Sets new default Options."}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * If the new default Options are partially filled, they're deeply merged with the current default Options."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@param"}],["$","span",null,{"style":{"color":"#268BD2","fontStyle":"italic"},"children":" newDefaultOptions"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The new default Options."}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"@returns"}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" The current default options."}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" setDefaultOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(newDefaultOptions"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PartialOptions"}],["$","span",null,{"style":{"color":"#657B83"},"children":")"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Options"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"Styling"}],"\n",["$","p",null,{"children":["OverlayScrollbars comes with two themes called ",["$","code",null,{"children":"os-theme-dark"}]," and ",["$","code",null,{"children":"os-theme-light"}],". You can use the ",["$","code",null,{"children":"scrollbars.theme"}]," option to change the theme."]}],"\n",["$","p",null,{"children":["Custom themes can be done in several ways. The easiest and fastest way is to use the predefined set of ",["$","code",null,{"children":"CSS Custom Properties"}]," aka CSS variables. If that's not enough, you can add custom class names or add custom styling to the existing class names."]}],"\n",["$","h3",null,{"children":"Styling in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","h3",null,{"children":"CSS Custom properties"}],["$","p",null,{"children":["OverlayScrollbars provides a set of ",["$","code",null,{"children":"CSS Custom Properties"}]," which makes scrollbar styling easy and fast:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"scss","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-scrollbar"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The size of the scrollbar"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The axis-perpedicular padding of the scrollbar (horizontal: padding-y, vertical: padding-x)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-padding-perpendicular: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The axis padding of the scrollbar (horizontal: padding-x, vertical: padding-y)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-padding-axis: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border radius of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border-radius: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-bg: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-bg-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-bg-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active background of the scrollbar track"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-track-border-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border radius of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border-radius: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The background of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-bg: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover background of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-bg-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active background of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-bg-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The border of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover border of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border-hover: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active border of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-border-active: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The min size of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-min-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"33"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The max size of the scrollbar handle"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-max-size: none;"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-perpendicular-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"100"}],["$","span",null,{"style":{"color":"#859900"},"children":"%"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :hover axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-perpendicular-size-hover: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"100"}],["$","span",null,{"style":{"color":"#859900"},"children":"%"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // The :active axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width)"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-perpendicular-size-active: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"100"}],["$","span",null,{"style":{"color":"#859900"},"children":"%"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // Increases the interactive area of the scrollbar handle."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-handle-interactive-area-offset: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["You can change the properties for both scrollbars at once, or for each scrollbar axis. In the example below, I've chosen ",["$","code",null,{"children":"os-theme-custom"}]," as the theme name:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"scss","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// horizontal and vertical scrollbar are 10px "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-theme-custom"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"10"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// horizontal scrollbar is 10px"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-theme-custom.os-scrollbar-horizontal"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"10"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// vertical scrollbar is 20px"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-theme-custom.os-scrollbar-vertical"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" --os-size: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"20"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["You can then use your theme by assigning it via the ",["$","code",null,{"children":"scrollbars.theme"}]," option:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#657B83"},"children":", {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" scrollbars: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" theme: "}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'os-theme-custom'"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"});"}]}]]}]}]}],["$","p",null,{"children":"Since scrollbar styles are usually simple, this set of options should be enough to get the styling you want.\r\nIf you need more freedom, you can create your own styles by adding styling to the base class names described in the next section."}],["$","h3",null,{"children":"Scrollbars structure and CSS class names"}],["$","p",null,{"children":"The scrollbars HTML markup looks like:"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"html","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar os-scrollbar-horizontal\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-track\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-handle\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":"<"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar os-scrollbar-vertical\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-track\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" <"}],["$","span",null,{"style":{"color":"#268BD2"},"children":"div"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" class"}],["$","span",null,{"style":{"color":"#657B83"},"children":"="}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"os-scrollbar-handle\""}],["$","span",null,{"style":{"color":"#93A1A1"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":""}]]}]]}]}]}],["$","p",null,{"children":["The class names are simplified, in a real application the ",["$","code",null,{"children":".os-scrollbar"}]," element can have additional class names which modify the appearance (mostly visibility and alignment)."]}],["$","p",null,{"children":"Below is a list of the most important class names you will encounter:"}],["$","table",null,{"children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"style":{"textAlign":"left"},"children":"CSS class name"}],["$","th",null,{"style":{"textAlign":"left"},"children":"description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The root element of a scrollbar."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-rtl"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["Indicates a ",["$","code",null,{"children":"RTL"}]," direction of the host element the scrollbar belongs to."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-horizontal"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The root element of a horizontal scrollbar."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-vertical"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":"The root element of a vertical scrollbar."}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-handle-interactive"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["Indicates that the handle inside the scrollbar is interactive (",["$","code",null,{"children":"scrollbars.dragScroll"}]," is ",["$","code",null,{"children":"true"}],")."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-track-interactive"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["Indicates that the track inside the scrollbar is interactive (",["$","code",null,{"children":"scrollbars.clickScroll"}]," is ",["$","code",null,{"children":"true"}],")."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-track"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["The track element. This is the track of the nested handle element. If ",["$","code",null,{"children":"scrollbars.clickScroll"}]," is ",["$","code",null,{"children":"true"}]," this is the element users can click to change the scroll offset."]}]]}],["$","tr",null,{"children":[["$","td",null,{"style":{"textAlign":"left"},"children":["$","code",null,{"children":".os-scrollbar-handle"}]}],["$","td",null,{"style":{"textAlign":"left"},"children":["The handle element. If ",["$","code",null,{"children":"scrollbars.dragScroll"}]," is ",["$","code",null,{"children":"true"}]," this is the handle users can drag to change the scroll offset."]}]]}]]}]]}],["$","p",null,{"children":"If you create your own theme, please only use the classes listed above. All other classes are modifier classes used to change visibility, alignment and pointer-events of the scrollbars."}],["$","h3",null,{"children":"Gotchas"}],["$","p",null,{"children":["It is important that the chosen theme class name in your CSS file matches the assigned theme name in the options. If the CSS class name is ",["$","code",null,{"children":".my-theme"}],", the ",["$","code",null,{"children":"scrollbars.theme"}]," must be ",["$","code",null,{"children":"'my-theme'"}],"."]}],["$","p",null,{"children":["Please be aware of your stack. For example, ",["$","code",null,{"children":"css-modules"}]," will change your class names to avoid naming collisions. Always check that your CSS is what you expect it to be."]}]]}],"\n",["$","h2",null,{"children":"Plugins"}],"\n",["$","p",null,{"children":"Anything that is not considered core functionality or old browser compatibility is exposed via a plugin. This is done because all unused plugins are treeshaken and won't end up in your final bundle. OverlayScrollbars ships with the following plugins:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":[["$","strong",null,{"children":"ScrollbarsHidingPlugin"}],": Needed for old browsers that don't support native scrollbar styling. ",["$","a",null,{"href":"https://caniuse.com/?search=scrollbar%20styling","children":"You can find the list of browsers where you need this plugin here","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," (note that even though ",["$","code",null,{"children":"iOS Safari >= 14"}]," is marked as unsupported, you only need this plugin for ",["$","code",null,{"children":"iOS < 7.1"}],")."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"SizeObserverPlugin"}],": Needed for old browsers that don't support the ",["$","code",null,{"children":"ResizeObserver"}]," api. ",["$","a",null,{"href":"https://caniuse.com/?search=ResizeObserver","children":"You can find the list of browsers that need this plugin here","className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"ClickScrollPlugin"}],": If you want to use the option ",["$","code",null,{"children":"scrollbars: { clickScroll: true }"}],"."]}],"\n"]}],"\n",["$","h3",null,{"children":"Consuming Plugins"}],"\n",["$","p",null,{"children":"Plugins are consumed like:"}],"\n",["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":"import"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"} "}],["$","span",null,{"style":{"color":"#859900"},"children":"from"}],["$","span",null,{"style":{"color":"#2AA198"},"children":" 'overlayscrollbars'"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// single plugin"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"ScrollbarsHidingPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// multiple plugins"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(["}],["$","span",null,{"style":{"color":"#268BD2"},"children":"SizeObserverPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"ClickScrollPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]);"}]]}]]}]}]}],"\n",["$","h3",null,{"children":"Plugins in depth"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":"This is a in depth topic. Click here to read it."}]}],["$","br",null,{}],["$","p",null,{"children":["Plugins are plain objects with a ",["$","strong",null,{"children":"single field"}],", the name of the field is the name of the plugin. This name is the plugins identifier and ",["$","em",null,{"children":"must"}]," be unique across all plugin. In case multiple plugins have the same name, the last added plugin overwrites previously added plugins."]}],["$","h3",null,{"children":"Plugin Modules"}],["$","p",null,{"children":["A Plugin module is the constructor of a plugin modules instance. There are two kinds of plugin modules: ",["$","code",null,{"children":"static"}]," and ",["$","code",null,{"children":"instance"}],". A single plugin must have one or more modules. Plugin modules can return an instance, but doesnt have to."]}],["$","h4",null,{"children":"Static Plugin Module"}],["$","p",null,{"children":["The ",["$","code",null,{"children":"static"}]," plugin module is invoked when the plugin is added with the ",["$","code",null,{"children":"OverlayScrollbars.plugin"}]," function."]}],["$","p",null,{"children":["Example plugin with a ",["$","code",null,{"children":"static"}]," module:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticPlugin"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // plugin has the name `examplePlugin`"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" examplePlugin: {"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // static function describes a static module and returns the module instance or void / undefined if no instance is needed"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `osStatic` parameter is the global `OverlayScrollbars` object"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" static"}],["$","span",null,{"style":{"color":"#657B83"},"children":": (osStatic) "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" let"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#D33682"},"children":" 0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getCount"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#859900"},"children":"++"}],["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" return"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["When the plugin is added with the ",["$","code",null,{"children":"OverlayScrollbars.plugin"}]," function, all OverlayScrollbar instances will automatically add the plugin from that point on. Previously created instances will not have the plugin. The instance module instance is returned with the ",["$","code",null,{"children":"osInstance.plugin"}]," function:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" staticModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"staticPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// plugins static module is invoked"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"staticModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 0"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"staticModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"staticModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 1"}]]}]]}]}]}],["$","h4",null,{"children":"Instance Plugin Module"}],["$","p",null,{"children":["The ",["$","code",null,{"children":"instance"}]," plugin module is invoked when a new ",["$","code",null,{"children":"OverlayScrollbars"}]," instance is created but before the ",["$","code",null,{"children":"initialized"}]," event is dispatched."]}],["$","p",null,{"children":["Example plugin with a ",["$","code",null,{"children":"instance"}]," module:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePlugin"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // plugin has the name `examplePlugin`"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" examplePlugin: {"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // instance function describes a instance module and returns the module instance or void / undefined if no instance is needed"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `osInstance` parameter is the OverlayScrollbar instance the plugin is bound to"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `event` parameter is a function which adds events to the instance which can't be removed from outside the plugin"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the `osStatic` parameter is the gobal OverlayScrollbar object"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" instance"}],["$","span",null,{"style":{"color":"#657B83"},"children":": (osInstance, event, osStatic) "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" let"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#D33682"},"children":" 0"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" getCount"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" count"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":": () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#859900"},"children":"++"}],["$","span",null,{"style":{"color":"#657B83"},"children":" },"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // event which fires when the instance was initialized"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" event"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'initialized'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" console"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"log"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"instance initialized\""}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // event which fires when the viewport was scrolled"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" removeScrollEvent"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" event"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"'scroll'"}],["$","span",null,{"style":{"color":"#657B83"},"children":", () "}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"=>"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" console"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"log"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#2AA198"},"children":"\"viewport scrolled\""}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":" removeScrollEvent"}],["$","span",null,{"style":{"color":"#657B83"},"children":"(); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// removes the event after the first scroll"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" });"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" return"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":" }"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["When the plugin is added with the ",["$","code",null,{"children":"OverlayScrollbars.plugin"}]," function all OverlayScrollbar instances will add the plugin automatically from that point on. Already created instances will not have the plugin. The instance modules instance is returned with the ",["$","code",null,{"children":"osInstance.plugin"}]," function:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// plugin is added"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" OverlayScrollbars"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"document"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"body"}],["$","span",null,{"style":{"color":"#657B83"},"children":", {}); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// plugins instance module is invoked"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#268BD2"},"children":" instancePluginInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"("}],["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePluginInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 0"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePluginInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"increment"}],["$","span",null,{"style":{"color":"#657B83"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"instancePluginInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"count"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// 1"}]]}]]}]}]}],["$","h4",null,{"children":"TypeScript"}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"ts","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbar plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the name of the plugin"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the module instance type of the static module"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" S"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":" // the module instance type of the instance module"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" I"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" |"}],["$","span",null,{"style":{"color":"#859900"},"children":" void"}],["$","span",null,{"style":{"color":"#657B83"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":" ["}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"pluginName"}],["$","span",null,{"style":{"color":"#859900"},"children":" in"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#657B83"},"children":"]"}],["$","span",null,{"style":{"color":"#859900"},"children":":"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModule"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"S"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"I"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbar plugin which has only a static module."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" StaticPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Name"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#859900"},"children":"void"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Describes a OverlayScrollbar plugin which has only a instance module."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InstancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" Name"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#859900"},"children":" string"}],["$","span",null,{"style":{"color":"#657B83"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#CB4B16"},"children":" T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}],["$","span",null,{"style":{"color":"#859900"},"children":" ="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" PluginModuleInstance"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#657B83"},"children":"> "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" Plugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"Name"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#859900"},"children":"void"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Infers the type of the static modules instance of the passed plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferStaticPluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" StaticPlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// Infers the type of the instance modules instance of the passed plugin."}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"type"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InferInstancePluginModuleInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"<"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":"T"}],["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":" extends"}],["$","span",null,{"style":{"color":"#CB4B16"},"children":" InstancePlugin"}],["$","span",null,{"style":{"color":"#657B83"},"children":">;"}]]}]]}]}]}]]}],"\n",["$","h2",null,{"children":"FAQ"}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":["How do I ",["$","code",null,{"children":"get / set"}]," the ",["$","code",null,{"children":"scroll position"}]," of an element I applied OverlayScrollbars to?"]}]}],["$","br",null,{}],["$","p",null,{"children":["If you applied ",["$","code",null,{"children":"OverlayScrollbars"}]," to the ",["$","code",null,{"children":"body"}]," element you can use ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX","children":["$","code",null,{"children":"window.scrollX"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY","children":["$","code",null,{"children":"window.scrollY"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll","children":["$","code",null,{"children":"window.scroll"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo","children":["$","code",null,{"children":"window.scrollTo"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy","children":["$","code",null,{"children":"window.scrollBy"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or any other native api."]}],["$","p",null,{"children":["If the plugin was applied to any other element you have to get the ",["$","code",null,{"children":"viewport"}]," element with the ",["$","code",null,{"children":"instance.elements()"}]," function first. With this element you can use ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop","children":["$","code",null,{"children":"element.scrollTop"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft","children":["$","code",null,{"children":"element.scrollLeft"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll","children":["$","code",null,{"children":"element.scroll"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo","children":["$","code",null,{"children":"element.scrollTo"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}],", ",["$","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy","children":["$","code",null,{"children":"element.scrollBy"}],"className":"no-underline text-primary-blue2 font-medium [background:linear-gradient(0deg,currentColor,currentColor)_no-repeat_right_bottom_/_0_2px] [transition:background-size_250ms] hover:[background-size:100%_2px] hover:[background-position-x:left] focus-visible:rounded-sm"}]," or any other native api."]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"js","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"viewport"}],["$","span",null,{"style":{"color":"#657B83"},"children":" } "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" osInstance"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"elements"}],["$","span",null,{"style":{"color":"#657B83"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#586E75","fontWeight":"bold"},"children":"const"}],["$","span",null,{"style":{"color":"#657B83"},"children":" { "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"scrollLeft"}],["$","span",null,{"style":{"color":"#657B83"},"children":", "}],["$","span",null,{"style":{"color":"#268BD2"},"children":"scrollTop"}],["$","span",null,{"style":{"color":"#657B83"},"children":" } "}],["$","span",null,{"style":{"color":"#859900"},"children":"="}],["$","span",null,{"style":{"color":"#268BD2"},"children":" viewport"}],["$","span",null,{"style":{"color":"#657B83"},"children":"; "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// get scroll offset"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#268BD2"},"children":"viewport"}],["$","span",null,{"style":{"color":"#657B83"},"children":"."}],["$","span",null,{"style":{"color":"#268BD2"},"children":"scrollTo"}],["$","span",null,{"style":{"color":"#657B83"},"children":"({ top: "}],["$","span",null,{"style":{"color":"#D33682"},"children":"0"}],["$","span",null,{"style":{"color":"#657B83"},"children":" }); "}],["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"// set scroll offset"}]]}]]}]}]}]]}],"\n",["$","details",null,{"children":[["$","summary",null,{"children":["$","p",null,{"children":["Is it possible to ",["$","code",null,{"children":"limit / adjust the scrollbar handle length"}],"?"]}]}],["$","br",null,{}],["$","p",null,{"children":["You can adjust a scrollbars handle length by setting a ",["$","code",null,{"children":"min-width / min-height"}]," and ",["$","code",null,{"children":"max-width / max-height"}]," style:"]}],["$","figure",null,{"data-rehype-pretty-code-figure":"","children":["$","$L2",null,{"defer":true,"element":"pre","options":{"paddingAbsolute":true,"scrollbars":{"autoHide":"scroll","autoHideSuspend":true}},"children":["$","code",null,{"data-language":"css","data-theme":"solarized-light","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"/* horizontal boundaries */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-scrollbar-horizontal"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" .os-scrollbar-handle"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" min-width"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"50"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" max-width"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"200"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#93A1A1","fontStyle":"italic"},"children":"/* vertical boundaries */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#93A1A1"},"children":".os-scrollbar-vertical"}],["$","span",null,{"style":{"color":"#93A1A1"},"children":" .os-scrollbar-handle"}],["$","span",null,{"style":{"color":"#657B83"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" min-height"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"40"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#859900"},"children":" max-height"}],["$","span",null,{"style":{"color":"#657B83"},"children":": "}],["$","span",null,{"style":{"color":"#D33682"},"children":"40"}],["$","span",null,{"style":{"color":"#859900"},"children":"px"}],["$","span",null,{"style":{"color":"#657B83"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#657B83"},"children":"}"}]}]]}]}]}],["$","p",null,{"children":["You can assign the same value to both properties to force the scrollbar to be always the same size.",["$","br",null,{}],"\n","Setting the ",["$","code",null,{"children":"width"}]," and ",["$","code",null,{"children":"height"}]," properties won't work since those are set by the plugin automatically."]}]]}],"\n",["$","h2",null,{"children":["Feature comparison to ",["$","code",null,{"children":"v1"}]]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["The ",["$","code",null,{"children":"scroll"}]," function is missing. Planned as a ",["$","code",null,{"children":"plugin"}],". (WIP)"]}],"\n",["$","li",null,{"children":["Initialization to the ",["$","code",null,{"children":"textarea"}]," element isn't supported yet. Planned as a ",["$","code",null,{"children":"plugin"}],". (WIP)"]}],"\n"]}],"\n",["$","h2",null,{"children":"Future Plans"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"Provide plugin based support for missing features. (treeshakeable)"}],"\n",["$","li",null,{"children":"Frequent updates in terms of bug-fixes and enhancements. (always use latest browser features)"}],"\n",["$","li",null,{"children":"Improve tests. (unit & browser tests)"}],"\n"]}],"\n",["$","h2",null,{"children":"License"}],"\n",["$","p",null,{"children":"MIT"}]]}]]}],null]]},[null,["$","$L4",null,{"children":["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","loadingScripts":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}],"params":{}}],null]],[[["$","link","0",{"rel":"stylesheet","href":"/OverlayScrollbars/_next/static/css/239180dd2803a441.css","precedence":"next","crossOrigin":""}]],"$L7"]]]] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"name":"theme-color","content":"#36befd"}],["$","meta","2",{"charSet":"utf-8"}],["$","title","3",{"children":"OverlayScrollbars"}],["$","meta","4",{"name":"description","content":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."}],["$","link","5",{"rel":"author","href":"https://github.com/KingSora"}],["$","meta","6",{"name":"author","content":"Rene Haas"}],["$","link","7",{"rel":"author","href":"https://github.com/KingSora"}],["$","meta","8",{"name":"author","content":"KingSora"}],["$","meta","9",{"name":"keywords","content":"OverlayScrollbars,Overlay,Scroll,Bar,Custom,Scrollbar,React,Vue,Angular,Solid,Solidjs,Svelte,JavaScript,TypeScript,Plugin,Library"}],["$","meta","10",{"name":"creator","content":"Rene Haas"}],["$","meta","11",{"name":"publisher","content":"Rene Haas"}],["$","meta","12",{"name":"twitter:card","content":"summary"}],["$","meta","13",{"name":"twitter:title","content":"OverlayScrollbars"}],["$","meta","14",{"name":"twitter:description","content":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."}],["$","link","15",{"rel":"icon","href":"/OverlayScrollbars/favicon.ico","type":"image/x-icon","sizes":"256x256"}]] 1:null