Back to all snippets
Library/CSS/Custom Scrollbar
cssintermediatescrollbarstylingwebkit

How to implement Custom Scrollbar in Css

Style custom scrollbars for webkit browsers

Quick Answer

Use `::-webkit-scrollbar`, `::-webkit-scrollbar-track`, and `::-webkit-scrollbar-thumb` pseudo-elements to fully customise scrollbar appearance in Chrome and Safari.

Code Snippet

1.custom-scrollbar::-webkit-scrollbar {
2  width: 8px;
3}
4
5.custom-scrollbar::-webkit-scrollbar-track {
6  background: #f1f1f1;
7  border-radius: 10px;
8}
9
10.custom-scrollbar::-webkit-scrollbar-thumb {
11  background: #888;
12  border-radius: 10px;
13}
14
15.custom-scrollbar::-webkit-scrollbar-thumb:hover {
16  background: #555;
17}

What is Custom Scrollbar?

The ::-webkit-scrollbar family of pseudo-elements lets you fully style scrollbars in Chromium-based browsers and Safari. You can control the width, track background, thumb color, border-radius, and hover states. Firefox uses the simpler scrollbar-width and scrollbar-color properties for a cross-browser approach.

How It Works

  1. 1`::-webkit-scrollbar` sets the overall width (or height for horizontal scrollbars).
  2. 2`::-webkit-scrollbar-track` styles the background groove the thumb slides in.
  3. 3`::-webkit-scrollbar-thumb` styles the draggable handle.
  4. 4Add `scrollbar-width` and `scrollbar-color` for Firefox support alongside the webkit rules.

Common Use Cases

  • Code editors - Match the scrollbar to your editor theme
  • Sidebars - Style navigation panel scrollbars to match the UI
  • Chat windows - Minimal scrollbar for message feed containers
  • Data tables - Thin scrollbar for horizontally scrollable tables

Key Benefits

  • Complete visual control over scrollbar appearance in Chrome and Safari
  • Supports hover states for interactive thumb styling
  • Border-radius makes scrollbars look modern and polished
  • Easy to combine with Firefox scrollbar properties for cross-browser support

Common Mistakes to Avoid

  • Only adding webkit rules and forgetting Firefox — `scrollbar-width: thin` and `scrollbar-color` cover Firefox with two lines.
  • Setting the scrollbar width to 0 — this hides it entirely; use the `hide-scrollbar` pattern instead if that is the intent.
  • Forgetting that these styles only apply to elements with `overflow: auto` or `overflow: scroll`.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more css examples

Frequently Asked Questions

How do I style scrollbars in Firefox?

Firefox supports `scrollbar-width: thin | auto | none` and `scrollbar-color: thumbColor trackColor` as standard CSS properties. Add them alongside the `::-webkit-scrollbar` rules for cross-browser coverage.

Related Snippets

css
beginner
Flexbox Centering
Center elements horizontally and vertically with flexbox
layoutflexboxcentering
css
beginner
Truncate Text
Truncate text with ellipsis for single and multiple lines
texttypographyutilities
css
intermediate
Glassmorphism Effect
Create frosted glass effect with backdrop blur
effectsmodernui

About This Css Code Snippet

This free css code snippet for custom scrollbar is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this intermediate-level example will help you implement custom scrollbar quickly and correctly.

All snippets in the Snippetly library follow css best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses css.

Tags: scrollbar, styling, webkit  | Language: css  | Difficulty: intermediate  | Category: CSS

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets