Package.Json (package.json)

{
"private": true,
"type": "module",
"workspaces": [
"packages/"
],
"devDependencies": {
"@~local/browser-testing": "file:./local/browser-testing",
"@~local/config": "file:./local/config",
"@~local/esbuild": "file:./local/esbuild",
"@~local/full-coverage": "file:./local/full-coverage",
"@~local/playwright-tooling": "file:./local/playwright-tooling",
"@~local/rollup": "file:./local/rollup",
"@~local/tailwind": "file:./local/tailwind",
"@~local/tsconfig": "file:./local/tsconfig",
"@babel/core": "^7.23.6",
"@babel/plugin-syntax-import-attributes": "^7.24.7",
"@babel/plugin-transform-runtime": "^7.23.6",
"@babel/preset-env": "^7.23.6",
"@babel/preset-react": "^7.23.3",
"@babel/preset-typescript": "^7.23.3",
"@babel/runtime": "^7.23.6",
"@eslint/js": "^9.20.0",
"@playwright/test": "1.57.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.4.8",
"@testing-library/user-event": "^14.5.2",
"@types/node": "^18.11.3",
"@typescript-eslint/parser": "^8.24.0",
"@vitest/coverage-istanbul": "^3.0.5",
"@vitest/coverage-v8": "^3.0.5",
"esbuild": "^0.19.10",
"eslint": "^9.20.1",
"eslint-config-prettier": "^10.0.1",
"eslint-import-resolver-typescript": "^3.7.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-prettier": "^5.2.3",
"eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-tailwindcss": "^3.18.0",
"globals": "^15.15.0",
"jsdom": "^26.0.0",
"npm-run-all": "^4.1.5",
"playwright": "1.57.0",
"playwright-chromium": "1.57.0",
"playwright-core": "1.57.0",
"playwright-firefox": "1.57.0",
"playwright-webkit": "1.57.0",
"prettier": "^3.3.3",
"rollup": "^4.9.1",
"rollup-plugin-esbuild-resolve": "^1.3.0",
"sass": "^1.56.1",
"should": "^13.2.3",
"tslib": "^2.6.0",
"typescript": "^5.3.0",
"typescript-eslint": "8.24.0",
"vite": "^6.0.0",
"vitest": "^3.0.5",
"webpack": "^5.74.0"
},
"scripts": {
"test": "run-s test:",
"test:os": "npm run test --workspace=overlayscrollbars",
"test:react": "npm run test --workspace=overlayscrollbars-react",
"test:vue": "npm run test --workspace=overlayscrollbars-vue",
"test:ngx": "npm run test --workspace=overlayscrollbars-ngx",
"test:svelte": "npm run test --workspace=overlayscrollbars-svelte",
"test:solid": "npm run test --workspace=overlayscrollbars-solid",
"e2e": "run-s e2e:",
"e2e:os": "npm run e2e --workspace=overlayscrollbars",
"e2e:os:dev": "npm run e2e:dev --workspace=overlayscrollbars",
"build": "run-s build:",
"build:os": "npm run build --workspace=overlayscrollbars",
"build:react": "npm run build --workspace=overlayscrollbars-react",
"build:vue": "npm run build --workspace=overlayscrollbars-vue",
"build:ngx": "npm run build --workspace=overlayscrollbars-ngx",
"build:svelte": "npm run build --workspace=overlayscrollbars-svelte",
"build:solid": "npm run build --workspace=overlayscrollbars-solid",
"example:os": "npm run build:os && cd examples/overlayscrollbars && npm i && npm run dev",
"example:react": "npm run build:react && cd examples/react && npm i && npm run dev",
"example:vue": "npm run build:vue && cd examples/vue && npm i && npm run dev",
"example:ngx": "npm run build:ngx && cd examples/angular && npm i && npm run dev",
"example:svelte": "npm run build:svelte && cd examples/svelte && npm i && npm run dev",
"example:solid": "npm run build:solid && cd examples/solid && npm i && npm run dev",
"deploy": "cd website && node deploy.js --docs --examples",
"deploy:docs": "cd website && node deploy.js --docs",
"deploy:examples": "cd website && node deploy.js --examples",
"lint": "eslint ./packages//{src,test}//.{js,jsx,ts,tsx}",
"lint:fix": "eslint --fix ./packages//{src,test}//.{js,jsx,ts,tsx}",
"prettier": "prettier --check ./packages//{src,test}//.{js,jsx,ts,tsx}",
"prettier:fix": "prettier --write ./packages//{src,test}//.{js,jsx,ts,tsx}",
"ci:test": "run-s test:",
"ci:e2e": "run-s e2e:"
}
}

Tsconfig.Json (tsconfig.json)

{
"extends": "@~local/tsconfig",
"exclude": ["/dist//", "/build//"]
}

App Build Manifest.Json (docs/app-build-manifest.json)

{
"pages": {
"/page": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/chunks/app/page.js"
],
"/layout": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/css/app/layout.css",
"static/chunks/app/layout.js"
]
}
}

Build Manifest.Json (docs/build-manifest.json)

{
"polyfillFiles": [
"static/chunks/polyfills.js"
],
"devFiles": [],
"ampDevFiles": [],
"lowPriorityFiles": [
"static/development/_buildManifest.js",
"static/development/_ssgManifest.js"
],
"rootMainFiles": [
"static/chunks/webpack.js",
"static/chunks/main-app.js"
],
"pages": {
"/_app": []
},
"ampFirstPages": []
}

Examples (docs/examples.txt)

2:I[231,["231","static/chunks/231-d4aaea19b054ec1b.js","668","static/chunks/app/examples/page-5854916217ce4b07.js"],""]
3:I[9275,[],""]
4:I[1343,[],""]
5:I[7489,["88","static/chunks/88-9d55cab378812048.js","808","static/chunks/808-8f2c30803baf3acd.js","185","static/chunks/app/layout-4471d03b3bb2b863.js"],"Html"]
0:["ouNXA80pxJ8mxu9hWsIWp",[[["",{"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],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","examples","children"],"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"],"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],null],[[["$","link","0",{"rel":"stylesheet","href":"/OverlayScrollbars/_next/static/css/9e691645358358be.css","precedence":"next","crossOrigin":"$undefined"}]],[null,"$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

Server/App Paths Manifest.Json (docs/server/app-paths-manifest.json)

{
"/page": "app/page.js",
"/favicon.ico/route": "app/favicon.ico/route.js"
}

Server/Middleware Manifest.Json (docs/server/middleware-manifest.json)

{
"version": 3,
"middleware": {},
"functions": {},
"sortedMiddleware": []
}

Server/Next Font Manifest.Json (docs/server/next-font-manifest.json)

{"pages":{},"app":{},"appUsingSizeAdjust":false,"pagesUsingSizeAdjust":false}

Server/Server Reference Manifest.Json (docs/server/server-reference-manifest.json)

{
"node": {},
"edge": {},
"encryptionKey": "kbjR8O6xQxquolTDP715dWazmQuS6zM5NzXWtGYeftg="
}

Static/Webpack/907336788e8ddfac.Webpack.Hot Update.Json (docs/static/webpack/907336788e8ddfac.webpack.hot-update.json)

{"c":["app/layout","webpack"],"r":["app/_not-found/page"],"m":["(app-pages-browser)/./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=C%3A%5CGithub%5COverlayScrollbars%5Cwebsite%5Cnode_modules%5Cnext%5Cdist%5Cclient%5Ccomponents%5Cnot-found-error.js&page=%2F_not-found%2Fpage!","(app-pages-browser)/./node_modules/next/dist/client/components/not-found-error.js"]}

V1/Frameworks/Angular/3rdpartylicenses (docs/v1/frameworks/angular/3rdpartylicenses.txt)

@angular/common
MIT

@angular/core
MIT

@angular/platform-browser
MIT

css-loader
MIT
Copyright JS Foundation and other contributors

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

overlayscrollbars
MIT
MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

overlayscrollbars-ngx
MIT
MIT License

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

rxjs
Apache-2.0
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/

TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

Definitions.

"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.

"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.

"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.

"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.

"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.

"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.

"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).

"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.

"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."

"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:

(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and

(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and

(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and

(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.

You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.

END OF TERMS AND CONDITIONS

APPENDIX: How to apply the Apache License to your work.

text

To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!)  The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

text

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

zone.js
MIT
The MIT License

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

V1/Frameworks/React/Asset Manifest.Json (docs/v1/frameworks/react/asset-manifest.json)

{
"files": {
"main.css": "/OverlayScrollbars/frameworks/react/static/css/main.957e9a21.chunk.css",
"main.js": "/OverlayScrollbars/frameworks/react/static/js/main.1f7f80a4.chunk.js",
"main.js.map": "/OverlayScrollbars/frameworks/react/static/js/main.1f7f80a4.chunk.js.map",
"runtime~~main.js": "/OverlayScrollbars/frameworks/react/static/js/runtime~~main.6aaf21d4.js",
"runtime~~main.js.map": "/OverlayScrollbars/frameworks/react/static/js/runtime~~main.6aaf21d4.js.map",
"static/css/2.cc8fcf68.chunk.css": "/OverlayScrollbars/frameworks/react/static/css/2.cc8fcf68.chunk.css",
"static/js/2.f58e91b4.chunk.js": "/OverlayScrollbars/frameworks/react/static/js/2.f58e91b4.chunk.js",
"static/js/2.f58e91b4.chunk.js.map": "/OverlayScrollbars/frameworks/react/static/js/2.f58e91b4.chunk.js.map",
"index.html": "/OverlayScrollbars/frameworks/react/index.html",
"precache-manifest.38429c8b057febf1cddfa242e6480d10.js": "/OverlayScrollbars/frameworks/react/precache-manifest.38429c8b057febf1cddfa242e6480d10.js",
"service-worker.js": "/OverlayScrollbars/frameworks/react/service-worker.js",
"static/css/2.cc8fcf68.chunk.css.map": "/OverlayScrollbars/frameworks/react/static/css/2.cc8fcf68.chunk.css.map",
"static/css/main.957e9a21.chunk.css.map": "/OverlayScrollbars/frameworks/react/static/css/main.957e9a21.chunk.css.map",
"static/media/App.css": "/OverlayScrollbars/frameworks/react/static/media/react.ba7f2cdb.svg"
}
}

V1/Frameworks/React/Manifest.Json (docs/v1/frameworks/react/manifest.json)

{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

Examples/README (examples/README.md)

Examples

You can either use the provided online examples or run examples locally by cloning the repository.

Simple Examples

If you search for the simplest examples possible, you can use either the Browser or Node example.

Both are written in simple JavaScript and only consist of minimal initialization code and some styling.

Online Examples

All of the following examples are written in TypeScript if the corresponding framework has support for it.

Framework	Examples
	`Demo App` / `StackBlitz` / `CodeSandbox`
React	`Demo App` / `StackBlitz` / `CodeSandbox`
Vue	`Demo App` / `StackBlitz` / `CodeSandbox`
Angular	`Demo App` / `StackBlitz` / `CodeSandbox`
Svelte	`Demo App` / `StackBlitz` / `CodeSandbox`
Solid	`Demo App` / `StackBlitz` / `CodeSandbox`

Local Examples

Run example applications with OverlayScrollbars.

Note: All commands must be executed from the root directory of the repository unless stated differently.

Install and Build

Before any application can be started, all dependencies have to be installed and the library has to be build:

npm install
npm run build:os

Run local Example

The following examples are available:

App	Command
	`npm run example:os`
React	`npm run example:react`
Vue	`npm run example:vue`
Angular	`npm run example:ngx`
Svelte	`npm run example:svelte`
Solid	`npm run example:solid`

Examples/Angular/Angular.Json (examples/angular/angular.json)

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"packageManager": "npm",
"analytics": false
},
"newProjectRoot": "projects",
"projects": {
"angular": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular/build:application",
"options": {
"browser": "src/main.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.css"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kB",
"maximumError": "8kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular/build:dev-server",
"configurations": {
"production": {
"buildTarget": "angular:build:production"
},
"development": {
"buildTarget": "angular:build:development"
}
},
"defaultConfiguration": "development"
},
"test": {
"builder": "@angular/build:unit-test"
}
}
}
}
}

Examples/Angular/Package.Json (examples/angular/package.json)

{
"private": true,
"type": "module",
"dependencies": {
"@angular/common": "^21.2.0",
"@angular/compiler": "^21.2.0",
"@angular/core": "^21.2.0",
"@angular/forms": "^21.2.0",
"@angular/platform-browser": "^21.2.0",
"@angular/router": "^21.2.0",
"overlayscrollbars": "^2.15.1",
"overlayscrollbars-ngx": "^0.5.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0"
},
"devDependencies": {
"@angular/build": "^21.2.8",
"@angular/cli": "^21.2.8",
"@angular/compiler-cli": "^21.2.0",
"jsdom": "^28.0.0",
"prettier": "^3.8.1",
"typescript": "~5.9.2",
"vitest": "^4.0.8"
},
"scripts": {
"ng": "ng",
"dev": "ng serve",
"build": "ng build --base-href /OverlayScrollbars/example/angular/",
"watch": "ng build --watch --configuration development"
}
}

Examples/Angular/Tsconfig.App.Json (examples/angular/tsconfig.app.json)

Examples/Angular/Tsconfig.Json (examples/angular/tsconfig.json)

/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. /
/ To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"compileOnSave": false,
"compilerOptions": {
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"isolatedModules": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "ES2022",
"module": "preserve"
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
},
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}

Examples/Browser/Package.Json (examples/browser/package.json)

{
"private": true,
"type": "module",
"devDependencies": {
"vite": "^5.2.11"
},
"scripts": {
"dev": "vite",
"build": "vite build --base /OverlayScrollbars/example/cdn",
"preview": "vite preview"
}
}

Examples/Node/Package.Json (examples/node/package.json)

{
"private": true,
"type": "module",
"dependencies": {
"overlayscrollbars": "file:../../packages/overlayscrollbars/dist"
},
"devDependencies": {
"vite": "^5.2.11"
},
"scripts": {
"dev": "vite",
"build": "vite build --base /OverlayScrollbars/example/cdn",
"preview": "vite preview"
}
}

Examples/Overlayscrollbars/Package.Json (examples/overlayscrollbars/package.json)

{
"private": true,
"type": "module",
"dependencies": {
"overlayscrollbars": "file:../../packages/overlayscrollbars/dist"
},
"devDependencies": {
"typescript": "^5.0.2",
"vite": "^5.2.11"
},
"scripts": {
"dev": "vite",
"build": "tsc && vite build --base /OverlayScrollbars/example/overlayscrollbars",
"preview": "vite preview"
}
}

Examples/Overlayscrollbars/Tsconfig.Json (examples/overlayscrollbars/tsconfig.json)

{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "NodeNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,

text

/* Bundler mode */
"moduleResolution": "NodeNext",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true

},
"include": ["src"]
}

Examples/React/Package.Json (examples/react/package.json)

{
"private": true,
"type": "module",
"dependencies": {
"overlayscrollbars": "file:../../packages/overlayscrollbars/dist",
"overlayscrollbars-react": "file:../../packages/overlayscrollbars-react/dist",
"react": "19.2.5",
"react-dom": "19.2.5"
},
"devDependencies": {
"@types/react": "^18.2.45",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"typescript": "^5.0.2",
"vite": "^5.2.11"
},
"scripts": {
"dev": "vite",
"build": "tsc && vite build --base /OverlayScrollbars/example/react",
"preview": "vite preview"
}
}

Examples/React/Tsconfig.Json (examples/react/tsconfig.json)

{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

Examples/React/Tsconfig.Node.Json (examples/react/tsconfig.node.json)

{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

Examples/Solid/Package.Json (examples/solid/package.json)

{
"private": true,
"type": "module",
"dependencies": {
"overlayscrollbars": "file:../../packages/overlayscrollbars/dist",
"overlayscrollbars-solid": "file:../../packages/overlayscrollbars-solid/dist",
"solid-js": "^1.9.3"
},
"devDependencies": {
"typescript": "^5.0.2",
"vite": "^5.2.11",
"vite-plugin-solid": "^2.10.1"
},
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build --base /OverlayScrollbars/example/solid",
"serve": "vite preview"
}
}

Examples/Solid/Tsconfig.Json (examples/solid/tsconfig.json)

{
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"types": ["vite/client"],
"noEmit": true,
"isolatedModules": true
}
}

Examples/Svelte/Package.Json (examples/svelte/package.json)

{
"private": true,
"type": "module",
"dependencies": {
"overlayscrollbars": "file:../../packages/overlayscrollbars/dist",
"overlayscrollbars-svelte": "file:../../packages/overlayscrollbars-svelte/dist"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@tsconfig/svelte": "^5.0.4",
"svelte": "^5.0.0",
"svelte-check": "^4.1.4",
"tslib": "^2.6.0",
"typescript": "^5.0.2",
"vite": "^6.0.0"
},
"scripts": {
"dev": "vite",
"build": "vite build --base /OverlayScrollbars/example/svelte",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json"
}
}

Examples/Svelte/Tsconfig.Json (examples/svelte/tsconfig.json)

{
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"resolveJsonModule": true,
/**
* Typecheck JS in .svelte and .js files by default.
* Disable checkJs if you'd like to use dynamic types in JS.
* Note that setting allowJs false does not prevent the use
* of JS in .svelte files.
/
"allowJs": true,
"checkJs": true,
"isolatedModules": true
},
"include": ["src/**/.d.ts", "src//*.ts", "src//.js", "src/**/.svelte"],
"references": [{ "path": "./tsconfig.node.json" }]
}

Examples/Svelte/Tsconfig.Node.Json (examples/svelte/tsconfig.node.json)

{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler"
},
"include": ["vite.config.ts"]
}

