Skip to content

Creating a Custom Scrollbar

Jump to bottom
samet edited this page May 15, 2024 · 1 revision

Creating a Custom Scrollbar

Customizing scrollbars can greatly enhance the user experience and aesthetics of a web application. In this guide, we'll explore how to create a custom scrollbar using CSS and JavaScript, specifically for web applications running on Chromium-based browsers such as Google Chrome, Microsoft Edge, and Opera.

Table of Contents

Introduction

Scrollbars are an essential part of web applications, but default scrollbars can sometimes be visually unappealing or inconsistent with the overall design of your website. By customizing scrollbars, you can create a more cohesive and visually appealing user interface.

Basic Concepts

Chromium-based browsers support the ::-webkit-scrollbar pseudo-element, which allows for extensive customization of scrollbars. Here are the main pseudo-elements you can use:

  • ::-webkit-scrollbar: The entire scrollbar.
  • ::-webkit-scrollbar-thumb: The draggable part of the scrollbar.
  • ::-webkit-scrollbar-track: The track in which the scrollbar thumb slides.

Custom Scrollbar with CSS

To create a custom scrollbar using CSS, you need to target these pseudo-elements and apply your desired styles. Below is a step-by-step guide:

Step 1: Basic Styles

First, apply basic styles to the scrollbar and its components.

/* Width and height of the scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* Background of the scrollbar track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Style of the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 6px;
}

/* Style of the scrollbar thumb when hovered */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

Step 2: Applying Styles to a Specific Element

To target a specific element, use the element's class or ID.

/* Targeting a specific element */
.my-scrollable-div::-webkit-scrollbar {
    width: 10px;
}

.my-scrollable-div::-webkit-scrollbar-thumb {
    background-color: #3498db;
    border-radius: 10px;
    border: 2px solid #2980b9;
}

Step 3: Adding Smooth Scrolling

You can add smooth scrolling to enhance the user experience.

html {
    scroll-behavior: smooth;
}

Advanced Customization with JavaScript

For more dynamic and interactive customizations, JavaScript can be used. For instance, you can change the scrollbar style based on user interactions or specific conditions.

Example: Changing Scrollbar Color on Scroll

Here's how you can change the scrollbar color based on the scroll position:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Scrollbar</title>
    <style>
        body {
            height: 2000px;
            margin: 0;
        }

        ::-webkit-scrollbar {
            width: 12px;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <script>
        window.onscroll = function() {
            let scrollPosition = window.scrollY;
            let thumbColor = scrollPosition > 100 ? '#ff5733' : '#888';
            document.querySelector('::-webkit-scrollbar-thumb').style.background = thumbColor;
        };
    </script>
</body>
</html>

Clone this wiki locally