# grsmto/simplebar

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/grsmto-simplebar).**

6,406 stars · 530 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/Grsmto/simplebar
- Homepage: http://grsmto.github.io/simplebar/
- awesome-repositories: https://awesome-repositories.com/repository/grsmto-simplebar.md

## Description

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

## Tags

### User Interface & Experience

- [Scrollbar Components](https://awesome-repositories.com/f/user-interface-experience/scrollbar-components.md) — A lightweight JavaScript library that replaces browser scrollbars with CSS-styled custom scrollbars while preserving native scrolling behavior.
- [Native Scroll Interception](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-behavior-control/native-scroll-interception.md) — Overrides the native scrollbar visibility while preserving the original scroll event handling and momentum physics.
- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling.md) — Applies custom scrollbar appearance entirely through CSS classes and pseudo-elements, avoiding JavaScript painting.
- [Resize Observer Callbacks](https://awesome-repositories.com/f/user-interface-experience/navigation-routing/iframe/auto-resizing-iframes/resize-observer-callbacks.md) — Listens for container or content resize events via ResizeObserver to keep the custom scrollbar track and thumb sizes accurate.
- [Touch Event Processors](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-handlers/touch-event-processors.md) — Passes touch scroll events directly to the native scroll engine while updating the custom scrollbar thumb position.

### Web Development

- [Cross-Browser Consistency Layers](https://awesome-repositories.com/f/web-development/cross-browser-consistency-layers.md) — Makes scrollbars look and behave the same across different browsers without losing native scroll feel.
- [Element Node Wrapping](https://awesome-repositories.com/f/web-development/dom-element-manipulators/element-node-wrapping.md) — Wraps the target element in a container that hides the native scrollbar and creates a custom scrollbar element alongside it.
- [DOM Mutation Observation](https://awesome-repositories.com/f/web-development/dom-mutation-observation.md) — Uses a MutationObserver to detect content changes inside the scrollable element and recalculates the custom scrollbar dimensions.
- [Framework Integration Wrappers](https://awesome-repositories.com/f/web-development/framework-integration-wrappers.md) — Adds custom scrollbars to React, Angular, and Vue applications using dedicated wrapper packages.
- [Framework Plugins](https://awesome-repositories.com/f/web-development/framework-plugins.md) — Provides separate adapter packages for React, Angular, and Vue that mount the core library into each framework's lifecycle.