- ×
Customizable, Pluginable, and High Performance Scrollbars!
Filed under animationInstallation
⚠️ 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 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
- How to deal with