{"id":17937802,"url":"https://github.com/xobotyi/scrollbar-width","last_synced_at":"2025-04-03T02:10:38.478Z","repository":{"id":36227506,"uuid":"222528040","full_name":"xobotyi/scrollbar-width","owner":"xobotyi","description":"Lightweight tool to get browser's scrollbars width of any browser.","archived":false,"fork":false,"pushed_at":"2023-01-05T16:27:25.000Z","size":2675,"stargazers_count":33,"open_issues_count":23,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T08:10:01.456Z","etag":null,"topics":["browser","detect","native","scrollbar","scrollbar-width","width"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xobotyi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"patreon":"xobotyi"}},"created_at":"2019-11-18T19:31:15.000Z","updated_at":"2023-12-04T15:26:00.000Z","dependencies_parsed_at":"2023-01-16T23:46:33.673Z","dependency_job_id":null,"html_url":"https://github.com/xobotyi/scrollbar-width","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xobotyi%2Fscrollbar-width","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xobotyi%2Fscrollbar-width/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xobotyi%2Fscrollbar-width/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xobotyi%2Fscrollbar-width/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xobotyi","download_url":"https://codeload.github.com/xobotyi/scrollbar-width/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246922247,"owners_count":20855345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","detect","native","scrollbar","scrollbar-width","width"],"created_at":"2024-10-28T23:07:52.036Z","updated_at":"2025-04-03T02:10:38.460Z","avatar_url":"https://github.com/xobotyi.png","language":"TypeScript","funding_links":["https://patreon.com/xobotyi"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cH1\u003e@xobotyi/scrollbar-width\u003c/H1\u003e\n    \u003cp\u003eA tool to get browser's scrollbars width.\u003c/p\u003e\n    \u003cp\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@xobotyi/scrollbar-width\"\u003e\n            \u003cimg src=\"https://flat.badgen.net/travis/xobotyi/scrollbar-width\" alt=\"Build status\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@xobotyi/scrollbar-width\"\u003e\n            \u003cimg src=\"https://flat.badgen.net/npm/v/@xobotyi/scrollbar-width\" alt=\"NPM version\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@xobotyi/scrollbar-width\"\u003e\n            \u003cimg src=\"https://flat.badgen.net/npm/dw/@xobotyi/scrollbar-width\" alt=\"NPM weekly downloads\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@xobotyi/scrollbar-width\"\u003e\n            \u003cimg src=\"https://flat.badgen.net/npm/license/@xobotyi/scrollbar-width\" alt=\"License\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@xobotyi/scrollbar-width\"\u003e\n            \u003cimg src=\"https://flat.badgen.net/npm/types/@xobotyi/scrollbar-width\" alt=\"Types definition\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@xobotyi/scrollbar-width\"\u003e\n            \u003cimg src=\"https://flat.badgen.net/codacy/grade/1bc2560a1b614f9595b718169c969b4d\" alt=\"Codacy Code Grade\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@xobotyi/scrollbar-width\"\u003e\n            \u003cimg src=\"https://flat.badgen.net/codacy/coverage/1bc2560a1b614f9595b718169c969b4d\" alt=\"Tests LOC\"/\u003e\n        \u003c/a\u003e\n    \u003c/p\u003e\n    \u003cp\u003e×\u0026nbsp;\u003cstrong\u003e\u003ca href=\"https://codesandbox.io/s/xobotyiscrollbar-width-live-demo-bp5no\"\u003eLIVE EXAMPLE\u003c/a\u003e\u003c/strong\u003e\u0026nbsp;×\u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e❤️Please consider starring this project to show your love and support.🙌\u003c/div\u003e\n\n---\n\n## Installation\n\n```bash\nnpm install @xobotyi/scrollbar-width\n# or via yarn\nyarn add @xobotyi/scrollbar-width\n```\n_INSTALLATION NOTE:_  \nThis lib is written in TypeScript and delivered with both, transpiled and untranspiled ES versions:\n\n- `main` field of package.json is pointing to transpiled ES5-compatible version with CJS modules resolution;\n- `module` field is pointing to transpiled ES5-compatible version with ES modules resolution;\n- `esnext` field is pointing to the ESnext version with ES modules resolution;\n\n\n**OR**  \nyou can add it directly to your site via the `\u003cscript /\u003e` with help of [UNPKG](https://unpkg.com):\n```html\n\u003cscript src=\"https://unpkg.com/@xobotyi/scrollbar-width/dist/index.min.js\"/\u003e\n```\nAfter that you will be able to use the function as `xobotyi.scrollbarWidth()`\n\n## Usage\n\n```javascript\nimport { scrollbarWidth } from '@xobotyi/scrollbar-width';\n\nscrollbarWidth(); // for most browsers will return 17 and 0 for SSR environment\n// or undefined if to call it too early [read below]\n```\n\nThis function caches the value to avoid increased resources usage. In case you want to get re-calculated value - pass `true` as first call parameter.\n\n\u003e**NOTE:**  \n\u003eFunction will return `undefined` in case being called before the DOM is ready.\n\n#### One more clarification\nThis function has inner cache due to scrollbars width is not intended to be changed since initial call, but it can in case you toggle the device emulation.  \nIf you need function to recalculate the width call it with `true` parameter and get new value or set `scrollbarWidth.__cache` to `undefined` and next call will return the fresh value.\n\n## Related projects\n\n- [react-scrollbars-custom](https://www.npmjs.com/package/react-scrollbars-custom) \u0026mdash; The best React custom scrollbars component. Allows you to customise scrollbars as you like it, crossbrowser!\n- [zoom-level](https://www.npmjs.com/package/zoom-level) \u0026mdash; A comprehensive cross-browser package that allow you to determine page's and element's zoom level.\n- [@xobotyi/should-reverse-rtl-scroll](https://www.npmjs.com/package/@xobotyi/should-reverse-rtl-scroll) \u0026mdash; A tool detecting if RTL scroll value should be negative.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxobotyi%2Fscrollbar-width","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxobotyi%2Fscrollbar-width","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxobotyi%2Fscrollbar-width/lists"}