Examples/Vue/Package.Json (examples/vue/package.json)

{
"private": true,
"type": "module",
"dependencies": {
"overlayscrollbars": "file:../../packages/overlayscrollbars/dist",
"overlayscrollbars-vue": "file:../../packages/overlayscrollbars-vue/dist",
"vue": "3.5.33"
},
"devDependencies": {
"@types/node": "^20.10.5",
"@vitejs/plugin-vue": "^5.2.1",
"@vitejs/plugin-vue-jsx": "^4.1.1",
"@vue/tsconfig": "^0.5.1",
"typescript": "^5.0.2",
"vite": "^5.2.11",
"vue-tsc": "^1.8.25"
},
"scripts": {
"dev": "vite",
"build": "run-p type-check build-only",
"preview": "vite preview --port 4173",
"build-only": "vite build --base /OverlayScrollbars/example/vue",
"type-check": "vue-tsc --noEmit"
}
}

Examples/Vue/Tsconfig.Config.Json (examples/vue/tsconfig.config.json)

{
"extends": "@vue/tsconfig/tsconfig.json",
"include": ["vite.config.", "vitest.config.", "cypress.config.*"],
"compilerOptions": {
"ignoreDeprecations": "5.0",
"composite": true,
"noEmit": false,
"types": ["node"]
}
}

Examples/Vue/Tsconfig.Json (examples/vue/tsconfig.json)

{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src//*", "src//.vue"],
"compilerOptions": {
"ignoreDeprecations": "5.0",
"baseUrl": ".",
"lib": [
"ES2017",
"DOM",
"DOM.Iterable"
],
"paths": {
"@/": ["./src/*"]
}
},
"references": [
{
"path": "./tsconfig.config.json"
}
]
}

Local/Browser Testing/Package.Json (local/browser-testing/package.json)

{
"name": "@~local/browser-testing",
"private": true,
"type": "module",
"version": "0.0.0",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"scripts": {
"postinstall": "tsc --project ./tsconfig.json"
}
}

Local/Browser Testing/Tsconfig.Json (local/browser-testing/tsconfig.json)

{
"extends": "@~local/tsconfig",
"compilerOptions": {
"outDir": "./dist/",
"baseUrl": "./src/",
"module": "ESNext",
"typeRoots": []
}
}

Local/Config/Package.Json (local/config/package.json)

{
"name": "@~local/config",
"type": "module",
"private": true,
"exports": {
"./resolve": "./src/resolve.json",
"./playwright": "./src/playwright.js",
"./playwright-coverage": "./src/playwright-coverage.js",
"./full-coverage": "./src/full-coverage.js",
"./vitest": "./src/vitest.js",
"./vitest-coverage": "./src/vitest-coverage.js"
},
"version": "0.0.0"
}

Local/Config/Src/Resolve.Json (local/config/src/resolve.json)

{
"extensions": [".tsx", ".ts", ".jsx", ".js", ".json"],
"styleExtensions": [".css", ".scss", ".sass"],
"directories": ["node_modules"],
"paths": {
"rollupTypes": {
"~/": ["/"]
}
}
}

Local/Esbuild/Package.Json (local/esbuild/package.json)

{
"name": "@~local/esbuild",
"private": true,
"sideEffects": false,
"main": "src/esbuild.js",
"type": "module"
}

Local/Full Coverage/Package.Json (local/full-coverage/package.json)

{
"name": "@~local/full-coverage",
"private": true,
"type": "module",
"bin": {
"full-coverage": "./bin/generateFullCoverage.js"
},
"dependencies": {
"nyc": "^15.1.0"
},
"version": "0.0.0"
}

Local/Playwright Tooling/Package.Json (local/playwright-tooling/package.json)

{
"name": "@~local/playwright-tooling",
"private": true,
"type": "module",
"main": "./src/index.js",
"module": "./src/index.js",
"bin": {
"playwright-merge-coverage": "./bin/mergeCoverage.js"
},
"dependencies": {
"@rollup/plugin-html": "^1.0.3",
"istanbul-lib-instrument": "^5.2.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-serve": "^2.0.0",
"rollup-plugin-styles": "^4.0.0"
},
"types": "index.d.ts",
"version": "0.0.0"
}

Local/Rollup/Package.Json (local/rollup/package.json)

{
"name": "@~local/rollup",
"private": true,
"type": "module",
"dependencies": {
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-virtual": "^3.0.1",
"autoprefixer": "^10.4.7",
"cssnano": "^5.1.12",
"glob": "^7.1.6",
"postcss": "^8.4.14",
"rollup-plugin-dts": "^5.3.1",
"rollup-plugin-esbuild-resolve": "^1.0.0",
"rollup-plugin-ignore-import": "^1.3.2",
"rollup-plugin-license": "^3.2.0",
"rollup-plugin-scss": "^3.0.0",
"rollup-plugin-tsconfig-paths": "^1.5.2",
"rollup-plugin-typescript2": "^0.32.1"
},
"exports": {
".": "./src/createRollupConfig.js",
"./plugin/rollupCopyPlugin": "./src/plugins/rollupCopyPlugin.js",
"./plugin/rollupPackageJsonPlugin": "./src/plugins/rollupPackageJsonPlugin.js"
},
"version": "0.0.0"
}

Local/Tailwind/Package.Json (local/tailwind/package.json)

{
"name": "@~local/tailwind",
"private": true,
"type": "module",
"main": "tailwind.config.js",
"devDependencies": {
"@tailwindcss/typography": "^0.5.7"
}
}

Local/Tsconfig/Package.Json (local/tsconfig/package.json)

{
"name": "@~local/tsconfig",
"private": true,
"type": "module",
"main": "./tsconfig.json",
"version": "0.0.0"
}

Local/Tsconfig/Tsconfig.Json (local/tsconfig/tsconfig.json)

{
"compilerOptions": {
"strict": true,
"allowJs": false,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"target": "ESNext",
"sourceMap": true,
"declaration": true,
"module": "ESNext",
"moduleResolution": "node",
"removeComments": false
}
}

Packages/Overlayscrollbars/CHANGELOG (packages/overlayscrollbars/CHANGELOG.md)

Changelog

2.16.0

Features

The package now contains an additional css file overlayscrollbars.scriptingenabled.css which uses the scripting: enabled media query to enable the data-overlayscrollbars-initialize styles. This ensures that native scrollbars stay visible when JavaScript is not executed. For browser backwards compatibility reasons this can't be the default. #751

Bug Fixes

Make sure the expensive "non default flow direction" check is not running when it shouldn't. #756

2.15.1

Improvements

The instance.sleep function will now also put the scrollbars.autoHide timer to sleep.

2.15.0

Features

