Skip to content

idiotWu/smooth-scrollbar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jun 5, 2023
66c67b8 · Jun 5, 2023
Jan 28, 2022
Mar 16, 2022
Jun 5, 2023
Mar 16, 2022
Dec 24, 2021
Jun 5, 2023
Oct 6, 2017
Oct 8, 2017
Oct 17, 2020
Jun 5, 2023
Oct 8, 2017
Oct 17, 2020
Oct 10, 2021
Jan 18, 2023
Jun 5, 2023
Jun 5, 2023
Jun 5, 2023
Aug 17, 2018
Aug 17, 2018

Repository files navigation

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