10 Best Custom Scrollbar JavaScript Libraries (2026 Update)

Browser scrollbars often break the visual consistency of modern web applications. Windows and macOS render scrollbars differently, which forces developers to seek custom scrollbar solutions for a unified look. This article evaluates the top 10 JavaScript libraries to solve this UI challenge.

We ranked these custom scrollbar libraries based on GitHub stars, recent update frequency, and page views on CSSScript.com over the past year. The list prioritizes libraries that maintain accessibility and performance while offering styling flexibility.

Review the options below to select the library that fits your specific technical requirements.

Originally Published Jan 27 2017, updated Dec 23, 2025

How to Customize Scrollbars with Pure CSS

Using pure CSS is the most performant way to style scrollbars. This method avoids JavaScript and prevents layout thrashing. Modern web development requires two sets of rules to cover all browsers: W3C Standard (Firefox) and WebKit (Chrome, Edge, Safari).

1. The Universal CSS Snippet

Apply this class to your body or any scrollable container:

/* Custom Scrollbar Class */
.custom-scroll {
  /* 1. Firefox & Modern Standard */
  scrollbar-width: thin;  /* Options: auto, thin, none */
  scrollbar-color: #888 #f1f1f1; /* thumb color | track color */
  /* Ensure vertical scrolling is enabled */
  overflow-y: auto;
}
/* 2. Chrome, Edge, and Safari (WebKit) */
/* Total width/height of the scrollbar */
.custom-scroll::-webkit-scrollbar {
  width: 10px; /* Vertical width */
  height: 10px; /* Horizontal height */
}
/* The track (background) */
.custom-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
/* The draggable handle (thumb) */
.custom-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
/* Handle on hover */
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

2. Understanding the Properties

• Firefox (scrollbar-width / scrollbar-color): Firefox uses the official W3C standard. Customization is limited to thickness and color. You cannot modify border radius or shadows in Firefox currently.
• WebKit (::-webkit-scrollbar): Chrome, Edge, and Safari use pseudo-elements. This allows full control over the scrollbar’s width, track, and thumb using standard CSS properties like border-radius and box-shadow.

3. Important Implementation Notes

• Mobile Behavior: iOS Safari and Android Chrome often ignore custom scrollbar widths to save screen space. They typically display a thin, overlay scrollbar regardless of your CSS.
• Hiding Scrollbars: To keep scrolling functionality but hide the visual bar, use this snippet:

  .hide-scroll {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .hide-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  

• Accessibility: Maintain high contrast between the thumb and the track. Users must easily distinguish the scrollbar from the page background.

The 10 Best Custom Scrollbar JS Libraries:

1. Elegant Themeable Custom Scrollbars – OverlayScrollbars

OverlayScrollbars is a JavaScript library used to create elegant, customizable, and themeable scrollbars on any scrollable elements.

Features:

• Custom Styling: Full control over scrollbar appearance using CSS variables.
• Native Behavior Preservation: Keeps the familiar scroll feel, including mouse wheel, touch, and keyboard navigation.
• Accessibility: Designed with accessibility in mind, not breaking native interactions.
• Cross Browser: Works on modern browsers like Firefox, Chrome, Edge, Safari, and more.
• Framework Agnostic: Vanilla JS core, with official wrappers for React, Vue, Angular, Svelte, and Solid.
• Server-Side Rendering (SSR) Capable: Can run in Node, Deno, and Bun environments.
• Tree-Shaking: Only bundles the code you use, thanks to its plugin system.
• Automatic Updates: Detects content and size changes without polling.
• Supports body element: You can apply it directly to the body.

Demo Download

2. Tiny JavaScript Plugin For Beautifying Scrollbar – perfect-scrollbar

A lightweight JavaScript plugin that allows you to beautify the default scroll bars without changing or adding any style on original elements.

Features:

• No change on design layout
• No manipulation on DOM tree
• Use plain scrollTop and scrollLeft
• Scrollbar style is fully customizable
• Efficient update on layout change

[Demo] [Download]

3. Performant Custom Scrollbar JavaScript Library – SimpleBar

A simple, standalone JavaScript library that appends a custom scrollbar to any scrollable container which has overflowing content. Works with CSS overflow: auto property and keeps the native scroll behavior.

[Demo] [Download]

4. Customizable Scrollbar With Smooth Scroll – smooth-scrollbar

A JavaScript library used to create a customizable, performant scrollbar with smooth scrolling effects for scrollable content.

[Demo] [Download]

5. Lightweight Mobile-compatible Custom Scrollbar Library – letmescroll.js

A lightweight yet robust custom scrollbar in vanilla JavaScript. It contains NO dependencies, supports mobile devices, and works with native scroll events, which makes manipulation of any scrollbar possible. The scrollbar can be used in almost any application and can be customized quickly and easily.

Features:

• Native Scroll Behavior
• Standardized events / shortcuts / API
• Fast & Lightweight
• No dependencies, built with VanillaJS
• Tested in all modern browsers
• Easy Customization
• Multiple Callbacks

[Demo] [Download]

6. Beautify Native Scrollbar With Custom CSS – Slim-scroll

Slim-scroll is a Pure JavaScript plugin to replace the native browser scrollbar with one that can be easily customized via CSS.

• Easier to color the custom scrollbar using CSS.
• Can animate easily.
• Re-evaluates when the container is fluid, vertically.