Customize scrollbar in modern browsers with smooth scrolling experience.
npm install smooth-scrollbarCustomizable, Flexible, and High Performance Scrollbars!
[![npm][npm-version-badge]](https://www.npmjs.com/package/smooth-scrollbar)
[![monthly downloads][npm-downloads-badge]](https://www.npmjs.com/package/smooth-scrollbar)
[![core size][size-badge]](dist/smooth-scrollbar.js)
[![gzip size][gzip-size-badge]](dist/smooth-scrollbar.js)
[![Build status][github-action-badge]](https://github.com/idiotWu/smooth-scrollbar/actions/workflows/deploy.yml)
[![Gitpod Ready-to-Code][gitpod-badge]](https://gitpod.io/from-referrer/)
> ⚠️ DO NOT use custom scrollbars unless you know what you are doing. Read more
> Tell us about the features you want in the next major update.
Via NPM (recommended):
```
npm install smooth-scrollbar --save
Via Bower:
``
bower install smooth-scrollbar --save
| Browser | Version |
| :------ | :-----: |
| IE | 10+ |
| Chrome | 22+ |
| Firefox | 16+ |
| Safari | 8+ |
| Android Browser | 4+ |
| Chrome for Android | 32+ |
| iOS Safari | 7+ |
https://idiotwu.github.io/smooth-scrollbar/
Since this package has a pkg.module field, it's highly recommended to import it as an ES6 module with some bundlers like webpack or rollup:
`js
import Scrollbar from 'smooth-scrollbar';
Scrollbar.init(document.querySelector('#my-scrollbar'));
`
If you are not using any bundlers, you can just load the UMD bundle:
`html
`
- How to deal with position: fixed` elements? #362
- How to temporarily stop scrolling? #361
- How to enable hash/anchor scrolling? #360
- How to direct all scrolling to a particular direction? #359
- How to disable scrolling in a particular direction? #357
- more...
- Awwwards Conference: An Event for UX / UI Designers and Web Developers.
- Listeners Playlist: A cool music player designed by Jiyong Ahn sharing musics from the facebook group 'Listeners Playlist'.
- Matter: A new and better way to grow your professional skills.
- Parsons Branding: Brand strategy and design studio based in Cape Town.
- zer0bin: Just a place to paste
- Feel free to add yours here 🤗.
- Logo by Kainoa Kanter (@ThatOneCalculator)
[npm-version-badge]: https://img.shields.io/npm/v/smooth-scrollbar.svg?style=for-the-badge
[npm-downloads-badge]: https://img.shields.io/npm/dm/smooth-scrollbar.svg?style=for-the-badge
[github-action-badge]: https://img.shields.io/github/actions/workflow/status/idiotWu/smooth-scrollbar/deploy.yml?branch=master&style=for-the-badge
[size-badge]: http://img.badgesize.io/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js?label=core%20size&style=for-the-badge
[gzip-size-badge]: http://img.badgesize.io/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js?label=gzip%20size&compression=gzip&style=for-the-badge
[gitpod-badge]: https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?style=for-the-badge