smooth-scrollbar

esm
Customize scrollbar in modern browsers with smooth scrolling experience.
Keywords
scrollbarcustomizeaccelerationperformance
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 8.8.4
- 8.8.3
- 8.8.2
- 8.8.1
- 8.8.0
- 8.7.5
- 8.7.4
- 8.7.3
- 8.7.2
- 8.7.1
- 8.7.0
- 8.6.3
- 8.6.2
- 8.6.1
- 8.6.0
- 8.5.3
- 8.5.2
- 8.5.1
- 8.5.0
- 8.4.1
- 8.4.0
- 8.3.1
- 8.3.0
- 8.2.7
- 8.2.6
- 8.2.5
- 8.2.4
- 8.2.3
- 8.2.2
- 8.2.1
- 8.2.0
- 8.1.12
- 8.1.11
- 8.1.10
- 8.1.9
- 8.1.8
- 8.1.7
- 8.1.6
- 8.1.4
- 8.1.3
- 8.1.2
- 8.1.1
- 8.1.0
- 8.0.4
- 8.0.3
- 8.0.1
- 7.4.1
- 7.4.0
- 7.3.1
- 7.3.0
- 7.2.10
- 7.2.9
- 7.2.8
- 7.2.7
- 7.2.6
- 7.2.3
- 7.2.2
- 7.2.1
- 7.2.0
- 7.1.4
- 7.1.3
- 7.1.2
- 7.1.1
- 7.1.0
- 6.4.0
- 6.3.4
- 6.3.3
- 6.3.2
- 6.3.1
- 6.3.0
- 6.2.0
- 6.1.2
- 6.1.1
- 6.1.0
- 6.0.4
- 6.0.3
- 6.0.2
- 6.0.1
- 6.0.0
- 5.6.5
- 5.6.4
- 5.6.3
- 5.6.2
- 5.6.1
- 5.6.0
- 5.5.3
- 5.5.2
- 5.5.1
- 5.5.0
- 5.3.10
- 5.3.9
- 5.3.8
- 5.3.7
- 5.3.6
- 5.3.5
- 5.3.4
- 5.3.3
- 5.3.2
- 5.3.1
- 5.3.0
- 5.2.1
- 5.2.0
- 5.1.0
- 5.0.1
- 5.0.0
- 4.2.2
- 4.2.1
- 4.2.0
- 4.1.3
- 4.1.2
- 4.1.1
- 4.1.0
- 4.0.2
- 4.0.1
- 4.0.0
- 3.1.0
- 3.0.0
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.4.4
- 1.4.3
- 1.4.2
- 1.4.1
- 1.4.0
- 1.3.2
- 1.3.1
- 1.3.0
- 1.2.2
- 1.2.1
- 1.1.9
- 1.1.8
- 1.1.7
- 1.1.6
- 1.1.5
- 1.1.4
- 1.1.3
- 1.1.2
- 1.1.1
- 1.1.0
- 1.0.2
- 1.0.1
- 1.0.0
- 8.0.0-beta.3
- 8.0.0-beta.2
- 8.0.0-beta.1
<script src=" https://cdn.jsdelivr.net/npm/smooth-scrollbar@8.8.4/dist/smooth-scrollbar.min.js "></script>
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):
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
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)