The option options.scrollbars.clickScroll now also accepts a function which can be used to customize the click scroll behavior. #754
Added the instance.sleep function. Can be used to optimize performance or visual feedback. (for example during animations) #755

2.14.0

Features

Add the option options.update.flowDirectionStyles which allow to opt-out or customize when the expensive "non default flow direction" check is being performed. #729 #748

Bug Fixes

Work around browser rounding inaccuracies which prevented a proper detection of a "non default flow direction" for normal density screens. #625

2.13.0

Features

Add fine grained debounce options via options.update.debounce. The option is now an object which results in more freedom / fine grained debounce options. A debounce can now be specified for mutations, resizes, events and environmental changes independently. The old options.update.debounce option syntax is still supported and works but its deprecated in favor of the new syntax. #744 #729

2.12.0

Improvements

Improve accessibility when the native scrollbars can't be hidden. This can happen when the browser isn't supporting scrollbar styling & the ScrollbarsHidingPlugin is not being used. In this case the custom scrollbars aren't rendered over the native scrollbars anymore. SimpleBar #726

2.11.5

Bug Fixes

Sometimes when resizing the window, scrollbars applied to the body element werent updated accordingly.

2.11.4

Bug Fixes

Remove scrollbars click event when its no longer required. #720

2.11.3

Improvements

Introduce and document the new CSS Custom Properties: --os-viewport-overflow-x and --os-viewport-overflow-y which can be used to better control the overflow style of the viewport element.
Support for the auto value for overwrites of the overflow style of the viewport.

2.11.2

Improvements

Streamline css styles for the viewport and wrapper elements to allow overwrites of the overflow property. #718

Bug Fixes

Initialization bridging via data-overlayscrollbars-initialize attribute conflicted with the showNativeOverlaidScrollbars: true option when initialized to the body element. #713

2.11.1

Improvements

Use the ResizeObservers options.box option to remove the need for additional DOM elements in supported browsers.
Significant performance improvements in the update logic.

2.11.0

Features

Add the possibility to define a trusted type policy for websites with a CSP. #697

Improvements

Change ScrollAnimationTimeline keyframes to not animate css-custom-properties to improve scroll performance. #705

2.10.1

Improvements

Add pen to the list of "hoverable" pointer devices. #690

2.10.0

Features

The option scrollbars.clickScroll now supports the value 'instant'. The ClickScrollPlugin is not required for it to work. #645

Improvements

Rewrite clickScroll animation for better performance and to support in and out easing for a smoother animation.

2.9.2

Improvements

Improve initialization and update performance by determining if a non-default scroll direction is possible before measuring scroll coordinates. #655

2.9.1

Improvements

Resilience against scroll-behavior: smooth style when scrolling should be instant.

2.9.0

Features

Add the possibility to define a nonce value for websites with a CSP. #646

Improvements

Reduced bundle size due to removed compatiblity code.
clickScroll will not cancel on fast clicks / taps. #650
Add easing to the clickScroll animation.
The scrollbar-handle offset and size calculations are now entirely in CSS and will not force reflows.
Use custom css properties for setting the scrollbar-handle offset and size.

Bug Fixes

Only take the initial scroll coordinates from the viewport element if it has a scrollable overflow. (Otherwise take the initial scroll coordinates from the target element) #652

2.8.4

Improvements

The scrollbar handle size is now updated if the corresponding scrollbar element has an transition.

2.8.3

Improvements

Improvements to update performance.
Added automated e2e performance metrics.

2.8.2

Bug Fixes

Fix a bug where children attribute mutations were not picked up if the new attribute value was an empty string.

2.8.1

Improvements

Improve the scrollCoordinates logic introduced in v2.8.0 to have better defaults in cases of ambiguity.
The scroll event is not propagated if it is an result of scrollCoordinates detection during update.
Focus management improvements.

2.8.0

Breaking Changes

Although not a major release, I've decided to remove the rtlScrollBehavior field from the Environment object. The reason for it is a switch of how the library now detects scroll coordinates for non default flow directions. The replacement for this field is the scrollCoordinates field of the State object for each instance.

Features

Support non default flow directions (block and inline) not only direction: rtl. #625
A new field scrollCoordinates in the State object. It indicates the min. and max. scroll coordinates for the viewport. (useful for non default flow direction scrolling)
A new field scrollCoordinatesChanged in the updateHints object. It indicates whether the scroll coordinates changed in an update.

Improvements

Fix a Firefox only behavior where releasing a scrollbar handle over an anchor would trigger the anchor and navigate to it.
Change zoom detection: instead of the window.resize event, the window.matchMedia event is used.
Greatly improve how dragging and releasing the scrollbar handle behaves for scroll-snapped viewports.

Bug Fixes

Fix a bug here pointer capture was released too early for wacom pen devices. #630

2.7.3

Improvements

Use { preventScroll: true } when focusing viewport to prevent unwanted scrolling. #629
Make the scrollbars hidden when @media print applies. #628

2.7.2

Bug Fixes

Handle case where document.defaultView is null. #627

2.7.1

Improvements

When interacting with a scrollbar the viewport element gets focused under certain conditions. (Like e.g. the previously focused element is not and interactive element.)
Move the environment styles from the stylesheet into javascript to remove the requirement of loaded styles for correct functionality.

2.7.0

Improvements

Improvements for running in deno and bun.
Initialization as the body element is now detected as such when the tag name of the target element is "body". Previously this detection was done with target === target.ownerDocument.body which would not work when creating a new body element in memory.
If a non generated elements.viewport element is provided during initialization its scroll position will be taken as the initial scroll position instead of the scroll position of the target element.
When interacting with the scrollbars itself the scrollbars.autoHideDelay will now apply when the scrollbars would be auto hidden when the interaction ends.

2.6.1

Bug Fixes

Fully remove lingering IE11 compatibility code which overwrote previously set height styles.

2.6.0

Improvements

Add focusin and focusout to the focus and blur event management when wrapping and unwrapping elements. #605
The scrollbars.visibility option was unintuitive to use for adjusting visibility per axis. Its now only applied if the scrollbars scroll axis is able to have a scrollable overflow. #611

2.5.0

Breaking Changes

Although not a major release, I've decided to drop IE11 support in this version. This change should be beneficial to the majority of users.
- The size of the js bundle decreased by ~6%.
- The size of the css bundle decreased by ~18%.
- The fields flexboxGlue and cssCustomProperties are removed from the Environment. (returning object from OverlayScrollbars.env())

Improvements

Streamlining of scroll related calculations, including RTL direction.
Focus and Blur event management when wrapping and unwrapping elements during initialization and destroy. #605

2.4.7

Improvements

Adapt the exports field in the package.json for correct commonjs and module handling.
Additional types exports: Elements, State, CloneableScrollbarElements, ScrollbarElements, StaticInitialization and DynamicInitialization.
Remove obsolete styles when initializing OverlayScrollbars on the body element and the browser supports native scrollbar hiding. #601
Move code to the ScrollbarsHidingPlugin for better treeshaking.

2.4.6

Bug Fixes

If the pointer (mouse, pen etc.) is interacting with the scrollbar, the autoHide option will wait until the interaction is finished. #597
ScrollTimeline animations are not canceled anymore when they are updated. Instead the animations keyframe effect is switched out preventing flickering. #598

2.4.5

Improvements

Its now possible to have a height / width transition on the scrollbar-handle. #587

2.4.4

Bug Fixes

Fix a bug where ScrollTimeline animation keyframe could contain NaN or Infinity values triggering a warning. #581
Treat explicitly assigned undefined values for options as if they would be left out. #586

2.4.3

Bug Fixes

Bug where the instance wasn't updated when the window resized. #578

Improvements

Further improvements to the update strategy to make finer grained updates.

2.4.2

Improvements

Makes custom instance plugins compatible with "pure" environments such as react and all other component frameworks / libraries.

2.4.1

Improvements

Add compatibility exports field to package.json so the 'overlayscrollbars/styles/overlayscrollbars.css' import works in all node versions. #570

2.4.0

Features

Finalize and document the plugin system which makes it possible to create "static" and / or "instance" plugins.
The static OverlayScrollbars.plugin function returns a "static" plugins instance(s) for the registered plugins.
A new instance.plugin function which returns a "instance" plugins instance.
window resize events will now update instances only if it is needed and only what is needed.

Improvements

Small internal rewrite to improve stability, performance and bundle size.
Improvements the documentation and README.

2.3.2

Bug Fixes

The element.animate api is only called when the browser supports the ScrollTimeline API. #562

2.3.1

Bug Fixes

Fix direction rtl visual scrollbar handle behavior in browser which support the ScrollTimeline API.
Fix double tap behavior for interactive elements on iOS devices if autoHide is leave or move. #560 #285
Fix incorrect scrollbar handle calculation when overscroll on safari occurred. #559

2.3.0

Features

Make use of the new ScrollTimeline API in supported browsers.
Add the option scrollbars.autoHideSuspend to make it possible to suspend the autoHide functionality until the first scroll interaction was performed. The default value for this option is false for backwards compatibility reasons but is recommended to be true for better accessibility.
Add a CSS selector to bridge deferred initializations visually.

Bug Fixes

Fix a bug where a change wasn't detected properly when the target element was hidden initially. #546
Fixed a bug where the scroll offset was reset to 0 sometimes after initialization when the target was the body element.

Improvements

Add online examples to README.

2.2.1

Bug Fixes

Fix an issue where the viewport element could be wider than the host element. #538

Improvements

Instead of offsetWidth & offsetHeight use the corresponding properties from the getBoundingClientRect object to increase accuracy of scrollbar calculations. #542

2.2.0

Improvements

Force the scroll-behavior css property to be auto when the user interacts with a scrollbar to prevent smooth scrolling to apply where it shouldn't. #515
The viewort, padding and content elements don't use the class attribute anymore for their styling. Instead each of them uses its own data-overlayscrollbars-* attribute. This has been done so that 3rd party libraries aren't conflicting with classnames from overlayscrollbars or vice versa. Selectors like .os-viewport, .os-padding or .os-content won't work anymore. #526 #530

2.1.1

Bug Fixes

Fixed a bug where pointer events weren't released properly after drag or click scrolling. #512

Improvements

The os-theme-dark and os-theme-light themes now use border-box box-sizing as their default.
Improve the README.md documentation for initialization, styling and and the browser global version. #509

2.1.0

Bug Fixes

Fix a bug where initial RTL direction wasn't detected properly.

Features

Introduce CSS Custom Properties to improve theming and styling of scrollbars. #478

Improvements

Improve pointer event handling on scrollbar handle and track.
Improve the README documentation with a styling section.

2.0.3

Bug Fixes

Revert the viewport and padding style position: relative change introduced in v2.0.2 due to breaking behavior. #489 is considered a design limitation.

2.0.2

Bug Fixes

The viewport and padding elements won't have the style position: relative anymore if its not needed. The style is only needed for older browsers. (#489)

2.0.1

Bug Fixes

The custom scrollbars are now always hidden if the showNativeOverlaidScrollbars option is true.

Improvements

