Open In App

How to create a custom scrollbar using CSS ?

Last Updated : 17 Mar, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

A scrollbar is a graphical user interface used to represent a document or webpage that is larger than the visible area. By default, web browsers provide a scrollbar with a predefined style, but with HTML and CSS, you can create a custom scrollbar that matches your website’s design and layout.

The scrollbar element has various pseudo-elements such as ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, and ::-webkit-scrollbar-button that can be used to apply different styles. You can customize the scrollbar’s width, color, background, border, and other properties to match your website’s design. 

It is important to note that custom scrollbars are not supported in all browsers, and the level of customization you can achieve may vary depending on the browser. 

 

Approach: 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.
  • Use CSS to style the scrollbar elements, such as ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, and ::-webkit-scrollbar-button for WebKit-based browsers, and ::-moz-scrollbar, ::-moz-scrollbar-track, ::-moz-scrollbar-thumb, and ::-moz-scrollbar-button for Firefox.
  • 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.

Note: Not all browsers support custom scrollbars using CSS, so it’s important to provide fallback styles for browsers that do not support them.  You can do this by using conditional CSS statements or JavaScript to detect the user’s browser and apply different styles accordingly.

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>


Output:

GFG | How to create a custom scrollbar using CSS

GFG | How to create a custom scrollbar using CSS

Supported Browser: Custom scrollbars are supported in several popular web browsers, but their level of support may vary depending on the browser.

  • Google Chrome
  • Safari
  • Opera
  • Mozilla Firefox

Conclusion: Customizing scrollbars with HTML and CSS is a great way to add a personalized touch to your website’s design. By using the various pseudo-elements available for the scrollbar, you can change the appearance of the scrollbar to match your website’s color scheme and layout.



Similar Reads

How to style scrollbar thumb for the webkit browsers and what are components of scrollbar ?
We use the scrollbar daily while using the web. Scrollbars are tools with the help of which we can scroll the content of our webpage. The problem with the default scrollbars is that they always appear in the same dull gray color. But then how to make them look good? In this article, we will learn how to make a scrollbar look good. What are the comp
2 min read
How to create an image gallery with a horizontal scrollbar using CSS ?
In this article, we will learn how to create an image gallery with a horizontal scrollbar using CSS. It provides a way to navigate through a set of images, on scroll horizontally to view different pictures. This effect is helpful when space optimization of the web page is a concern that efficiently utilizes the horizontal space for displaying a lar
4 min read
How to Change the Position of Scrollbar using CSS ?
The features of the scroll bar can be controlled by the use of CSS. Earlier it was not possible but new versions of CSS made it possible for the web designer. We can use the CSS "::-webkit-scrollbar" property which is responsible for changing the shape, color, size, shade, shadow, etc. of the scroll bar. But, here the property which we will use is
9 min read
How to Change Style of Scrollbar using Tailwind CSS ?
Tailwind does not provide any built-in utilities for styling scrollbars, but you can customize the scrollbar appearance using CSS. To change the scrollbar's appearance using Tailwind, we need to use the scrollbar-* classes. These classes are used to customize various aspects of the scrollbar, such as its width, color, and behavior. Syntax::-webkit-
3 min read
How to create scrollable element in Tailwind without a scrollbar ?
Creating a scrollable element without a visible scrollbar in Tailwind CSS can provide a sleeker UI, reducing clutter and maintaining a clean aesthetic while still allowing users to interact with content via scrolling. To create a scrollable element in Tailwind CSS without a visible scrollbar, apply the overflow-hidden class to the container and `ov
4 min read
CSS scrollbar-width Property
The scrollbar-width property is used to set the width or thickness of an element's scrollbar when shown. This property can be used on pages where the user interface requires the element to be displayed more prominently and shrinking the scrollbar width gives more space to the element.This a currently an experimental property and some of the major b
3 min read
CSS | ::-webkit-scrollbar
::-webkit-scrollbar is a pseudo-element in CSS employed to modify the look of a browser's scrollbar. Before we start with how it works and how can it be implemented, we need to know some facts about the element. Browsers like Chrome, Safari and Opera support this standard Browsers like firefox don't support this For the webkit browsers, you can use
3 min read
CSS overflow-x: visible and overflow-y: hidden causing scrollbar issue
CSS overflow-x and overflow-y attributes are used to limit content overflow in the horizontal and vertical directions, respectively. The scrollbar may show on the page even when there is nothing to scroll when overflow-x is set to "visible" and overflow-y is set to "hidden". Syntax: For horizontal overflow:overflow-x: visible | hidden | scroll | au
2 min read
CSS scrollbar-color Property
In CSS, scrollbar-color property allows customizing the colors of scrollbar components, such as the thumb and track. It accepts two values: one for the thumb color and another for the track color. The track of a scrollbar is the background of the scrollbar which stays fixed and shows the area that can be scrolled. The thumb of the scrollbar refers
3 min read
How to add custom styles and ways to add custom styles in Tailwind-CSS ?
Tailwind is a popular CSS framework that makes your User Interface design making the process easier. It provides low-level classes and those classes combine to create styles for various components. Tailwind-CSS comes with a bunch of predefined styling but as a developer, we need more custom styling and the styles offered by tailwind are not enough
3 min read