How to Create a Custom Scrollbar using CSS?

Last Updated : 10 Oct, 2024

Scrollbars are common graphical user interface elements that allow users to navigate content beyond the visible area. By default, web browsers provide basic scrollbars with a predefined style. However, using HTML and CSS, you can customize the scrollbar to match your website’s design better.

Scrollbars consist of various elements that can be styled individually, using specific CSS pseudo-elements for WebKit-based browsers (like Chrome, Safari, and Opera) and Firefox. The key pseudo-elements for customizing scrollbars include:

::-webkit-scrollbar: The entire scrollbar.
::-webkit-scrollbar-track: The track (background) of the scrollbar.
::-webkit-scrollbar-thumb: The draggable part of the scrollbar.
::-webkit-scrollbar-button: Optional buttons on the scrollbar (not commonly used).
::-moz-scrollbar, ::-moz-scrollbar-track, ::-moz-scrollbar-thumb: For customizing Firefox scrollbars.

Note: Custom scrollbars are not fully supported in all browsers, and the level of customization can vary. Providing fallback styles or default behaviors for unsupported browsers is recommended.

Approach to Create a Custom Scrollbar

To create a custom scrollbar using HTML and CSS, you can follow these general steps:

Create a container element that will hold the content and the scrollbar. This can be a div or any other HTML element.
Set the height of the container element to a fixed value, and add overflow-y: scroll to enable the scrollbar. This will allow the content to be scrolled vertically.
Customize the scrollbar’s width, color, background, border, and other properties using CSS.
Add any additional styling, such as hover and active states for the scrollbar elements, to enhance the user experience.
Finally, test the custom scrollbar in different web browsers to ensure that it works as intended and that it is visually appealing.

Example: This example shows the use of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>
        How to create a custom scrollbar
        using HTML and CSS?
    </title>

    <style>
        .scroll-container {
            height: 300px;
            overflow-y: scroll;
        }

        .scroll-container::-webkit-scrollbar {
            width: 12px;
        }

        .scroll-container::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .scroll-container::-webkit-scrollbar-thumb {
            background: #888;
        }

        .scroll-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .scroll-container::-webkit-scrollbar-button {
            display: none;
        }
    </style>
</head>

<body>
    <div class="scroll-container">
        <!-- Content goes here -->
        <strong>What is Data Structure?</strong>
        <p>
            A data structure is defined as a particular
            way of storing and organizing data in our
            devices to use the data efficiently and
            effectively. The main idea behind using
            data structures is to minimize the time
            and space complexities. An efficient data
            structure takes minimum memory space and
            requires minimum time to execute the data.
        </p>

        <strong>What is Algorithm?</strong>
        <p>
            Algorithm is defined as a process or set
            of well-defined instructions that are
            typically used to solve a particular group
            of problems or perform a specific type of
            calculation. To explain in simpler terms,
            it is a set of operations performed in a
            step-by-step manner to execute a task.
        </p>

        <strong>How to start learning DSA?</strong>
        <p>
            The first and foremost thing is dividing
            the total procedure into little pieces
            which need to be done sequentially. The
            complete process to learn DSA from
            scratch can be broken into 4 parts:
        </p>

        <li>Learn about Time and Space complexities</li>
        <li>
            Learn the basics of individual
            Data Structures
        </li>
        <li>Learn the basics of Algorithms</li>
        <li>Practice Problems on DSA</li>

        <strong> 1. Learn about Complexities</strong>
        <p>
            Here comes one of the interesting and
            important topics. The primary motive to
            use DSA is to solve a problem effectively
            and efficiently. How can you decide if a
            program written by you is efficient or
            not? This is measured by complexities.
            Complexity is of two types:
        </p>

        <li>
            <strong>Time Complexity:</strong> Time
            complexity is used to measure the amount
            of time required to execute the code.
        </li>
        <li>
            <strong>Space Complexity:</strong>
            Space complexity means the amount of
            space required to execute successfully
            the functionalities of the code. You
            will also come across the term Auxiliary
            Space very commonly in DSA, which refers
            to the extra space used in the program
            other than the input data structure.
        </li>
        <p>
            Both of the above complexities are
            measured with respect to the input
            parameters. But here arises a problem.
            The time required for executing a code
            depends on several factors, such as:
        </p>
        <li>
            The number of operations performed
            in the program
        </li>
        <li>The speed of the device, and also</li>
        <li>
            The speed of data transfer if being
            executed on an online platform.
        </li>
    </div>
</body>

</html>