SimpleBar

Custom scrollbars vanilla javascript library with native scroll, done simpl...

Scrolling
Grsmto/simplebargrsmto.github.io/simplebar/simplebar

README

SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances.
Unlike some popular plugins, SimpleBar doesn't mimic scroll with Javascript, causing janks and strange scrolling behaviours...
You keep the awesomeness of native scrolling...with a custom scrollbar!

SimpleBar does NOT implement a custom scroll behaviour. It keeps the native overflow: auto scroll and only replace the scrollbar visual appearance.

⚠️ This library is only partially maintained at the moment. There is a v6 in the work but has not been released yet. However, I'm still reviewing and merging contributions actively! ⚠️

Design it as you want


SimpleBar uses pure CSS to style the scrollbar. You can easily customize it as you want! Or even have multiple style on the same page...or just keep the default style ("Mac OS" scrollbar style).

Lightweight and performant


SimpleBar doesn't use Javascript to handle scrolling. You keep the performances/behaviours of the native scroll. There is known issue with bundle size but this should be solved in v6.

Supported everywhere


SimpleBar has been tested on the following browsers: Chrome, Firefox, Safari, Edge, IE11.

Getting started


The easiest way to use SimpleBar is with the default dependency-free version: npm install simplebar.

- Core documentation

If you are using a framework, SimpleBar also supports the most popular ones: Vue, Angular and React.

- React documentation
- Angular documentation
- Vue documentation

Demo


You can check our demo page (which is also the one we use for automated tests).

Limitations


Before using SimpleBar it's important to know its limitations!

Changelog


See changelog here : https://github.com/Grsmto/simplebar/releases

#

👨‍💻 I'm available for hire! Reach out to me!

🚧 Check out my new project Scroll Snap Carousel!

#

Credits


- KingSora for multiple features and inspirations (height: auto detection, RTL mode cross browser support and more) with OverlayScrollbars.
- Jonathan Nicol for original idea with Trackpad Scroll Emulator.
- Cassio Bittencourt for the logo design.