{"id":15029443,"url":"https://github.com/idiotwu/smooth-scrollbar","last_synced_at":"2025-05-13T23:11:10.815Z","repository":{"id":37706586,"uuid":"47681086","full_name":"idiotWu/smooth-scrollbar","owner":"idiotWu","description":"Customizable, Extendable, and High-Performance JavaScript-Based Scrollbar Solution.","archived":false,"fork":false,"pushed_at":"2023-06-06T05:20:24.000Z","size":5745,"stargazers_count":3361,"open_issues_count":47,"forks_count":384,"subscribers_count":29,"default_branch":"develop","last_synced_at":"2025-05-11T14:03:43.327Z","etag":null,"topics":["custom-scrollbar","frontend","javascript","javascript-scrollbar-plugin","scrollbar","smooth-scrollbar","smooth-scrolling"],"latest_commit_sha":null,"homepage":"https://idiotwu.github.io/smooth-scrollbar/","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/idiotWu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-12-09T09:20:27.000Z","updated_at":"2025-05-07T15:36:40.000Z","dependencies_parsed_at":"2024-01-18T03:51:25.325Z","dependency_job_id":null,"html_url":"https://github.com/idiotWu/smooth-scrollbar","commit_stats":{"total_commits":900,"total_committers":25,"mean_commits":36.0,"dds":0.07222222222222219,"last_synced_commit":"382bea39dd909908c1018596a8977dd154b71590"},"previous_names":[],"tags_count":143,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idiotWu%2Fsmooth-scrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idiotWu%2Fsmooth-scrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idiotWu%2Fsmooth-scrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idiotWu%2Fsmooth-scrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idiotWu","download_url":"https://codeload.github.com/idiotWu/smooth-scrollbar/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254042341,"owners_count":22004901,"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":["custom-scrollbar","frontend","javascript","javascript-scrollbar-plugin","scrollbar","smooth-scrollbar","smooth-scrolling"],"created_at":"2024-09-24T20:10:40.982Z","updated_at":"2025-05-13T23:11:05.769Z","avatar_url":"https://github.com/idiotWu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003ca href=\"https://idiotwu.github.io/smooth-scrollbar/\"\u003e\n  \u003cimg src=\"docs/assets/logo.svg\" height=\"150px\" /\u003e\n\u003c/a\u003e\n\n# Smooth Scrollbar\n\n**Customizable, Flexible, and High Performance Scrollbars!**\n\n[![npm][npm-version-badge]](https://www.npmjs.com/package/smooth-scrollbar)\n[![monthly downloads][npm-downloads-badge]](https://www.npmjs.com/package/smooth-scrollbar)\n[![core size][size-badge]](dist/smooth-scrollbar.js)\n[![gzip size][gzip-size-badge]](dist/smooth-scrollbar.js)\n[![Build status][github-action-badge]](https://github.com/idiotWu/smooth-scrollbar/actions/workflows/deploy.yml)\n[![Gitpod Ready-to-Code][gitpod-badge]](https://gitpod.io/from-referrer/)\n\n\u003c/div\u003e\n\n## Installation\n\n\u003e ⚠️ DO NOT use custom scrollbars unless you know what you are doing. [Read more](docs/caveats.md)\n\n\u003e [Tell us about the features you want in the next major update](https://github.com/idiotWu/smooth-scrollbar/discussions/392).\n\nVia NPM **(recommended)**:\n\n```\nnpm install smooth-scrollbar --save\n```\n\nVia Bower:\n\n```\nbower install smooth-scrollbar --save\n```\n\n## Browser Compatibility\n\n| Browser | Version |\n| :------ | :-----: |\n| IE      | 10+     |\n| Chrome  | 22+     |\n| Firefox | 16+     |\n| Safari  | 8+      |\n| Android Browser | 4+ |\n| Chrome for Android | 32+ |\n| iOS Safari | 7+ |\n\n## Demo\n\nhttps://idiotwu.github.io/smooth-scrollbar/\n\n## Usage\n\nSince this package has a [pkg.module](https://github.com/rollup/rollup/wiki/pkg.module) field, it's highly recommended to import it as an ES6 module with some bundlers like [webpack](https://webpack.js.org/) or [rollup](https://rollupjs.org/):\n\n```js\nimport Scrollbar from 'smooth-scrollbar';\n\nScrollbar.init(document.querySelector('#my-scrollbar'));\n```\n\nIf you are not using any bundlers, you can just load the UMD bundle:\n\n```html\n\u003cscript src=\"dist/smooth-scrollbar.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  var Scrollbar = window.Scrollbar;\n\n  Scrollbar.init(document.querySelector('#my-scrollbar'));\n\u003c/script\u003e\n```\n\n## Documentation\n\n| [latest](docs) | [7.x](https://github.com/idiotWu/smooth-scrollbar/tree/7.x) |\n|----|----|\n\n## FAQ\n\n- How to **deal with `position: fixed` elements**? [#362](https://github.com/idiotWu/smooth-scrollbar/discussions/362#discussioncomment-854090)\n- How to **temporarily stop scrolling**? [#361](https://github.com/idiotWu/smooth-scrollbar/discussions/361#discussioncomment-854079)\n- How to **enable hash/anchor scrolling**? [#360](https://github.com/idiotWu/smooth-scrollbar/discussions/360#discussioncomment-854071)\n- How to **direct all scrolling to a particular direction**? [#359](https://github.com/idiotWu/smooth-scrollbar/discussions/359#discussioncomment-854052)\n- How to **disable scrolling in a particular direction**? [#357](https://github.com/idiotWu/smooth-scrollbar/discussions/357#discussioncomment-854036)\n- [more...](https://github.com/idiotWu/smooth-scrollbar/discussions/categories/faq)\n\n## Who's Using It\n\n- [Awwwards Conference](https://conference.awwwards.com/): An Event for UX / UI Designers and Web Developers.\n- [Listeners Playlist](http://lp.anzi.kr/): A cool music player designed by Jiyong Ahn sharing musics from the facebook group 'Listeners Playlist'.\n- [Matter](https://matterapp.com/): A new and better way to grow your professional skills.\n- [Parsons Branding](https://www.parsonsbranding.com/): Brand strategy and design studio based in Cape Town.\n- [zer0bin](https://zer0b.in): Just a place to paste\n- Feel free to add yours here 🤗.\n\n## Credits\n\n- [Logo](https://github.com/idiotWu/smooth-scrollbar/discussions/461) by Kainoa Kanter ([@ThatOneCalculator](https://github.com/ThatOneCalculator))\n\n## License\n\n[MIT](LICENSE)\n\n[npm-version-badge]: https://img.shields.io/npm/v/smooth-scrollbar.svg?style=for-the-badge\n[npm-downloads-badge]: https://img.shields.io/npm/dm/smooth-scrollbar.svg?style=for-the-badge\n[github-action-badge]: https://img.shields.io/github/actions/workflow/status/idiotWu/smooth-scrollbar/deploy.yml?branch=master\u0026style=for-the-badge\n[size-badge]: http://img.badgesize.io/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js?label=core%20size\u0026style=for-the-badge\n[gzip-size-badge]: http://img.badgesize.io/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js?label=gzip%20size\u0026compression=gzip\u0026style=for-the-badge\n[gitpod-badge]: https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?style=for-the-badge\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidiotwu%2Fsmooth-scrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidiotwu%2Fsmooth-scrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidiotwu%2Fsmooth-scrollbar/lists"}