How to change the scrollbar color with SimpleBar?

Use pure CSS to style the scrollbar; for example, target the .simplebar-scrollbar class with background-color properties. The README emphasizes CSS-based customization for flexibility.

SimpleBar or native CSS scrollbar styling: which is better?

SimpleBar offers broader browser support and consistent styling across platforms, while native CSS scrollbar styling is limited to newer browsers and may lack customization depth.

Does SimpleBar work with dynamic content that changes height?

Yes, but it requires manual reinitialization or event handling in vanilla JS; framework integrations like React may handle this automatically with lifecycle methods.

How to integrate SimpleBar into a React functional component?

Install the simplebar-react package, import SimpleBarReact, and wrap your content; refer to the React documentation for hooks-based examples and props.

What are the performance implications on mobile devices?

It maintains native scrolling, so performance is smooth, but the 6KB JS load and CSS processing might slightly impact low-end devices, though generally minimal.

Can I use SimpleBar with CSS frameworks like Tailwind?

Yes, since it relies on pure CSS, you can apply Tailwind classes or custom styles to the scrollbar elements, but ensure proper class targeting in your setup.

Open-Awesome

simplebar

MITTypeScriptsimplebar@6.2.7

A vanilla JavaScript library that replaces default browser scrollbars with custom CSS-styled ones while preserving native scrolling performance.

Visit Website GitHub

6.4k stars527 forks0 contributors

What is simplebar?

SimpleBar is a vanilla JavaScript library that replaces the browser's default scrollbars with custom CSS-styled scrollbars. It solves the problem of inconsistent or unattractive native scrollbars by providing a lightweight, easy-to-use alternative that maintains native scrolling performance and behavior. Unlike plugins that mimic scrolling with JavaScript, SimpleBar keeps the native `overflow: auto` scroll and only changes the visual appearance.

Target Audience

Frontend developers and web designers who need consistent, customizable scrollbars across browsers without sacrificing scrolling performance or native behavior.

Value Proposition

Developers choose SimpleBar because it's lightweight (6KB), preserves native scrolling performance, and offers pure CSS customization without the jank and strange behaviors of JavaScript-based scrolling emulation. It's cross-browser compatible and integrates easily with popular frameworks like React, Angular, and Vue.

Overview

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

Use Cases

Best For

Replacing default browser scrollbars with custom CSS-styled ones
Maintaining native scrolling performance while customizing scrollbar visuals
Ensuring consistent scrollbar appearance across different browsers
Adding lightweight scrollbar customization to vanilla JavaScript projects
Integrating custom scrollbars into React, Angular, or Vue applications
Avoiding performance issues caused by JavaScript-based scroll emulation

Not Ideal For

Projects requiring JavaScript-based scroll interactions like smooth scrolling or scroll snapping
Applications where scrollbars need custom interactive behaviors beyond visual styling
Environments with strict CSP policies that restrict dynamic CSS or JS injection
Teams needing server-side rendering with styled scrollbars without any client-side JavaScript

Pros & Cons

Pros

Native Scroll Performance

Preserves browser's native overflow: auto scrolling, avoiding jank and strange behaviors as highlighted in the README's philosophy.

Lightweight and Efficient

Only 6KB minified with no JavaScript scrolling overhead, ensuring minimal performance impact on web projects.

Pure CSS Customization

Allows scrollbar styling entirely with CSS, supporting multiple styles per page or a default Mac OS look.

Broad Browser Support

Tested on Chrome, Firefox, Safari, Edge, and IE11, providing consistent cross-browser compatibility.

Framework Integration

Offers dedicated packages for React, Angular, and Vue, simplifying adoption in modern frontend stacks.

Cons

No Advanced Scroll Features

Limited to visual customization; does not support JavaScript-based scroll behaviors like infinite scroll or parallax effects.

Setup Overhead for Vanilla JS

Requires manual DOM handling for dynamic content, unlike drop-in solutions, which can increase initial development time.

Documentation Fragmentation

Documentation is split across separate repositories for core and frameworks, making it harder to troubleshoot specific issues.

Browser Quirks in Older Versions

While IE11 is supported, older browsers may have rendering inconsistencies with CSS customizations, as noted in testing.

Frequently Asked Questions

Related Projects

OverlayScrollbars

A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.

Stars5,227

Forks250

Last commit3 days ago

ngx-scrollbar

Custom overlay-scrollbars with native scrolling mechanism

Stars652

Forks101

Last commit5 months ago

ngx-page-scroll

Animated scrolling functionality for angular written in pure typescript

Stars470

Forks112

Last commit3 months ago

ngx-ui-scroll

Virtual/infinite scroll for Angular

Stars233

Forks18

Last commit8 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub