Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.
Features
Scrollbar Components - A lightweight JavaScript library that replaces browser scrollbars with CSS-styled custom scrollbars while preserving native scrolling behavior.
Native Scroll Interception - Overrides the native scrollbar visibility while preserving the original scroll event handling and momentum physics.
CSS Styling - Applies custom scrollbar appearance entirely through CSS classes and pseudo-elements, avoiding JavaScript painting.
Cross-Browser Consistency Layers - Makes scrollbars look and behave the same across different browsers without losing native scroll feel.
Element Node Wrapping - Wraps the target element in a container that hides the native scrollbar and creates a custom scrollbar element alongside it.
DOM Mutation Observation - Uses a MutationObserver to detect content changes inside the scrollable element and recalculates the custom scrollbar dimensions.
Resize Observer Callbacks - Listens for container or content resize events via ResizeObserver to keep the custom scrollbar track and thumb sizes accurate.
Touch Event Processors - Passes touch scroll events directly to the native scroll engine while updating the custom scrollbar thumb position.
Framework Integration Wrappers - Adds custom scrollbars to React, Angular, and Vue applications using dedicated wrapper packages.
Framework Plugins - Provides separate adapter packages for React, Angular, and Vue that mount the core library into each framework's lifecycle.
