-
-
Notifications
You must be signed in to change notification settings - Fork 215
/
examples.html
1 lines (1 loc) · 35.6 KB
/
examples.html
1
<!DOCTYPE html><html lang="en" class="w-full h-full font-sans font-medium text-primary-dark bg-slate-50" data-overlayscrollbars-initialize=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="/OverlayScrollbars/icon/javascript.svg"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg"/><link rel="stylesheet" href="/OverlayScrollbars/_next/static/css/239180dd2803a441.css" crossorigin="" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/OverlayScrollbars/_next/static/chunks/webpack-42808d76a09bd4a9.js" crossorigin=""/><script src="/OverlayScrollbars/_next/static/chunks/fd9d1056-40aa7d73374bf23f.js" async="" crossorigin=""></script><script src="/OverlayScrollbars/_next/static/chunks/69-95fb00d7259ddc11.js" async="" crossorigin=""></script><script src="/OverlayScrollbars/_next/static/chunks/main-app-8cd95c127c03ca99.js" async="" crossorigin=""></script><script src="/OverlayScrollbars/_next/static/chunks/250-803c01549b05a15b.js" async=""></script><script src="/OverlayScrollbars/_next/static/chunks/app/examples/page-874222f5f6501ae2.js" async=""></script><script src="/OverlayScrollbars/_next/static/chunks/554-ea66ad1362920aef.js" async=""></script><script src="/OverlayScrollbars/_next/static/chunks/556-2555a825b8c6e47f.js" async=""></script><script src="/OverlayScrollbars/_next/static/chunks/app/layout-b751ad67d23f0013.js" async=""></script><meta name="theme-color" content="#36befd"/><title>OverlayScrollbars Examples</title><meta name="description" content="A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."/><link rel="author" href="https://github.com/KingSora"/><meta name="author" content="Rene Haas"/><link rel="author" href="https://github.com/KingSora"/><meta name="author" content="KingSora"/><meta name="keywords" content="OverlayScrollbars,Overlay,Scroll,Bar,Custom,Scrollbar,React,Vue,Angular,Solid,Solidjs,Svelte,JavaScript,TypeScript,Plugin,Library"/><meta name="creator" content="Rene Haas"/><meta name="publisher" content="Rene Haas"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="OverlayScrollbars"/><meta 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 rel="icon" href="/OverlayScrollbars/favicon.ico" type="image/x-icon" sizes="256x256"/><script src="/OverlayScrollbars/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js" crossorigin="" noModule=""></script></head><body class="w-full h-full" data-overlayscrollbars-initialize=""><script type="application/ld+json">{"@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":true,"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"}}</script><div class="h-full sm:container default:px-6"><main class="h-full grid items-center justify-items-center py-5 grid-rows-[auto_1fr]"><a class="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" href="/OverlayScrollbars">Documentation</a><div class="w-full grid gap-6 grid-cols-fit-56 py-6"><div class="flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white"><div class="relative w-16 h-16 mx-auto mb-6"><div style="background-image:url(/OverlayScrollbars/icon/javascript.svg)" class="bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"></div><img src="/OverlayScrollbars/icon/javascript.svg" alt="JavaScript" class="absolute top-0 left-0 w-full h-full object-contain"/></div><h2 class="font-semiBold text-base text-center">JavaScript<!-- --> Examples</h2><ul class="list-disc list-inside px-3 mt-6 space-y-2"><li><a href="/OverlayScrollbars/example/overlayscrollbars" class="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">Demo App</a></li><li><a href="https://stackblitz.com/edit/overlayscrollbars" class="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">StackBlitz</a></li><li><a href="https://codesandbox.io/p/sandbox/overlayscrollbars-example-29hk3v" class="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">CodeSandbox</a></li></ul></div><div class="flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white"><div class="relative w-16 h-16 mx-auto mb-6"><div style="background-image:url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg)" class="bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"></div><img src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg" alt="React" class="absolute top-0 left-0 w-full h-full object-contain"/></div><h2 class="font-semiBold text-base text-center">React<!-- --> Examples</h2><ul class="list-disc list-inside px-3 mt-6 space-y-2"><li><a href="/OverlayScrollbars/example/react" class="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">Demo App</a></li><li><a href="https://stackblitz.com/edit/overlayscrollbars-react" class="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">StackBlitz</a></li><li><a href="https://codesandbox.io/p/sandbox/overlayscrollbars-react-example-ddz458" class="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">CodeSandbox</a></li></ul></div><div class="flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white"><div class="relative w-16 h-16 mx-auto mb-6"><div style="background-image:url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg)" class="bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"></div><img src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg" alt="Vue" class="absolute top-0 left-0 w-full h-full object-contain"/></div><h2 class="font-semiBold text-base text-center">Vue<!-- --> Examples</h2><ul class="list-disc list-inside px-3 mt-6 space-y-2"><li><a href="/OverlayScrollbars/example/vue" class="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">Demo App</a></li><li><a href="https://stackblitz.com/edit/overlayscrollbars-vue" class="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">StackBlitz</a></li><li><a href="https://codesandbox.io/p/sandbox/overlayscrollbars-vue-example-rh3vjm" class="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">CodeSandbox</a></li></ul></div><div class="flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white"><div class="relative w-16 h-16 mx-auto mb-6"><div style="background-image:url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg)" class="bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"></div><img src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg" alt="Angular" class="absolute top-0 left-0 w-full h-full object-contain"/></div><h2 class="font-semiBold text-base text-center">Angular<!-- --> Examples</h2><ul class="list-disc list-inside px-3 mt-6 space-y-2"><li><a href="/OverlayScrollbars/example/angular" class="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">Demo App</a></li><li><a href="https://stackblitz.com/edit/overlayscrollbars-ngx" class="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">StackBlitz</a></li><li><a href="https://codesandbox.io/p/sandbox/overlayscrollbars-ngx-example-dwtg9q" class="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">CodeSandbox</a></li></ul></div><div class="flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white"><div class="relative w-16 h-16 mx-auto mb-6"><div style="background-image:url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg)" class="bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"></div><img src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg" alt="Solid" class="absolute top-0 left-0 w-full h-full object-contain"/></div><h2 class="font-semiBold text-base text-center">Solid<!-- --> Examples</h2><ul class="list-disc list-inside px-3 mt-6 space-y-2"><li><a href="/OverlayScrollbars/example/solid" class="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">Demo App</a></li><li><a href="https://stackblitz.com/edit/overlayscrollbars-solid" class="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">StackBlitz</a></li><li><a href="https://codesandbox.io/p/sandbox/overlayscrollbars-solid-example-wxl45n" class="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">CodeSandbox</a></li></ul></div><div class="flex-1 whitespace-nowrap border border-slate-200 px-3 py-5 rounded-lg shadow-lg shadow-slate-300/25 bg-white"><div class="relative w-16 h-16 mx-auto mb-6"><div style="background-image:url(https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg)" class="bg-contain bg-center bg-no-repeat w-full h-full [filter:blur(20px)] opacity-30"></div><img src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg" alt="Svelte" class="absolute top-0 left-0 w-full h-full object-contain"/></div><h2 class="font-semiBold text-base text-center">Svelte<!-- --> Examples</h2><ul class="list-disc list-inside px-3 mt-6 space-y-2"><li><a href="/OverlayScrollbars/example/svelte" class="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">Demo App</a></li><li><a href="https://stackblitz.com/edit/overlayscrollbars-svelte" class="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">StackBlitz</a></li><li><a href="https://codesandbox.io/p/sandbox/overlayscrollbars-svelte-example-8gqhrp" class="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">CodeSandbox</a></li></ul></div></div></main></div><script src="/OverlayScrollbars/_next/static/chunks/webpack-42808d76a09bd4a9.js" crossorigin="" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/OverlayScrollbars/_next/static/css/239180dd2803a441.css\",\"style\",{\"crossOrigin\":\"\"}]\n0:\"$L2\"\n"])</script><script>self.__next_f.push([1,"3:I[7690,[],\"\"]\n5:I[5250,[\"250\",\"static/chunks/250-803c01549b05a15b.js\",\"668\",\"static/chunks/app/examples/page-874222f5f6501ae2.js\"],\"\"]\n6:I[5613,[],\"\"]\n7:I[1778,[],\"\"]\n8:I[293,[\"554\",\"static/chunks/554-ea66ad1362920aef.js\",\"556\",\"static/chunks/556-2555a825b8c6e47f.js\",\"185\",\"static/chunks/app/layout-b751ad67d23f0013.js\"],\"Html\"]\na:I[8955,[],\"\"]\nb:[]\n"])</script><script>self.__next_f.push([1,"2:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/OverlayScrollbars/_next/static/css/239180dd2803a441.css\",\"precedence\":\"next\",\"crossOrigin\":\"\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"reOK3I1tIwLyFlgzFGNpE\",\"assetPrefix\":\"/OverlayScrollbars\",\"initialCanonicalUrl\":\"/examples\",\"initialTree\":[\"\",{\"children\":[\"examples\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"examples\",{\"children\":[\"__PAGE__\",{},[\"$L4\",[\"$\",\"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\":[[\"$\",\"$L5\",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]]},[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"examples\",\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"loadingScripts\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}]]},[null,[\"$\",\"$L8\",null,{\"children\":[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"loadingScripts\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",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]],\"initialHead\":[false,\"$L9\"],\"globalErrorComponent\":\"$a\",\"missingSlots\":\"$Wb\"}]]\n"])</script><script>self.__next_f.push([1,"9:[[\"$\",\"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\"}]]\n"])</script><script>self.__next_f.push([1,"4:null\n"])</script><script>self.__next_f.push([1,""])</script></body></html>