### 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 Copyright (c) 2017 Rene Haas 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 Copyright (c) 2019 Rene Haas 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. rxjs Apache-2.0 Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. 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. 2. 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. 3. 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. 4. 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. 5. 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. 6. 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. 7. 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. 8. 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. 9. 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. 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. Copyright (c) 2015-2018 Google, Inc., Netflix, Inc., Microsoft Corp. and contributors 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 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 Copyright (c) 2010-2020 Google LLC. http://angular.io/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. --- ### 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`](https://github.com/KingSora/OverlayScrollbars/tree/master/examples/browser) or [`Node`](https://github.com/KingSora/OverlayScrollbars/tree/master/examples/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`](https://kingsora.github.io/OverlayScrollbars/example/overlayscrollbars) / [`StackBlitz`](https://stackblitz.com/edit/overlayscrollbars) / [`CodeSandbox`](https://codesandbox.io/p/sandbox/overlayscrollbars-example-29hk3v) | | React | [`Demo App`](https://kingsora.github.io/OverlayScrollbars/example/react) / [`StackBlitz`](https://stackblitz.com/edit/overlayscrollbars-react) / [`CodeSandbox`](https://codesandbox.io/p/sandbox/overlayscrollbars-react-example-ddz458) | | Vue | [`Demo App`](https://kingsora.github.io/OverlayScrollbars/example/vue) / [`StackBlitz`](https://stackblitz.com/edit/overlayscrollbars-vue) / [`CodeSandbox`](https://codesandbox.io/p/sandbox/overlayscrollbars-vue-example-rh3vjm) | | Angular | [`Demo App`](https://kingsora.github.io/OverlayScrollbars/example/angular) / [`StackBlitz`](https://stackblitz.com/edit/overlayscrollbars-ngx) / [`CodeSandbox`](https://codesandbox.io/p/sandbox/overlayscrollbars-ngx-example-dwtg9q) | | Svelte | [`Demo App`](https://kingsora.github.io/OverlayScrollbars/example/svelte) / [`StackBlitz`](https://stackblitz.com/edit/overlayscrollbars-svelte) / [`CodeSandbox`](https://codesandbox.io/p/sandbox/overlayscrollbars-svelte-example-8gqhrp) | | Solid | [`Demo App`](https://kingsora.github.io/OverlayScrollbars/example/solid) / [`StackBlitz`](https://stackblitz.com/edit/overlayscrollbars-solid) / [`CodeSandbox`](https://codesandbox.io/p/sandbox/overlayscrollbars-solid-example-wxl45n) | ## 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: 1. `npm install` 2. `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) /* 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. */ { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, "include": [ "src/**/*.ts" ], "exclude": [ "src/**/*.spec.ts" ] } --- ### 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, /* 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](https://github.com/KingSora/OverlayScrollbars/issues/751) ### Bug Fixes - Make sure the expensive "non default flow direction" check is not running when it shouldn't. [#756](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/754) - Added the `instance.sleep` function. Can be used to optimize performance or visual feedback. (for example during animations) [#755](https://github.com/KingSora/OverlayScrollbars/pull/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](https://github.com/KingSora/OverlayScrollbars/issues/729) [#748](https://github.com/KingSora/OverlayScrollbars/pull/748) ### Bug Fixes - Work around browser rounding inaccuracies which prevented a proper detection of a "non default flow direction" for normal density screens. [#625](https://github.com/KingSora/OverlayScrollbars/issues/625#issuecomment-3778048936) ## 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](https://github.com/KingSora/OverlayScrollbars/issues/744) [#729](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/Grsmto/simplebar/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/718) ### Bug Fixes - Initialization bridging via `data-overlayscrollbars-initialize` attribute conflicted with the `showNativeOverlaidScrollbars: true` option when initialized to the body element. [#713](https://github.com/KingSora/OverlayScrollbars/issues/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`](https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API) for websites with a CSP. [#697](https://github.com/KingSora/OverlayScrollbars/issues/697) ### Improvements - Change `ScrollAnimationTimeline` keyframes to not animate css-custom-properties to improve scroll performance. [#705](https://github.com/KingSora/OverlayScrollbars/issues/705) ## 2.10.1 ### Improvements - Add `pen` to the list of "hoverable" pointer devices. [#690](https://github.com/KingSora/OverlayScrollbars/issues/690) ## 2.10.0 ### Features - The option `scrollbars.clickScroll` now supports the value `'instant'`. The `ClickScrollPlugin` is not required for it to work. [#645](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) value for websites with a CSP. [#646](https://github.com/KingSora/OverlayScrollbars/pull/646) ### Improvements - Reduced bundle size due to removed compatiblity code. - `clickScroll` will not cancel on fast clicks / taps. [#650](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/630) ## 2.7.3 ### Improvements - Use `{ preventScroll: true }` when focusing viewport to prevent unwanted scrolling. [#629](https://github.com/KingSora/OverlayScrollbars/issues/629) - Make the scrollbars hidden when `@media print` applies. [#628](https://github.com/KingSora/OverlayScrollbars/issues/628) ## 2.7.2 ### Bug Fixes - Handle case where `document.defaultView` is `null`. [#627](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/597) - `ScrollTimeline` animations are not canceled anymore when they are updated. Instead the animations keyframe effect is switched out preventing flickering. [#598](https://github.com/KingSora/OverlayScrollbars/issues/598) ## 2.4.5 ### Improvements - Its now possible to have a height / width transition on the scrollbar-handle. [#587](https://github.com/KingSora/OverlayScrollbars/issues/587) ## 2.4.4 ### Bug Fixes - Fix a bug where ScrollTimeline animation keyframe could contain `NaN` or `Infinity` values triggering a warning. [#581](https://github.com/KingSora/OverlayScrollbars/issues/581) - Treat explicitly assigned `undefined` values for options as if they would be left out. [#586](https://github.com/KingSora/OverlayScrollbars/issues/586) ## 2.4.3 ### Bug Fixes - Bug where the instance wasn't updated when the `window` resized. [#578](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) api is only called when the browser supports the [ScrollTimeline API](https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline). [#562](https://github.com/KingSora/OverlayScrollbars/issues/562) ## 2.3.1 ### Bug Fixes - Fix direction `rtl` visual scrollbar handle behavior in browser which support the [ScrollTimeline API](https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline). - Fix double tap behavior for interactive elements on `iOS` devices if `autoHide` is `leave` or `move`. [#560](https://github.com/KingSora/OverlayScrollbars/discussions/560) [#285](https://github.com/KingSora/OverlayScrollbars/discussions/285) - Fix incorrect scrollbar handle calculation when overscroll on safari occurred. [#559](https://github.com/KingSora/OverlayScrollbars/discussions/559) ## 2.3.0 ### Features - Make use of the new [ScrollTimeline API](https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline) 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](https://github.com/KingSora/OverlayScrollbars/discussions/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](https://github.com/KingSora/OverlayScrollbars/issues/538) ### Improvements - Instead of `offsetWidth` & `offsetHeight` use the corresponding properties from the `getBoundingClientRect` object to increase accuracy of scrollbar calculations. [#542](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/526) [#530](https://github.com/KingSora/OverlayScrollbars/issues/530) ## 2.1.1 ### Bug Fixes - Fixed a bug where pointer events weren't released properly after drag or click scrolling. [#512](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/issues/376), [#425](https://github.com/KingSora/OverlayScrollbars/issues/425), [#273](https://github.com/KingSora/OverlayScrollbars/issues/273), [#320](https://github.com/KingSora/OverlayScrollbars/issues/320)) - If you scroll while the cursor hovers a scrollbar element the viewport is now scrolled ([#128](https://github.com/KingSora/OverlayScrollbars/issues/128), [#322](https://github.com/KingSora/OverlayScrollbars/issues/322)) - The initialization process can be fully customized now. This makes it possible to itegrate with other plugins / libraries ([#432](https://github.com/KingSora/OverlayScrollbars/issues/432), [#304](https://github.com/KingSora/OverlayScrollbars/issues/304), [#149](https://github.com/KingSora/OverlayScrollbars/issues/149), [#148](https://github.com/KingSora/OverlayScrollbars/issues/148), [#139](https://github.com/KingSora/OverlayScrollbars/issues/139), [#49](https://github.com/KingSora/OverlayScrollbars/issues/49)) - Scrollbars can be cloned and positioned anywhere in the DOM tree. ([#404](https://github.com/KingSora/OverlayScrollbars/issues/404), [#323](https://github.com/KingSora/OverlayScrollbars/issues/323), [#158](https://github.com/KingSora/OverlayScrollbars/issues/158), [#17](https://github.com/KingSora/OverlayScrollbars/issues/17)) - The update behavior of the `MutationObserver` for the content can be customized with the `update` options. ([#307](https://github.com/KingSora/OverlayScrollbars/issues/307), [#183](https://github.com/KingSora/OverlayScrollbars/issues/183), [#23](https://github.com/KingSora/OverlayScrollbars/issues/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 the`updated` 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)
OverlayScrollbars Angular

