Smooth Scrollbar

Customizable, Flexible, and High Performance Scrollbars!

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.

THIS IS A DERIVED VERSION FROM THE ORIGINAL. This version has external rAF support.

Via NPM:

npm install @tinokaartovuori/smooth-scrollbar --save

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:

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:

<script src="dist/smooth-scrollbar.js"></script>

<script>
  var Scrollbar = window.Scrollbar;

  Scrollbar.init(document.querySelector('#my-scrollbar'));
</script>

Documentation

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