{"id":15391363,"url":"https://github.com/pascalduez/postcss-scrollbar","last_synced_at":"2025-08-20T02:32:24.838Z","repository":{"id":37444324,"uuid":"163208315","full_name":"pascalduez/postcss-scrollbar","owner":"pascalduez","description":"PostCSS plugin enabling custom scrollbars","archived":false,"fork":false,"pushed_at":"2023-02-07T10:29:30.000Z","size":762,"stargazers_count":74,"open_issues_count":2,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-08T20:16:31.585Z","etag":null,"topics":["css","postcss"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pascalduez.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-26T18:48:47.000Z","updated_at":"2024-08-16T12:59:58.000Z","dependencies_parsed_at":"2023-02-19T16:45:25.515Z","dependency_job_id":null,"html_url":"https://github.com/pascalduez/postcss-scrollbar","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascalduez%2Fpostcss-scrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascalduez%2Fpostcss-scrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascalduez%2Fpostcss-scrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascalduez%2Fpostcss-scrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pascalduez","download_url":"https://codeload.github.com/pascalduez/postcss-scrollbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230388129,"owners_count":18217755,"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":["css","postcss"],"created_at":"2024-10-01T15:10:51.479Z","updated_at":"2024-12-19T06:08:37.355Z","avatar_url":"https://github.com/pascalduez.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-scrollbar\n\n[![npm version][npm-image]][npm-url]\n[![CI Status][ci-image]][ci-url]\n[![Coverage Status][codecov-image]][codecov-url]\n\n\u003e [PostCSS] plugin enabling custom scrollbars\n\nSpec : https://drafts.csswg.org/css-scrollbars-1  \nBrowser support: https://caniuse.com/#feat=css-scrollbar  \nDocs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars\n\n## Installation\n\n```\nnpm install postcss postcss-scrollbar --save-dev\n```\n\nor\n\n```\nyarn add postcss postcss-scrollbar --save-dev\n```\n\n## Usage\n\n```js\nconst fs = require('node:fs');\nconst postcss = require('postcss');\nconst scrollbar = require('postcss-scrollbar');\n\nlet input = fs.readFileSync('input.css', 'utf8');\n\npostcss()\n  .use(scrollbar)\n  .process(input)\n  .then(result =\u003e {\n    fs.writeFileSync('output.css', result.css);\n  });\n```\n\n## Examples\n\n```css\n/* input */\n.scrollable {\n  scrollbar-color: rebeccapurple green;\n  scrollbar-width: thin;\n}\n```\n\n```css\n/* output */\n.scrollable::-webkit-scrollbar-thumb {\n  background-color: rebeccapurple;\n}\n.scrollable::-webkit-scrollbar-track {\n  background-color: green;\n}\n.scrollable::-webkit-scrollbar-corner {\n  background-color: green;\n}\n.scrollable::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n.scrollable {\n  -ms-overflow-style: auto;\n  scrollbar-color: rebeccapurple green;\n  scrollbar-width: thin;\n}\n```\n\n```css\n/* input */\n.scrollable {\n  scrollbar-width: none;\n}\n```\n\n```css\n/* output */\n.scrollable::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n}\n.scrollable {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n```\n\n## options\n\n### `width`\n\ntype: `String`  \ndefault: `8px`  \nAllows for setting the webkit fallbacks `width` and `height`.\n\n### `edgeAutohide`\n\ntype: `Boolean`  \ndefault: `false`  \nAllows for setting the scrollbar behaviour for the Edge Browser.  \n`-ms-overflow-style: -ms-autohiding-scrollbar;`  \nEdge doesn't support scrollbar styling.  \nSee https://developer.mozilla.org/fr/docs/Web/CSS/-ms-overflow-style\n\n## Credits\n\n- [Pascal Duez](https://github.com/pascalduez)\n\n## Licence\n\npostcss-scrollbar is [unlicensed](http://unlicense.org/).\n\n[postcss]: https://github.com/postcss/postcss\n[npm-url]: https://www.npmjs.org/package/postcss-scrollbar\n[npm-image]: http://img.shields.io/npm/v/postcss-scrollbar.svg?style=flat-square\n[ci-url]: https://github.com/pascalduez/postcss-scrollbar/actions/workflows/ci.yml\n[ci-image]: https://img.shields.io/github/actions/workflow/status/pascalduez/postcss-scrollbar/ci.yml?branch=main\u0026style=flat-square\n[codecov-url]: https://codecov.io/gh/pascalduez/postcss-scrollbar\n[codecov-image]: https://img.shields.io/codecov/c/github/pascalduez/postcss-scrollbar.svg?style=flat-square\n[license-image]: http://img.shields.io/npm/l/postcss-scrollbar.svg?style=flat-square\n[license-url]: UNLICENSE\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpascalduez%2Fpostcss-scrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpascalduez%2Fpostcss-scrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpascalduez%2Fpostcss-scrollbar/lists"}