Smooth Scrollbar

Customizable, Extendable, and High-Performance JavaScript-Based Scrollbar S...

Scrolling
idiotWu/smooth-scrollbaridiotwu.github.io/smooth-scrollbar/smooth-scrollbar

README


Smooth Scrollbar


Customizable, 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/)


Installation


⚠️ 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):

  1. ```
  2. npm install smooth-scrollbar --save
  3. ```

Via Bower:

  1. ```
  2. bower install smooth-scrollbar --save
  3. ```

Browser Compatibility


| Browser | Version |
| :------ | :-----: |
| IE      | 10+     |
| Chrome  | 22+     |
| Firefox | 16+     |
| Safari  | 8+      |
| Android Browser | 4+ |
| Chrome for Android | 32+ |
| iOS Safari | 7+ |

Demo


https://idiotwu.github.io/smooth-scrollbar/

Usage


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:

  1. ``` js
  2. import Scrollbar from 'smooth-scrollbar';

  4. Scrollbar.init(document.querySelector('#my-scrollbar'));
  5. ```

If you are not using any bundlers, you can just load the UMD bundle:

  1. ``` html
  2. <script src="dist/smooth-scrollbar.js"></script>
  3. <script>
  4.   var Scrollbar = window.Scrollbar;
  6.   Scrollbar.init(document.querySelector('#my-scrollbar'));
  7. </script>
  8. ```

Documentation


[latest](docs)[7.x](https://github.com/idiotWu/smooth-scrollbar/tree/7.x)
|----|----|

FAQ


- 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...

Who's Using It


- 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 🤗.

Credits


- Logo by Kainoa Kanter (@ThatOneCalculator)

License


MIT

[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/workflow/status/idiotWu/smooth-scrollbar/Deploy%20to%20GitHub%20Pages?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