The initialization to the body element respects now overflow: hidden style overrides of the html and body element. (#477)
data-overlayscrollbars-initialize is now automatically removed if the instance is destroyed or canceled.
data-overlayscrollbars-initialize now always sets overflow: auto to prevent elements to be suddenly cropped after initialization.
removed obsolete !important styles

2.0.0

OverlayScrollbars was rewritten from the ground up in TypeScript in a functional manner.
The rewrite comes with multiple benefits:

The library is much smaller now (about 50% smaller fully treeshaken)
Modern browsers benefit greatly because compat code is inside plugins which are treeshaken if unused
Multiple performance optimizations were made due to the new structure
Framework Components benefit of the pure parameter for options and events (same input produces same output)
TypeScript definitions are always up to date (@types/overlayscrollbars is obsolete now)

New Features:

If applied to body all the native functionality in modern browsers (e.g. swipe down to refresh on mobile, scroll restoration etc.) is preserved (#376, #425, #273, #320)
If you scroll while the cursor hovers a scrollbar element the viewport is now scrolled (#128, #322)
The initialization process can be fully customized now. This makes it possible to itegrate with other plugins / libraries (#432, #304, #149, #148, #139, #49)
Scrollbars can be cloned and positioned anywhere in the DOM tree. (#404, #323, #158, #17)
The update behavior of the MutationObserver for the content can be customized with the update options. (#307, #183, #23)
Works now without adjustments with CSS-Grid, CSS-Flexbox etc.
Supports all kind of input devices additionally to mouse and touch. (Uses native pointer-events now)
Exports a esm version which can be treeshaken

Breaking changes:

Browser support changed. The minimal version is now IE11.
There is no default export anymore. The main entry point is now the OverlayScrollbars named export.
The styles are now exported under a different path. Read the docs for more info.
The scroll function is missing. (WIP will be added as a plugin)
Initialization to textarea element is not suppored. (WIP will be added as a plugin)
extensions are replaced with plugins. Plugins are more powerful but work nothing like extensions.
Any helper functions for extensions are removed.
TypesScript definitions changed completely.
CSS styles changed completely.
There is no jQuery version anymore and no jQuery compat functionality
The following changed for the initialization:
- Arrays of elements are not supported anymore. If you want to initialize the plugin to multiple elements, you have to loop over them.
- Since the initialization is now fully customizable, the plugin won't have special behavior anymore if it has children with os- classnames
- The third parameter are events now instead of eventsions since extensions are removed
The following options were removed / replaced / renamed:
- resize is removed
- sizeAutoCapable is removed (works always now)
- clipAlways is removed (works automatically now)
- normalizeRTL is removed since the scroll function isn't implemented yet there is nothing to normalize
- autoUpdate is removed since all browser support the MutationObserver api there is no need for customizing a update loop
- autoUpdateInterval is removed
- className is replaced with scrollbars.theme
- updateOnLoad is replaced with update.elementEvents
- nativeScrollbarsOverlaid.initialize is replaced with the Initialization concept. You can pass a object as target now where you can specify when to cancel the initialization of the plugin.
- nativeScrollbarsOverlaid.showNativeScrollbars: is renamed to showNativeOverlaidScrollbars
- scrollbars.dragScrolling is renamed to scrollbars.dragScroll
- scrollbars.clickScrolling is renamed to scrollbars.clickScroll and animates the scroll change only with the ClickScrollPlugin otherwise its instant
- scrollbars.touchSupport is replaced with scrollbars.pointers
- scrollbars.snapHandle is removed
- textarea is removed since textarea initialization isn't possible yet
- callbacks is removed / replaced with the events concept. You can pass listeners / callback separately to the options. The this context is now undefined as a replacement each event recieves the instance as its first argument.
  - onScrollStart is removed
  - onScrollStop is removed
  - onInitialized is replaced with the initialized event
  - onUpdated is replaced with the updated the
  - onDestroyed is replaced with the destroyed event
  - onScroll is replaced with the scroll event
  - onInitializationWithdrawn is replaced with the destroyed event (if the second argument canceled is true)
  - onOverflowChanged is replaced with the updated event (its second argument holds the information whether the overflow changed)
  - onOverflowAmountChanged is replaced with theupdated event (its second argument holds the information whether the overflow amount changed and how much)
  - onDirectionChanged is replaced with the updated event (its second argument holds the information whether the direction changed)
  - onContentSizeChanged is replaced with the updated event (its second argument holds the information whether the content got mutated)
  - onHostSizeChanged is replaced with the updated event (its second argument holds the information whether the host got mutated / its size changed)
The following instance methods were removed / replaced / renamed:
- sleep() is removed since it doesn't fit into the new structure and shouldn't be needed anymore
- ext() is removed
- addExt() is removed
- removeExt() is removed
- scroll() is removed (WIP)
- scrollStop() is removed (WIP)
- getElements() is renamed to elements() and doesn't support any argumens anymore.
- getState() is renamed to state() and doesn't support any argumens anymore.
The following static methods were removed / replaced / renamed:
- extension() is removed
- defaultOptions() is replaced with env().getDefaultOptions() and env().setDefaultOptions()
- globals() is replaced with env()
If you used any fields from the globals() result, please refer to the TypeScript definitions for the correct replacement in env()

Theming changes:

Because scrollbars can be cloned and positioned anywhere in the DOM, themes which worked in v1 have to be adapted slightly:
- .os-scrollbar elements now don't rely on its parent element. Selectors like .os-theme-dark > .os-scrollbar-vertical are now .os-theme-dark.os-scrollbar-vertical
- the .os-host-rtl class is replaced with .os-scrollbar-rtl. Selectors like .os-theme-dark.os-host-rtl > .os-scrollbar-horizontal are now .os-theme-dark.os-scrollbar-rtl.os-scrollbar-horizontal

Packages/Overlayscrollbars/Package.Json (packages/overlayscrollbars/package.json)

{
"name": "overlayscrollbars",
"private": true,
"type": "module",
"version": "2.16.0",
"description": "A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.",
"author": "Rene Haas | KingSora",
"license": "MIT",
"homepage": "https://kingsora.github.io/OverlayScrollbars",
"bugs": "https://github.com/KingSora/OverlayScrollbars/issues",
"repository": {
"type": "git",
"url": "https://github.com/KingSora/OverlayScrollbars.git",
"directory": "packages/overlayscrollbars"
},
"keywords": [
"overlayscrollbars",
"custom",
"styleable",
"scrollbar",
"scrollbars",
"scroll",
"frontend",
"browser"
],
"files": [
"src",
"dist",
"types",
"styles",
"README.md"
],
"main": "src/index.ts",
"module": "src/index.ts",
"types": "src/index.ts",
"exports": {
".": {
"import": {
"types": "./src/index.ts",
"default": "./src/index.ts"
},
"require": {
"types": "./src/index.ts",
"default": "./src/index.ts"
},
"default": {
"types": "./src/index.ts",
"default": "./src/index.ts"
}
},
"./overlayscrollbars.scss": "./src/index.scss",
"./overlayscrollbars.scriptingenabled.scss": "./src/index.scriptingenabled.scss"
},
"sideEffects": [
".css",
".scss",
"*.sass"
],
"devDependencies": {
"@rollup/plugin-terser": "^0.4.4",
"rollup-plugin-filesize": "^10.0.0"
},
"scripts": {
"build": "rollup -c",
"types": "tsc --emitDeclarationOnly -p tsconfig.types.json",
"test": "vitest run --coverage",
"test:dev": "vitest --coverage",
"e2e": "playwright test",
"e2e:dev": "playwright test --workers 1 --timeout 0 --global-timeout 0",
"vitest:node": "vitest run --coverage --project node",
"vitest:dom": "vitest run --coverage --project dom",
"posttest": "playwright-merge-coverage && full-coverage",
"postjest": "full-coverage",
"poste2e": "playwright-merge-coverage && full-coverage"
}
}

Packages/Overlayscrollbars/Tsconfig.Json (packages/overlayscrollbars/tsconfig.json)

{
"extends": "@~local/tsconfig",
"compilerOptions": {
"types": ["node"],
},
"exclude": ["dist"]
}

Packages/Overlayscrollbars/Tsconfig.Types.Json (packages/overlayscrollbars/tsconfig.types.json)

{
"extends": "./tsconfig.json",
"compilerOptions": {
"rootDir": "./src/",
"outDir": "./types",
"declaration": true
},
"include": ["src/**/*"]
}

Packages/Overlayscrollbars/Test/Package.Json (packages/overlayscrollbars/test/package.json)

{
"private": true,
"type": "module",
"sideEffects": true
}

Packages/Overlayscrollbars/Test/Tsconfig.Json (packages/overlayscrollbars/test/tsconfig.json)

{
"extends": "../tsconfig.json",
"compilerOptions": {
"baseUrl": "../",
"paths": {
"~/": ["./src/"]
},
"types": ["node"]
}
}

Packages/Overlayscrollbars/Test/Playwright/Setups/StructureSetup/EnterExitAnimation/App/Package.Json (packages/overlayscrollbars/test/playwright/setups/structureSetup/enterExitAnimation/app/package.json)

{
"name": "enter-exit-animation",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite build -w",
"build": "vite build"
},
"dependencies": {
"vue": "latest"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.5",
"vite": "^8.0.7"
}
}

Packages/Overlayscrollbars Ngx/README (packages/overlayscrollbars-ngx/README.md)

[Website](https://kingsora.github.io/OverlayScrollbars) • [Examples](https://kingsora.github.io/OverlayScrollbars/examples)

OverlayScrollbars for Angular

This is the official OverlayScrollbars Angular wrapper.

Installation

npm install overlayscrollbars-ngx

Peer Dependencies

OverlayScrollbars for Angular has the following peer dependencies:

The vanilla JavaScript library: overlayscrollbars

text

npm install overlayscrollbars

The Angular framework: @angular/core & @angular/common

text

npm install @angular/core @angular/common

Usage

The first step is to import the CSS file into your app:

import 'overlayscrollbars/overlayscrollbars.css';

Note: If the path 'overlayscrollbars/overlayscrollbars.css' is not working use 'overlayscrollbars/styles/overlayscrollbars.css' as the import path for the CSS file.

The module can be imported like:

import { NgModule } from "@angular/core";
import { OverlayscrollbarsModule } from "overlayscrollbars-ngx";

@NgModule({
  imports: [OverlayscrollbarsModule],
})
export class AppModule {}

Component

The main entry point is the OverlayScrollbarsComponent which can be used in your application as a component:

import { OverlayScrollbarsComponent } from "overlayscrollbars-ngx";

The component can be used with two different selectors:

html

<overlay-scrollbars [defer]="true">
  The tag isn't important
</overlay-scrollbars>

<section overlay-scrollbars [defer]="true">
  Choose the tag
</section>

Properties

The component accepts all properties of regular elements such as div and span.
Additionally it has custom optional properties:

options: accepts an object which represents the OverlayScrollbars options.
events: accepts an object which represents the OverlayScrollbars events.
defer: accepts an boolean or object. Defers the initialization to a point in time when the browser is idle.

Note: Its highly recommended to use the defer option whenever possible to defer the initialization to a browser's idle period.

html

<overlay-scrollbars
  [options]="{ scrollbars: { autoHide: 'scroll' } }"
  [events]="{ scroll: () => { /* ... */ } }"
  [defer]="true"
></overlay-scrollbars>

Events

Additionally to the events property the OverlayScrollbarsComponent emits "native" Angular events. To prevent name collisions with DOM events the events have a os prefix.

Note: It doesn't matter whether you use the events property or the Angular events or both.

html

All events are typed, but you can use the EventListenerArgs type as utility in case its needed:

import type { EventListenerArgs } from 'overlayscrollbars';

// example listener
const onUpdated = ([instance, onUpdatedArgs]: EventListenerArgs['updated']) => {}

Ref

The ref of the OverlayScrollbarsComponent will give you an object with which you can access the OverlayScrollbars instance and the root element of the component.
The ref object has two properties:

osInstance: a function which returns the OverlayScrollbars instance.
getElement: a function which returns the root element.

Directive

In case the OverlayScrollbarsComponent is not enough, you can also use the OverlayScrollbarsDirective directive:

import { OverlayScrollbarsDirective } from "overlayscrollbars-ngx";

html

The directive is for advanced usage and lets you control the whole initialization process. This is useful if you want to integrate it with other plugins.

Note: The directive won't initialize OverlayScrollbars on its own. You have to call the initialize function.

Properties

Properties are optional and similar to the OverlayScrollbarsComponent.

options: accepts an object which represents the OverlayScrollbars options.
events: accepts an object which represents the OverlayScrollbars events.
defer: accepts an boolean or object. Defers the initialization to a point in time when the browser is idle.

Instance

The OverlayScrollbarsDirective exposes two functions:

osInitialize takes one argument which is the InitializationTarget.
osInstance returns the current OverlayScrollbars instance or null if not initialized.

License

MIT

Packages/Overlayscrollbars Ngx/Angular.Json (packages/overlayscrollbars-ngx/angular.json)

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": ".",
"projects": {
"overlayscrollbars-ngx": {
"projectType": "library",
"root": "",
"sourceRoot": "src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "test/test.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js"
}
}
}
}
}
}

Packages/Overlayscrollbars Ngx/CHANGELOG (packages/overlayscrollbars-ngx/CHANGELOG.md)

Changelog

0.5.2

Bug Fix

Fix ngOnDestroy in case there is no active instance. #670

0.5.1

Bug Fix

Correctly resolve the entry file(s) in the package.json.

0.5.0

Added the possibility to defer the initialization to a point in time when the browser is idle. (or to the next frame if window.requestIdleCallback is not supported)

OverlayScrollbarsComponent and OverlayScrollbarsDirective accept now the defer property
Events are now run in the NgZone #516

Breaking Changes

Because initialization can be deferred now, the osInitialize function of the OverlayScrollbarsDirective isn't returning the instance anymore. Use the osInstance function of the OverlayScrollbarsDirective instead.
Depends now on Angular version >=13.0.0.

0.4.0

Depends on OverlayScrollbars version ^2.0.0 and Angular version >=12.0.0.

Features

The selector for the OverlayScrollbarsComponent is now overlay-scrollbars or [overlay-scrollbars]
OverlayScrollbarsComponent has now the events property
OverlayScrollbarsComponent emits now all OverlayScrollbars events as "native" Angular events
The OverlayScrollbarsDirective was added for advanced usage

Breaking Changes

The extensions property is removed from OverlayScrollbarsComponent
The osTarget() function from the OverlayScrollbarsComponent ref is renamed to getElement()

Packages/Overlayscrollbars Ngx/Ng Package.Json (packages/overlayscrollbars-ngx/ng-package.json)

{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"dest": "./dist",
"lib": {
"entryFile": "src/public-api.ts"
}
}

Packages/Overlayscrollbars Ngx/Package.Json (packages/overlayscrollbars-ngx/package.json)

{
"name": "overlayscrollbars-ngx",
"private": true,
"version": "0.5.2",
"description": "OverlayScrollbars for Angular.",
"author": "Rene Haas | KingSora",
"license": "MIT",
"homepage": "https://kingsora.github.io/OverlayScrollbars",
"bugs": "https://github.com/KingSora/OverlayScrollbars/issues",
"repository": {
"type": "git",
"url": "https://github.com/KingSora/OverlayScrollbars.git",
"directory": "packages/overlayscrollbars-ngx"
},
"keywords": [
"overlayscrollbars",
"angular",
"angular2",
"ngx",
"component",
"directive",
"styleable",
"custom",
"scrollbar",
"scrollbars",
"scroll"
],
"peerDependencies": {
"@angular/common": ">=13.0.0",
"@angular/core": ">=13.0.0",
"overlayscrollbars": "^2.0.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^13.0.0",
"@angular/animations": "^13.0.0",
"@angular/cli": "^13.0.0",
"@angular/common": "^13.0.0",
"@angular/compiler": "^13.0.0",
"@angular/compiler-cli": "^13.0.0",
"@angular/core": "^13.0.0",
"@angular/forms": "^13.0.0",
"@angular/platform-browser": "^13.0.0",
"@angular/platform-browser-dynamic": "^13.0.0",
"@angular/router": "^13.0.0",
"@types/jasmine": "~4.0.0",
"jasmine-core": "~4.3.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"ng-packagr": "^13.0.0",
"overlayscrollbars": "file:./../overlayscrollbars/dist",
"rxjs": "^7.4.0",
"typescript": ">=4.4.2 <4.7",
"zone.js": "~0.11.4"
},
"dependencies": {
"tslib": "^2.4.0"
},
"scripts": {
"build": "ng build overlayscrollbars-ngx",
"test": "ng test --watch=false --sourceMap=false --browsers=ChromeHeadlessCI --code-coverage"
},
"sideEffects": false
}

Packages/Overlayscrollbars Ngx/Tsconfig.Json (packages/overlayscrollbars-ngx/tsconfig.json)

/* To learn more about this file see: https://angular.io/config/tsconfig. /
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/": ["./src/*"]
},
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2015",
"module": "es2020",
"lib": ["ES2015", "dom"]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

Packages/Overlayscrollbars Ngx/Tsconfig.Lib.Json (packages/overlayscrollbars-ngx/tsconfig.lib.json)

/* To learn more about this file see: https://angular.io/config/tsconfig. /
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/lib",
"declaration": true,
"declarationMap": true,
"inlineSources": true,
"types": []
},
"exclude": ["test/test.ts", "**/.spec.ts"]
}

Packages/Overlayscrollbars Ngx/Tsconfig.Lib.Prod.Json (packages/overlayscrollbars-ngx/tsconfig.lib.prod.json)

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.lib.json",
"compilerOptions": {
"declarationMap": false
},
"angularCompilerOptions": {
"compilationMode": "partial"
}
}