[](https://github.com/KingSora/OverlayScrollbars) [](https://github.com/angular/angular) [](https://www.npmjs.com/package/overlayscrollbars-ngx) [](https://www.npmjs.com/package/overlayscrollbars-ngx) [](#)

Website   •   Examples

# OverlayScrollbars for Angular This is the official OverlayScrollbars Angular wrapper. ## Installation ```sh npm install overlayscrollbars-ngx ``` ## Peer Dependencies OverlayScrollbars for Angular has the following **peer dependencies**: - The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars) ``` npm install overlayscrollbars ``` - The Angular framework: [@angular/core](https://www.npmjs.com/package/@angular/core) & [@angular/common](https://www.npmjs.com/package/@angular/common) ``` npm install @angular/core @angular/common ``` ## Usage The first step is to import the CSS file into your app: ```ts 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: ```js 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: ```js import { OverlayScrollbarsComponent } from "overlayscrollbars-ngx"; ``` The component can be used with two different selectors: ```html The tag isn't important
Choose the tag
``` ### 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 ``` ### 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: ```ts 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: ```js 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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/pull/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)
OverlayScrollbars React

[](https://github.com/KingSora/OverlayScrollbars) [](https://github.com/facebook/react/) [](https://www.npmjs.com/package/overlayscrollbars-react) [](https://www.npmjs.com/package/overlayscrollbars-react) [](#)

Website   •   Examples

# OverlayScrollbars for React This is the official OverlayScrollbars React wrapper. ## Installation ```sh npm install overlayscrollbars-react ``` ## Peer Dependencies OverlayScrollbars for React has the following **peer dependencies**: - The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars) ``` npm install overlayscrollbars ``` - The React framework: [react](https://www.npmjs.com/package/react) ``` npm install react ``` ## Usage The first step is to import the CSS file into your app: ```ts 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"; // ... example content ``` ### 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 { /* ... */ } }} defer /> ``` ### 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. ## 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](https://github.com/KingSora/OverlayScrollbars/issues/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](https://github.com/KingSora/OverlayScrollbars/pull/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)
OverlayScrollbars Vue

[](https://github.com/KingSora/OverlayScrollbars) [](https://github.com/solidjs/solid) [](https://www.npmjs.com/package/overlayscrollbars-solid) [](https://www.npmjs.com/package/overlayscrollbars-solid) [](#)

Website   •   Examples

# OverlayScrollbars for Solid This is the official OverlayScrollbars Solid wrapper. ## Installation ```sh npm install overlayscrollbars-solid ``` ## Peer Dependencies OverlayScrollbars for Solid has the following **peer dependencies**: - The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars) ``` npm install overlayscrollbars ``` - The Solid framework: [solid-js](https://www.npmjs.com/package/solid-js) ``` npm install solid-js ``` ## Usage The first step is to import the CSS file into your app: ```ts 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"; // ... example content ``` ### 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 { /* ... */ } }} defer /> ``` ### 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. ```jsx // example usage import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-solid'; const Component = () => { let ref: OverlayScrollbarsComponentRef | undefined; return (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](https://github.com/KingSora/OverlayScrollbars/issues/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)
OverlayScrollbars Svelte

[](https://github.com/KingSora/OverlayScrollbars) [](https://github.com/sveltejs/svelte) [](https://www.npmjs.com/package/overlayscrollbars-svelte) [](https://www.npmjs.com/package/overlayscrollbars-svelte) [](#)

Website   •   Examples

# OverlayScrollbars for Svelte This is the official OverlayScrollbars Svelte wrapper. ## Installation ```sh npm install overlayscrollbars-svelte ``` ## Peer Dependencies OverlayScrollbars for Svelte has the following **peer dependencies**: - The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars) ``` npm install overlayscrollbars ``` - The Svelte framework: [svelte](https://www.npmjs.com/package/svelte) ``` npm install svelte ``` ## Usage The first step is to import the CSS file into your app: ```ts 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 example content ``` ### 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 { /* ... */ } }} 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](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes). This was done to ease migration and will be removed in a future release. Please use the `events` option instead. ```svelte ``` All events are typed, but you can use the `EventListenerArgs` type as utility in case its needed: ```ts import type { EventListenerArgs } from 'overlayscrollbars'; // example listener const onUpdated = (event) => { const [instance, onUpdatedArgs] = event.detail as 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. ## Primitive In case the `OverlayScrollbarsComponent` is not enough, you can also use the `useOverlayScrollbars` primitive: ```svelte
``` 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](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes). 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)
OverlayScrollbars Vue

[](https://github.com/KingSora/OverlayScrollbars) [](https://github.com/vuejs/vue) [](https://www.npmjs.com/package/overlayscrollbars-vue) [](https://www.npmjs.com/package/overlayscrollbars-vue) [](#)

Website   •   Examples

# OverlayScrollbars for Vue This is the official OverlayScrollbars Vue wrapper. ## Installation ```sh npm install overlayscrollbars-vue ``` ## Peer Dependencies OverlayScrollbars for Vue has the following **peer dependencies**: - The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars) ``` npm install overlayscrollbars ``` - The Vue framework: [vue](https://www.npmjs.com/package/vue) ``` npm install vue ``` ## Usage The first step is to import the CSS file into your app: ```ts 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"; // ... example content ``` ### 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 { /* ... */ } }} 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 ``` ### 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. ## 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](https://github.com/KingSora/OverlayScrollbars/issues/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" // 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: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. 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" ---