Smooth Scrollbar

Customizable, Extendable, and High-Performance JavaScript-Based Scrollbar Solution.
GitHub
3.32k
Created 9 years ago, last commit a year ago
23 contributors
948 commits
Stars added on GitHub, month by month
11
12
1
2
3
4
5
6
7
8
9
10
2023
2024
Stars added on GitHub, per day, on average
Yesterday
-1
Last week
-0.1
/day
Last month
+0.1
/day
Last 12 months
+0.3
/day
npmPackage on NPM
Monthly downloads on NPM
11
12
1
2
3
4
5
6
7
8
9
10
2023
2024
README

Smooth Scrollbar

Customizable, Flexible, and High Performance Scrollbars!

npm monthly downloads core size gzip size Build status Gitpod Ready-to-Code

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

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

License

MIT