Packages/Overlayscrollbars Ngx/Tsconfig.Spec.Json (packages/overlayscrollbars-ngx/tsconfig.spec.json)

/* To learn more about this file see: https://angular.io/config/tsconfig. /
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"skipLibCheck": true,
"types": ["jasmine"]
},
"files": ["test/test.ts"],
"include": ["**/.spec.ts", "**/*.d.ts"]
}

Packages/Overlayscrollbars React/README (packages/overlayscrollbars-react/README.md)

[Website](https://kingsora.github.io/OverlayScrollbars) • [Examples](https://kingsora.github.io/OverlayScrollbars/examples)

OverlayScrollbars for React

This is the official OverlayScrollbars React wrapper.

Installation

npm install overlayscrollbars-react

Peer Dependencies

OverlayScrollbars for React has the following peer dependencies:

The vanilla JavaScript library: overlayscrollbars

text

npm install overlayscrollbars

The React framework: react

text

npm install react

Usage

The first step is to import the CSS file into your app:

import 'overlayscrollbars/overlayscrollbars.css';

Note: If the path 'overlayscrollbars/overlayscrollbars.css' is not working use 'overlayscrollbars/styles/overlayscrollbars.css' as the import path for the CSS file.

Component

The main entry point is the OverlayScrollbarsComponent which can be used in your application as a component:

jsx

import { OverlayScrollbarsComponent } from "overlayscrollbars-react";

// ...

<OverlayScrollbarsComponent defer>
  example content
</OverlayScrollbarsComponent>

Properties

The component accepts all properties of regular elements such as div and span.
Additionally it has custom optional properties:

element: accepts a string which represents the tag of the root element.
options: accepts an object which represents the OverlayScrollbars options.
events: accepts an object which represents the OverlayScrollbars events.
defer: accepts an boolean or object. Defers the initialization to a point in time when the browser is idle.

Note: None of the properties has to be memoized.

Note: Its highly recommended to use the defer option whenever possible to defer the initialization to a browser's idle period.

jsx

// example usage
<OverlayScrollbarsComponent
  element="span"
  options={{ scrollbars: { autoHide: 'scroll' } }}
  events={{ scroll: () => { /* ... */ } }}
  defer
/>

Ref

osInstance: a function which returns the OverlayScrollbars instance.
getElement: a function which returns the root element.

Hook

In case the OverlayScrollbarsComponent is not enough, you can also use the useOverlayScrollbars hook:

jsx

import { useOverlayScrollbars } from "overlayscrollbars-react";

// example usage
const Component = () => {
  const ref = useRef();
  const [initialize, instance] = useOverlayScrollbars({ options, events, defer });
  
  useEffect(() => {
    initialize(ref.current);
  }, [initialize]);
  
  return 
}

The hook is for advanced usage and lets you control the whole initialization process. This is useful if you want to integrate it with other plugins such as react-window or react-virtualized.

The hook will destroy the instance automatically if the component unmounts.

Parameters

Parameters are optional and similar to the OverlayScrollbarsComponent.
Its an object with optional properties:

options: accepts an object which represents the OverlayScrollbars options.
events: accepts an object which represents the OverlayScrollbars events.
defer: accepts an boolean or object. Defers the initialization to a point in time when the browser is idle.

Return

The useOverlayScrollbars hook returns a tuple with two values:

The first value is the initialization function, it takes one argument which is the InitializationTarget.
The second value is a function which returns the current OverlayScrollbars instance or null if not initialized.

Note: The identity of both functions is stable and won't change, thus they can safely be used in any dependency array.

License

MIT

Packages/Overlayscrollbars React/CHANGELOG (packages/overlayscrollbars-react/CHANGELOG.md)

Changelog

0.5.6

Improvements

The OverlayScrollbarsComponent now properly supports 'body' as its element tag.

0.5.5

Improvements

Improve the type definitions with the usage of the ElementType type instead of the JSX namespace of the @types/react package in order to improve compatibility to older react versions.

0.5.4

Improvements

Adapt the exports field in the package.json for correct commonjs and module handling.

0.5.3

Bug Fixes

Make sure component is stateless and children won't update more often than needed. (#565)

0.5.2

Improve Server Side Rendering behavior by creating additional markup only on the client with the hydration phase.
Improve deferred initialization where the time between created markup and actual initialization is masked with CSS.

0.5.1

The package.json has now an appropriate exports field to optimize builds in modern bundlers.

0.5.0

Features

Added the possibility to defer the initialization to a point in time when the browser is idle. (or to the next frame if window.requestIdleCallback is not supported)

OverlayScrollbarsComponent accepts now the defer property
useOverlayScrollbars params accept now the defer property
useOverlayScrollbars will now always try to destroy the instance if the component unmounts.

Breaking Changes

Because initialization can be deferred now, the initialize function of the useOverlayScrollbars hook isn't returning the instance anymore. Use the instance function of the useOverlayScrollbars hook instead.

0.4.0

Depends on OverlayScrollbars version ^2.0.0 and React version >=16.8.0.
The component was rewritten using hooks. (#218)

Features

OverlayScrollbarsComponent accepts now the events property
OverlayScrollbarsComponent accepts now the element property
The useOverlayScrollbars hook was added for advanced usage

Breaking Changes

The extensions property is removed from OverlayScrollbarsComponent
The osTarget() function from the OverlayScrollbarsComponent ref is renamed to getElement()

Packages/Overlayscrollbars React/Package.Json (packages/overlayscrollbars-react/package.json)

{
"name": "overlayscrollbars-react",
"private": true,
"type": "module",
"version": "0.5.6",
"description": "OverlayScrollbars for React.",
"author": "Rene Haas | KingSora",
"license": "MIT",
"homepage": "https://kingsora.github.io/OverlayScrollbars",
"bugs": "https://github.com/KingSora/OverlayScrollbars/issues",
"repository": {
"type": "git",
"url": "https://github.com/KingSora/OverlayScrollbars.git",
"directory": "packages/overlayscrollbars-react"
},
"keywords": [
"overlayscrollbars",
"react",
"component",
"hook",
"hooks",
"styleable",
"custom",
"scrollbar",
"scrollbars",
"scroll"
],
"main": "./src/overlayscrollbars-react.ts",
"module": "./src/overlayscrollbars-react.ts",
"types": "./src/overlayscrollbars-react.ts",
"peerDependencies": {
"react": ">=16.8.0",
"overlayscrollbars": "^2.0.0"
},
"devDependencies": {
"@testing-library/react": "^16.0.0",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^4.2.1",
"overlayscrollbars": "file:./../overlayscrollbars/dist",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"scripts": {
"build": "run-p build-js build-types",
"build-js": "vite build",
"build-types": "tsc --emitDeclarationOnly -p tsconfig.types.json",
"test": "vitest run --coverage"
},
"sideEffects": false
}

Packages/Overlayscrollbars React/Tsconfig.Json (packages/overlayscrollbars-react/tsconfig.json)

{
"compilerOptions": {
"target": "ES6",
"allowSyntheticDefaultImports": true,
"lib": ["dom", "dom.iterable", "esnext"],
"strict": true,
"module": "ES2015",
"moduleResolution": "node",
"jsx": "preserve"
}
}

Packages/Overlayscrollbars React/Tsconfig.Types.Json (packages/overlayscrollbars-react/tsconfig.types.json)

{
"extends": "./tsconfig.json",
"compilerOptions": {
"rootDir": "./src/",
"outDir": "./dist/types",
"declaration": true
},
"include": ["src/**/*"]
}

Packages/Overlayscrollbars React/Test/Tsconfig.Json (packages/overlayscrollbars-react/test/tsconfig.json)

{
"extends": "../tsconfig.json",
"compilerOptions": {
"jsx": "react-jsx",
"types": ["@testing-library/jest-dom"]
}
}

Packages/Overlayscrollbars Solid/README (packages/overlayscrollbars-solid/README.md)

[Website](https://kingsora.github.io/OverlayScrollbars) • [Examples](https://kingsora.github.io/OverlayScrollbars/examples)

OverlayScrollbars for Solid

This is the official OverlayScrollbars Solid wrapper.

Installation

npm install overlayscrollbars-solid

Peer Dependencies

OverlayScrollbars for Solid has the following peer dependencies:

The vanilla JavaScript library: overlayscrollbars

text

npm install overlayscrollbars

The Solid framework: solid-js

text

npm install solid-js

Usage

The first step is to import the CSS file into your app:

import 'overlayscrollbars/overlayscrollbars.css';

Note: If the path 'overlayscrollbars/overlayscrollbars.css' is not working use 'overlayscrollbars/styles/overlayscrollbars.css' as the import path for the CSS file.

Component

The main entry point is the OverlayScrollbarsComponent which can be used in your application as a component:

jsx

import { OverlayScrollbarsComponent } from "overlayscrollbars-solid";

// ...

<OverlayScrollbarsComponent defer>
  example content
</OverlayScrollbarsComponent>

Properties

The component accepts all properties of regular elements such as div and span.
Additionally it has custom optional properties:

element: accepts a string which represents the tag of the root element.
options: accepts an object which represents the OverlayScrollbars options.
events: accepts an object which represents the OverlayScrollbars events.
defer: accepts an boolean or object. Defers the initialization to a point in time when the browser is idle.

Note: Its highly recommended to use the defer option whenever possible to defer the initialization to a browser's idle period.

jsx

// example usage
<OverlayScrollbarsComponent
  element="span"
  options={{ scrollbars: { autoHide: 'scroll' } }}
  events={{ scroll: () => { /* ... */ } }}
  defer
/>

Ref

osInstance: a function which returns the OverlayScrollbars instance.
getElement: a function which returns the root element.

jsx

// example usage
import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-solid';

const Component = () => {
  let ref: OverlayScrollbarsComponentRef | undefined;

  return <OverlayScrollbarsComponent ref={(r) => (ref = r)} />
}

Primitive

In case the OverlayScrollbarsComponent is not enough, you can also use the createOverlayScrollbars primitive:

jsx

import { createOverlayScrollbars } from "overlayscrollbars-solid";

// example usage
const Component = () => {
  let div;
  const [params, setParams] = createStore({ options, events, defer });
  const [initialize, instance] = createOverlayScrollbars(params);

  /** 
   * or:
   * 
   * const [params, setParams] = createSignal({});
   * const [initialize, instance] = createOverlayScrollbars(params);
   * 
   * or:
   * 
   * const [options, setOptions] = createSignal();
   * const [events, setEvents] = createSignal();
   * const [defer, setDefer] = createSignal();
   * const [initialize, instance] = createOverlayScrollbars({
   *   options,
   *   events,
   *   defer,
   * });
   * 
   */

  onMount(() => {
    initialize({ target: div });
  });

  return 
}

The primitive is for advanced usage and lets you control the whole initialization process. This is useful if you want to integrate it with other plugins.

Parameters

Parameters are optional and similar to the OverlayScrollbarsComponent.
Its an object with optional properties:

options: accepts an object which represents the OverlayScrollbars options.
events: accepts an object which represents the OverlayScrollbars events.
defer: accepts an boolean or object. Defers the initialization to a point in time when the browser is idle.

Note: The object can be a normal, store or signal object. This also applies to all fields.

Return

The createOverlayScrollbars primitive returns a tuple with two values:

The first value is the initialization function, it takes one argument which is the InitializationTarget.
The second value is a function which returns the current OverlayScrollbars instance or null if not initialized.

License

MIT

Packages/Overlayscrollbars Solid/CHANGELOG (packages/overlayscrollbars-solid/CHANGELOG.md)

Changelog

0.5.6

Bug Fixes

Use the children helper function outside of jsx scope so components aren't re-rendered in conditional rendering. #700

0.5.5

Improvements

The OverlayScrollbarsComponent now properly supports 'body' as its element tag.

0.5.4

Improvements

Improve the type definitions with the usage of the ValidComponent type.

0.5.3

Improvements

Adapt the exports field in the package.json for correct commonjs and module handling.

0.5.2

Bug Fixes

Make sure component is stateless and children won't update more often than needed.

0.5.1

Improve Server Side Rendering behavior by creating additional markup only on the client with the hydration phase.
Improve deferred initialization where the time between created markup and actual initialization is masked with CSS.

0.5.0

Bug Fixes

Fixed SSR compatibility with solid-start.

Features

Added the possibility to defer the initialization to a point in time when the browser is idle. (or to the next frame if window.requestIdleCallback is not supported)

OverlayScrollbarsComponent accepts now the defer property
createOverlayScrollbars params accept now the defer property
createOverlayScrollbars will now always try to destroy the instance if the component unmounts.

Breaking Changes

Because initialization can be deferred now, the initialize function of the createOverlayScrollbars primitive isn't returning the instance anymore. Use the instance function of the createOverlayScrollbars primitive instead.

0.4.0

The component was created.
Depends on OverlayScrollbars version ^2.0.0 and Solid version ^1.5.1.

Packages/Overlayscrollbars Solid/Package.Json (packages/overlayscrollbars-solid/package.json)

{
"name": "overlayscrollbars-solid",
"private": true,
"type": "module",
"version": "0.5.6",
"description": "OverlayScrollbars for Solid.",
"author": "Rene Haas | KingSora",
"license": "MIT",
"homepage": "https://kingsora.github.io/OverlayScrollbars",
"bugs": "https://github.com/KingSora/OverlayScrollbars/issues",
"repository": {
"type": "git",
"url": "https://github.com/KingSora/OverlayScrollbars.git",
"directory": "packages/overlayscrollbars-solid"
},
"keywords": [
"overlayscrollbars",
"solid",
"solidjs",
"component",
"hook",
"hooks",
"primitive",
"styleable",
"custom",
"scrollbar",
"scrollbars",
"scroll"
],
"main": "./src/overlayscrollbars-solid.ts",
"module": "./src/overlayscrollbars-solid.ts",
"types": "./src/overlayscrollbars-solid.ts",
"peerDependencies": {
"overlayscrollbars": "^2.0.0",
"solid-js": "^1.7.0"
},
"devDependencies": {
"@solidjs/testing-library": "^0.8.9",
"overlayscrollbars": "file:./../overlayscrollbars/dist",
"solid-js": "^1.7.0",
"typescript": "^5.0.0",
"vite-plugin-solid": "^2.11.1"
},
"scripts": {
"build": "vite build",
"test": "vitest run --coverage"
},
"sideEffects": false
}

Packages/Overlayscrollbars Solid/Tsconfig.Json (packages/overlayscrollbars-solid/tsconfig.json)

{
"extends": "@~local/tsconfig",
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"isolatedModules": true
}
}

Packages/Overlayscrollbars Solid/Test/Tsconfig.Json (packages/overlayscrollbars-solid/test/tsconfig.json)

{
"extends": "../tsconfig.json",
"compilerOptions": {
"types": ["@testing-library/jest-dom"]
}
}

Packages/Overlayscrollbars Svelte/README (packages/overlayscrollbars-svelte/README.md)

[Website](https://kingsora.github.io/OverlayScrollbars) • [Examples](https://kingsora.github.io/OverlayScrollbars/examples)

OverlayScrollbars for Svelte

This is the official OverlayScrollbars Svelte wrapper.

Installation

npm install overlayscrollbars-svelte

Peer Dependencies

OverlayScrollbars for Svelte has the following peer dependencies:

The vanilla JavaScript library: overlayscrollbars

text

npm install overlayscrollbars

The Svelte framework: svelte

text

npm install svelte

Usage

The first step is to import the CSS file into your app:

import 'overlayscrollbars/overlayscrollbars.css';

Note: If the path 'overlayscrollbars/overlayscrollbars.css' is not working use 'overlayscrollbars/styles/overlayscrollbars.css' as the import path for the CSS file.

Component

The main entry point is the OverlayScrollbarsComponent which can be used in your application as a component:

svelte

<script>
import { OverlayScrollbarsComponent } from "overlayscrollbars-svelte";

// ...
</script>

<OverlayScrollbarsComponent defer>
  example content
</OverlayScrollbarsComponent>

Properties

The component accepts all properties of regular elements such as div and span.
Additionally it has custom optional properties:

element: accepts a string which represents the tag of the root element.
options: accepts an object which represents the OverlayScrollbars options.
events: accepts an object which represents the OverlayScrollbars events.
defer: accepts an boolean or object. Defers the initialization to a point in time when the browser is idle.

Note: Its highly recommended to use the defer option whenever possible to defer the initialization to a browser's idle period.

svelte

<OverlayScrollbarsComponent
  element="span"
  options={{ scrollbars: { autoHide: 'scroll' } }}
  events={{ scroll: () => { /* ... */ } }}
  defer
/>

Events

Additionally to the events property the OverlayScrollbarsComponent emits "native" Svelte events. To prevent name collisions with DOM events the events have a os prefix.

Note: Events are still supported even though they are are deprecated. This was done to ease migration and will be removed in a future release. Please use the events option instead.

svelte

<OverlayScrollbarsComponent
  on:osInitialized={onInitialized}
  on:osUpdated={onUpdated}
  on:osDestroyed={onDestroyed}
  on:osScroll={onScroll}
/>

All events are typed, but you can use the EventListenerArgs type as utility in case its needed:

import type { EventListenerArgs } from 'overlayscrollbars';

// example listener
const onUpdated = (event) => {
  const [instance, onUpdatedArgs] = event.detail as EventListenerArgs['updated'];
}

Ref

osInstance: a function which returns the OverlayScrollbars instance.
getElement: a function which returns the root element.

Primitive

In case the OverlayScrollbarsComponent is not enough, you can also use the useOverlayScrollbars primitive:

svelte

<script>
  import { useOverlayScrollbars } from 'overlayscrollbars-svelte';
  import { onMount } from 'svelte';

  let div = $state();
  let params = $state$({ options, events, defer });
  const [initialize, instance] = useOverlayScrollbars(() => params);

  /** 
   * or:
   * 
   * let options = $state$();
   * let events = $state();
   * let defer = $state();
   * const [initialize, instance] = useOverlayScrollbars({
   *   options: () => options,
   *   events: () => events,
   *   defer: () => defer,
   * });
   * 
   */

  onMount(() => {
    initialize({ target: div });
  });
</script>

The primitive is for advanced usage and lets you control the whole initialization process. This is useful if you want to integrate it with other plugins.

Parameters

Parameters are optional and similar to the OverlayScrollbarsComponent.
Its an object with optional properties:

options: accepts an object which represents the OverlayScrollbars options.
events: accepts an object which represents the OverlayScrollbars events.
defer: accepts an boolean or object. Defers the initialization to a point in time when the browser is idle.

Note: You can also pass a function as parameter which returns the object in case the object itself is reactive. This also applies to all fields.

Return

The useOverlayScrollbars primitive returns a tuple with two values:

The first value is the initialization function, it takes one argument which is the InitializationTarget.
The second value is a function which returns the current OverlayScrollbars instance or null if not initialized.

License

MIT

Packages/Overlayscrollbars Svelte/CHANGELOG (packages/overlayscrollbars-svelte/CHANGELOG.md)

Changelog

0.5.5

The whole package was rewritten to support Svelte 5.

Breaking Changes

Svelte 5 is now the only supported svelte version. Support for Svelte 4 and Svelte 3 was dropped.

Features

The OverlayScrollbarsComponent properties are now generic depending on its element type.
The OverlayScrollbarsComponent now accepts a custom Svelte Component as element.
The OverlayScrollbarsComponent still supports events even though they are deprecated. This was done to ease migration and will be removed in a future release.
A new primitive called useOverlayScrollbars which allows for more flexibility in case the OverlayScrollbarsComponent is not enough.

0.5.4

Improvements

The OverlayScrollbarsComponent now properly supports 'body' as its element tag.

0.5.3

Improvements

Adapt the exports field in the package.json for correct commonjs and module handling.

0.5.2

Bug Fixes

Make sure component is stateless and children won't update more often than needed.

0.5.1

Improve Server Side Rendering behavior by creating additional markup only on the client with the hydration phase.
Improve deferred initialization where the time between created markup and actual initialization is masked with CSS.

0.5.0

Added the possibility to defer the initialization to a point in time when the browser is idle. (or to the next frame if window.requestIdleCallback is not supported)

support for svelte v4
OverlayScrollbarsComponent accepts now the defer property

0.4.0

The component was created.
Depends on OverlayScrollbars version ^2.0.0 and Svelte version ^3.44.0.

Packages/Overlayscrollbars Svelte/Package.Json (packages/overlayscrollbars-svelte/package.json)

{
"name": "overlayscrollbars-svelte",
"private": true,
"type": "module",
"version": "0.5.5",
"description": "OverlayScrollbars for Svelte.",
"author": "Rene Haas | KingSora",
"license": "MIT",
"homepage": "https://kingsora.github.io/OverlayScrollbars",
"bugs": "https://github.com/KingSora/OverlayScrollbars/issues",
"repository": {
"type": "git",
"url": "https://github.com/KingSora/OverlayScrollbars.git",
"directory": "packages/overlayscrollbars-svelte"
},
"keywords": [
"overlayscrollbars",
"svelte",
"component",
"styleable",
"custom",
"scrollbar",
"scrollbars",
"scroll"
],
"main": "./src/overlayscrollbars-svelte.ts",
"module": "./src/overlayscrollbars-svelte.ts",
"types": "./src/overlayscrollbars-svelte.ts",
"exports": {
".": {
"types": "./src/overlayscrollbars-svelte.ts",
"svelte": "./src/overlayscrollbars-svelte.ts",
"default": "./src/overlayscrollbars-svelte.ts"
}
},
"peerDependencies": {
"overlayscrollbars": "^2.0.0",
"svelte": "^5.0.0"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^4.0.0",
"@sveltejs/kit": "^2.17.1",
"@sveltejs/package": "^2.3.10",
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@testing-library/svelte": "^5.2.7",
"overlayscrollbars": "file:./../overlayscrollbars/dist",
"svelte": "^5.0.0",
"svelte-check": "^4.1.4",
"svelte-preprocess": "^6.0.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0"
},
"scripts": {
"build": "svelte-kit sync && svelte-package -i src -o dist && vite build",
"test": "vitest run --coverage"
},
"sideEffects": false
}

Packages/Overlayscrollbars Svelte/Tsconfig.Json (packages/overlayscrollbars-svelte/tsconfig.json)

{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"noEmit": true
},
"include": ["/*.ts", "/.mts", "**/.cts", "**/*.d.ts"]
}

Packages/Overlayscrollbars Svelte/Test/Tsconfig.Json (packages/overlayscrollbars-svelte/test/tsconfig.json)

{
"extends": "../tsconfig.json",
"compilerOptions": {
"types": ["@testing-library/jest-dom"]
}
}

Packages/Overlayscrollbars Vue/README (packages/overlayscrollbars-vue/README.md)

[Website](https://kingsora.github.io/OverlayScrollbars) • [Examples](https://kingsora.github.io/OverlayScrollbars/examples)

OverlayScrollbars for Vue

This is the official OverlayScrollbars Vue wrapper.

Installation

npm install overlayscrollbars-vue

Peer Dependencies

OverlayScrollbars for Vue has the following peer dependencies:

The vanilla JavaScript library: overlayscrollbars

text

npm install overlayscrollbars

The Vue framework: vue

text

npm install vue

Usage

The first step is to import the CSS file into your app:

import 'overlayscrollbars/overlayscrollbars.css';

Note: If the path 'overlayscrollbars/overlayscrollbars.css' is not working use 'overlayscrollbars/styles/overlayscrollbars.css' as the import path for the CSS file.

Component

The main entry point is the OverlayScrollbarsComponent which can be used in your application as a component:

jsx

import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";

// ...

<OverlayScrollbarsComponent defer>
  example content
</OverlayScrollbarsComponent>

Properties

It has optional properties:

element: accepts a string which represents the tag of the root element.
options: accepts an object which represents the OverlayScrollbars options.
events: accepts an object which represents the OverlayScrollbars events.
defer: accepts an boolean or object. Defers the initialization to a point in time when the browser is idle.

Note: Its highly recommended to use the defer option whenever possible to defer the initialization to a browser's idle period.

jsx

// example usage
<OverlayScrollbarsComponent
  element="span"
  options={{ scrollbars: { autoHide: 'scroll' } }}
  events={{ scroll: () => { /* ... */ } }}
  defer
/>

Events

Additionally to the events property the OverlayScrollbarsComponent emits "native" Vue events. To prevent name collisions with DOM events the events have a os prefix.

Note: It doesn't matter whether you use the events property or the Vue events or both.

jsx

// example usage
<template>
  <OverlayScrollbarsComponent
    @os-initialized="onInitialized"
    @os-updated="onUpdated"
    @os-destroyed="onDestroyed"
    @os-scroll="onScroll"
  />
</template>

Ref

osInstance: a function which returns the OverlayScrollbars instance.
getElement: a function which returns the root element.

Composable

In case the OverlayScrollbarsComponent is not enough, you can also use the useOverlayScrollbars composable:

jsx

import { useOverlayScrollbars } from "overlayscrollbars-vue";

// example usage
const Component = {
  setup() {
    const div = ref(null);
    const reactiveParams = reactive({ options, events, defer });
    const [initialize, instance] = useOverlayScrollbars(reactiveParams);

    /** 
     * or:
     * 
     * const params = ref();
     * const [initialize, instance] = useOverlayScrollbars(params);
     * 
     * or:
     * 
     * const options = ref();
     * const events = ref();
     * const defer = ref();
     * const [initialize, instance] = useOverlayScrollbars({
     *   options,
     *   events,
     *   defer,
     * });
     * 
     */

    onMounted(() => {
      initialize({ target: div.value });
    });

    return () => 
  },
}

The composable is for advanced usage and lets you control the whole initialization process. This is useful if you want to integrate it with other plugins.

The composable will destroy the instance automatically if the component unmounts.

Parameters

Parameters are optional and similar to the OverlayScrollbarsComponent.
Its an object with optional properties:

options: accepts an object which represents the OverlayScrollbars options.
events: accepts an object which represents the OverlayScrollbars events.
defer: accepts an boolean or object. Defers the initialization to a point in time when the browser is idle.

Note: The object can be a normal, reactive or ref object. This also applies to all fields.

Return

The useOverlayScrollbars composable returns a tuple with two values:

The first value is the initialization function, it takes one argument which is the InitializationTarget.
The second value is a function which returns the current OverlayScrollbars instance or null if not initialized.

License

MIT

Packages/Overlayscrollbars Vue/CHANGELOG (packages/overlayscrollbars-vue/CHANGELOG.md)

Changelog

0.5.10

Improvements

The OverlayScrollbarsComponentProps are no longer inlined by vue, instead the overlayscrollbars types are used directly.

0.5.9

Improvements

The OverlayScrollbarsComponent now properly supports 'body' as its element tag.

0.5.8

Improvements

Improve the type definitions with the usage of the Component type.

0.5.7

Improvements

Adapt the exports field in the package.json for correct commonjs and module handling.

0.5.6

Bug Fixes

Make sure component is stateless and children won't update more often than needed.

0.5.5

Bug Fixes

Revert to runtime declaration for props to prevent types warning. #551

0.5.4

Bug Fixes

Fixed TypeScript definitions for optional properties.

0.5.3

Improve Server Side Rendering behavior by creating additional markup only on the client with the hydration phase.
Improve deferred initialization where the time between created markup and actual initialization is masked with CSS.

0.5.2

The package.json has now an appropriate exports field to optimize builds in modern bundlers.

0.5.1

The TypeScript interfaces OverlayScrollbarsProps and OverlayScrollbarsRef are exported from the package.

0.5.0

Features

Added the possibility to defer the initialization to a point in time when the browser is idle. (or to the next frame if window.requestIdleCallback is not supported)

OverlayScrollbarsComponent accepts now the defer property
useOverlayScrollbars params accept now the defer property
useOverlayScrollbars will now always try to destroy the instance if the component unmounts.

Breaking Changes

Because initialization can be deferred now, the initialize function of the useOverlayScrollbars composable isn't returning the instance anymore. Use the instance function of the useOverlayScrollbars composable instead.

0.4.0

Depends on OverlayScrollbars version ^2.0.0 and Vue version ^3.2.25.
The component was rewritten using script setup.

Features

OverlayScrollbarsComponent accepts now the events property
OverlayScrollbarsComponent accepts now the element property
OverlayScrollbarsComponent emits now all OverlayScrollbars events as "native" Vue events
The useOverlayScrollbars composable was added for advanced usage

Breaking Changes

The extensions property is removed from OverlayScrollbarsComponent
The osTarget() function from the OverlayScrollbarsComponent ref is renamed to getElement()

Packages/Overlayscrollbars Vue/Package.Json (packages/overlayscrollbars-vue/package.json)

{
"name": "overlayscrollbars-vue",
"private": true,
"type": "module",
"version": "0.5.10",
"description": "OverlayScrollbars for Vue.",
"author": "Rene Haas | KingSora",
"license": "MIT",
"homepage": "https://kingsora.github.io/OverlayScrollbars",
"bugs": "https://github.com/KingSora/OverlayScrollbars/issues",
"repository": {
"type": "git",
"url": "https://github.com/KingSora/OverlayScrollbars.git",
"directory": "packages/overlayscrollbars-vue"
},
"keywords": [
"overlayscrollbars",
"vue",
"vue2",
"vue3",
"component",
"composable",
"composition",
"styleable",
"custom",
"scrollbar",
"scrollbars",
"scroll"
],
"main": "./src/overlayscrollbars-vue.ts",
"module": "./src/overlayscrollbars-vue.ts",
"types": "./src/overlayscrollbars-vue.ts",
"peerDependencies": {
"vue": "^3.2.25",
"overlayscrollbars": "^2.0.0"
},
"devDependencies": {
"@testing-library/vue": "^8.1.0",
"@vitejs/plugin-vue": "^6.0.6",
"@vitejs/plugin-vue-jsx": "^5.1.5",
"@vue/tsconfig": "^0.4.0",
"overlayscrollbars": "file:./../overlayscrollbars/dist",
"vue": "~3.2.45",
"vue-tsc": "^2.0.29"
},
"scripts": {
"build": "run-p build-js build-types",
"build-js": "vite build",
"build-types": "vue-tsc --emitDeclarationOnly -p tsconfig.types.json --composite false",
"test": "vitest run --coverage"
}
}

Packages/Overlayscrollbars Vue/Tsconfig.Types.Json (packages/overlayscrollbars-vue/tsconfig.types.json)

{
"extends": "./tsconfig.json",
"compilerOptions": {
"rootDir": "./src/",
"outDir": "./dist/types",
"declaration": true
},
"include": ["src/**/*"]
}

Packages/Overlayscrollbars Vue/Test/Tsconfig.Json (packages/overlayscrollbars-vue/test/tsconfig.json)

{
"extends": "../tsconfig.json",
"compilerOptions": {
"types": ["@testing-library/jest-dom"]
}
}

Website/Package.Json (website/package.json)

{
"name": "overlayscrollbars-docs",
"version": "0.1.0",
"type": "module",
"private": true,
"dependencies": {
"@mdx-js/loader": "^3.0.1",
"@mdx-js/react": "^3.0.1",
"@next/mdx": "^14.2.5",
"@types/node": "20.5.4",
"@types/react": "18.2.21",
"@types/react-dom": "18.2.7",
"autoprefixer": "10.4.15",
"classnames": "^2.3.2",
"next": "14.2.5",
"overlayscrollbars": "file:./../packages/overlayscrollbars/dist",
"overlayscrollbars-react": "file:./../packages/overlayscrollbars-react/dist",
"postcss": "8.4.28",
"react": "18.2.0",
"react-dom": "18.2.0",
"tailwindcss": "3.3.3",
"typescript": "5.1.6",
"ua-parser-js": "^1.0.32"
},
"devDependencies": {
"@types/node": "18.7.20",
"@types/react": "^18.2.45",
"@types/react-dom": "^18.2.17",
"@types/ua-parser-js": "^0.7.36",
"copy-webpack-plugin": "^13.0.1",
"file-loader": "^6.2.0",
"raw-loader": "^4.0.2",
"rehype-pretty-code": "^0.13.0",
"rehype-slug": "^6.0.0",
"remark-gfm": "^4.0.0",
"serve": "^14.2.1",
"shiki": "^1.1.7",
"tailwindcss": "^3.1.8",
"typescript": "^5.0.0",
"url-loader": "^4.1.1"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "serve dist/"
}
}

Website/Tsconfig.Json (website/tsconfig.json)

{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"~/": [
"./"
]
}
},
"include": [
"next-env.d.ts",
"/*.ts",
"/.tsx",
".next/types/**/.ts",
"dist/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}

.Devcontainer/Devcontainer.Json (.devcontainer/devcontainer.json)

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
"name": "Node.js & TypeScript",
"image": "mcr.microsoft.com/devcontainers/typescript-node:20-bullseye"
// "postCreateCommand": "npm i && npm run build:os"

text

// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},

// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],

// Configure tool-specific properties.
// "customizations": {},

// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"

}

.Github/Codecov.Yml (.github/codecov.yml)

codecov:
require_ci_to_pass: no
notify:
wait_for_ci: no

coverage:
status:
project: off
patch: off

.Github/FUNDING.Yml (.github/FUNDING.yml)

These are supported funding model platforms

github: [KingSora]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: ['https://www.paypal.me/ReneHaas'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.Github/ISSUE TEMPLATE/Bug Report (.github/ISSUE_TEMPLATE/bug_report.md)

name: Bug report about: Create a report to help improve OverlayScrollbars title: '' labels: '' assignees: ''

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

Expected behavior
A clear and concise description of what you expected to happen.

Examples
Please create a minimal reproduction example of the bug.
To do this you can use online platforms like https://stackblitz.com, https://jsfiddle.net or https://codesandbox.io. You can also create a separate Github repository which I can clone.

As a starting point you could use one of the following templates:

Vanilla Javascript: https://stackblitz.com/edit/vitejs-vite-bv459t
React: https://stackblitz.com/edit/vitejs-vite-ou12p3
Vue: https://stackblitz.com/edit/vitejs-vite-8bbg5d

Environment

OverlayScrollbars version:
Used Operating System(s):
Used Browser(s) (with version):

Additional context
Add any other context about the problem here.

.Github/ISSUE TEMPLATE/Feature Request (.github/ISSUE_TEMPLATE/feature_request.md)

name: Feature request about: Suggest an idea for this project title: '' labels: '' assignees: ''

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

.Github/Workflows/Test.Yml (.github/workflows/test.yml)

name: Test

on:
push:
branches:
- master

permissions:
contents: read

jobs:
test:
timeout-minutes: 25
name: OverlayScrollbars Tests
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@v6
- name: Setup Node
uses: actions/setup-node@v6
with:
node-version: lts/*
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Run Unit Tests
run: npm run ci:test
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run e2e Tests
run: xvfb-run npm run ci:e2e
- name: Upload Unit Tests Coverage
uses: codecov/codecov-action@v6
with:
token: ${{ secrets.CODECOV_TOKEN }}
flags: unit
files: "packages//.coverage/unit/coverage.json"
- name: Upload e2e Tests Coverage
uses: codecov/codecov-action@v6
with:
token: ${{ secrets.CODECOV_TOKEN }}
flags: e2e
files: "packages//.coverage/e2e/coverage.json"

Package.Json (package.json) Copy Section

Tsconfig.Json (tsconfig.json) Copy Section

App Build Manifest.Json (docs/app-build-manifest.json) Copy Section

Build Manifest.Json (docs/build-manifest.json) Copy Section

Examples (docs/examples.txt) Copy Section

Server/App Paths Manifest.Json (docs/server/app-paths-manifest.json) Copy Section

Server/Middleware Manifest.Json (docs/server/middleware-manifest.json) Copy Section

Server/Next Font Manifest.Json (docs/server/next-font-manifest.json) Copy Section

Server/Server Reference Manifest.Json (docs/server/server-reference-manifest.json) Copy Section

Static/Webpack/907336788e8ddfac.Webpack.Hot Update.Json (docs/static/webpack/907336788e8ddfac.webpack.hot-update.json) Copy Section

V1/Frameworks/Angular/3rdpartylicenses (docs/v1/frameworks/angular/3rdpartylicenses.txt) Copy Section

V1/Frameworks/React/Asset Manifest.Json (docs/v1/frameworks/react/asset-manifest.json) Copy Section

V1/Frameworks/React/Manifest.Json (docs/v1/frameworks/react/manifest.json) Copy Section

Examples/README (examples/README.md) Copy Section

Examples

Simple Examples Copy Chapter

Online Examples Copy Chapter

Local Examples Copy Chapter

Install and Build Copy Section

Run local Example Copy Section

Examples/Angular/Angular.Json (examples/angular/angular.json) Copy Section

Examples/Angular/Package.Json (examples/angular/package.json) Copy Section

Examples/Angular/Tsconfig.App.Json (examples/angular/tsconfig.app.json) Copy Section

Examples/Angular/Tsconfig.Json (examples/angular/tsconfig.json) Copy Section

Examples/Browser/Package.Json (examples/browser/package.json) Copy Section

Examples/Node/Package.Json (examples/node/package.json) Copy Section

Examples/Overlayscrollbars/Package.Json (examples/overlayscrollbars/package.json) Copy Section

Examples/Overlayscrollbars/Tsconfig.Json (examples/overlayscrollbars/tsconfig.json) Copy Section

Examples/React/Package.Json (examples/react/package.json) Copy Section

Examples/React/Tsconfig.Json (examples/react/tsconfig.json) Copy Section

Examples/React/Tsconfig.Node.Json (examples/react/tsconfig.node.json) Copy Section

Examples/Solid/Package.Json (examples/solid/package.json) Copy Section

Examples/Solid/Tsconfig.Json (examples/solid/tsconfig.json) Copy Section

Examples/Svelte/Package.Json (examples/svelte/package.json) Copy Section

Examples/Svelte/Tsconfig.Json (examples/svelte/tsconfig.json) Copy Section

Examples/Svelte/Tsconfig.Node.Json (examples/svelte/tsconfig.node.json) Copy Section

Examples/Vue/Package.Json (examples/vue/package.json) Copy Section

Examples/Vue/Tsconfig.Config.Json (examples/vue/tsconfig.config.json) Copy Section

Examples/Vue/Tsconfig.Json (examples/vue/tsconfig.json) Copy Section

Local/Browser Testing/Package.Json (local/browser-testing/package.json) Copy Section

Local/Browser Testing/Tsconfig.Json (local/browser-testing/tsconfig.json) Copy Section

Local/Config/Package.Json (local/config/package.json) Copy Section

Local/Config/Src/Resolve.Json (local/config/src/resolve.json) Copy Section

Local/Esbuild/Package.Json (local/esbuild/package.json) Copy Section

Local/Full Coverage/Package.Json (local/full-coverage/package.json) Copy Section

Local/Playwright Tooling/Package.Json (local/playwright-tooling/package.json) Copy Section

Local/Rollup/Package.Json (local/rollup/package.json) Copy Section

Local/Tailwind/Package.Json (local/tailwind/package.json) Copy Section

Local/Tsconfig/Package.Json (local/tsconfig/package.json) Copy Section

Local/Tsconfig/Tsconfig.Json (local/tsconfig/tsconfig.json) Copy Section

Packages/Overlayscrollbars/CHANGELOG (packages/overlayscrollbars/CHANGELOG.md) Copy Section

Changelog

2.16.0 Copy Chapter

Features Copy Section

Bug Fixes Copy Section

2.15.1 Copy Chapter

Improvements Copy Section

2.15.0 Copy Chapter

Features Copy Section

2.14.0 Copy Chapter

Features Copy Section

Bug Fixes Copy Section

2.13.0 Copy Chapter

Features Copy Section

2.12.0 Copy Chapter

Improvements Copy Section

2.11.5 Copy Chapter

Bug Fixes Copy Section

2.11.4 Copy Chapter

Bug Fixes Copy Section

2.11.3 Copy Chapter

Improvements Copy Section

2.11.2 Copy Chapter

Improvements Copy Section

Bug Fixes Copy Section

2.11.1 Copy Chapter

Improvements Copy Section

2.11.0 Copy Chapter

Features Copy Section

Improvements Copy Section

Package.Json (package.json)

Tsconfig.Json (tsconfig.json)

App Build Manifest.Json (docs/app-build-manifest.json)

Build Manifest.Json (docs/build-manifest.json)

Examples (docs/examples.txt)

Server/App Paths Manifest.Json (docs/server/app-paths-manifest.json)

Server/Middleware Manifest.Json (docs/server/middleware-manifest.json)

Server/Next Font Manifest.Json (docs/server/next-font-manifest.json)

Server/Server Reference Manifest.Json (docs/server/server-reference-manifest.json)

Static/Webpack/907336788e8ddfac.Webpack.Hot Update.Json (docs/static/webpack/907336788e8ddfac.webpack.hot-update.json)

V1/Frameworks/Angular/3rdpartylicenses (docs/v1/frameworks/angular/3rdpartylicenses.txt)

V1/Frameworks/React/Asset Manifest.Json (docs/v1/frameworks/react/asset-manifest.json)

V1/Frameworks/React/Manifest.Json (docs/v1/frameworks/react/manifest.json)

Examples/README (examples/README.md)

Simple Examples

Online Examples

Local Examples

Install and Build

Run local Example

Examples/Angular/Angular.Json (examples/angular/angular.json)

Examples/Angular/Package.Json (examples/angular/package.json)

Examples/Angular/Tsconfig.App.Json (examples/angular/tsconfig.app.json)

Examples/Angular/Tsconfig.Json (examples/angular/tsconfig.json)

Examples/Browser/Package.Json (examples/browser/package.json)

Examples/Node/Package.Json (examples/node/package.json)

Examples/Overlayscrollbars/Package.Json (examples/overlayscrollbars/package.json)

Examples/Overlayscrollbars/Tsconfig.Json (examples/overlayscrollbars/tsconfig.json)

Examples/React/Package.Json (examples/react/package.json)

Examples/React/Tsconfig.Json (examples/react/tsconfig.json)

Examples/React/Tsconfig.Node.Json (examples/react/tsconfig.node.json)

Examples/Solid/Package.Json (examples/solid/package.json)

Examples/Solid/Tsconfig.Json (examples/solid/tsconfig.json)

Examples/Svelte/Package.Json (examples/svelte/package.json)

Examples/Svelte/Tsconfig.Json (examples/svelte/tsconfig.json)

Examples/Svelte/Tsconfig.Node.Json (examples/svelte/tsconfig.node.json)

Examples/Vue/Package.Json (examples/vue/package.json)

Examples/Vue/Tsconfig.Config.Json (examples/vue/tsconfig.config.json)

Examples/Vue/Tsconfig.Json (examples/vue/tsconfig.json)

Local/Browser Testing/Package.Json (local/browser-testing/package.json)

Local/Browser Testing/Tsconfig.Json (local/browser-testing/tsconfig.json)

Local/Config/Package.Json (local/config/package.json)

Local/Config/Src/Resolve.Json (local/config/src/resolve.json)

Local/Esbuild/Package.Json (local/esbuild/package.json)

Local/Full Coverage/Package.Json (local/full-coverage/package.json)

Local/Playwright Tooling/Package.Json (local/playwright-tooling/package.json)

Local/Rollup/Package.Json (local/rollup/package.json)

Local/Tailwind/Package.Json (local/tailwind/package.json)

Local/Tsconfig/Package.Json (local/tsconfig/package.json)

Local/Tsconfig/Tsconfig.Json (local/tsconfig/tsconfig.json)

Packages/Overlayscrollbars/CHANGELOG (packages/overlayscrollbars/CHANGELOG.md)

2.16.0

Features

Bug Fixes

2.15.1

Improvements

2.15.0

Features

2.14.0

Features

Bug Fixes

2.13.0

Features

2.12.0

Improvements

2.11.5

Bug Fixes

2.11.4

Bug Fixes

2.11.3

Improvements

2.11.2

Improvements

Bug Fixes

2.11.1

Improvements

2.11.0

Features

Improvements

2.10.1

Improvements