CSS Scrollbar Styling - Naukri Code 360

Q: How do I customize scroll in CSS?

To customize the scroll in CSS, use properties like "scrollbar-color," "scrollbar-width," and "scrollbar-track-color" to change the scrollbar's look. Adjust these properties to achieve your desired design, your site's visual appeal, and user engagement.

Introduction

Hey, Ninjas. Is your website not looking that good? Do you have a constrained container and want to display more information on your webpage? You need not worry. Here, the CSS scrollbar comes into the picture. This article will help you understand CSS scrollbars from basics to advance. We will discuss how to use CSS scrollbar in many cases.

After reading this entire article, you'll better understand how to debug issues with CSS scrollbars. So let's learn more about CSS scrollbars.

What is CSS?

CSS decides how the HTML elements of your web page will look. You can specify colours, borders, margins, padding, fonts etc. You can link the CSS files to HTML documents. You can use CSS media queries for making responsive designs. You also use CSS to add animations and transitions to your web page. CSS rules have selectors and declarations.

Now we will talk about CSS scrollbars and how you can style them.

What are CSS Scrollbars?

How to Create Custom CSS Scrollbars?

To create custom CSS scrollbars, you use CSS properties to style the appearance of scrollbars in web browsers. Some browsers, like Chrome and Safari, allow you to style scrollbars using::-webkit-scrollbar properties, while Firefox uses scrollbar-color and scrollbar-width properties. However, this feature is not standardized and may only work in specific browsers.

Styling CSS Scrollbars in Chrome, Edge, and Safari

Styling CSS scrollbars in Chrome, Edge, and Safari involves vendor-specific pseudo-elements and properties. Let's explore how to style scrollbars in each of these browsers:

Chrome and Edge:

Chrome and Edge use the WebKit engine for rendering. To style scrollbars in these browsers, use the “::-webkit-scrollbar" pseudo-element and sub-pseudo-elements like::-webkit-scrollbar-thumb and::-webkit-scrollbar-track.

::-webkit-scrollbar: Targets the entire scrollbar.
::-webkit-scrollbar-thumb: Targets the draggable thumb of the scrollbar.
::-webkit-scrollbar-track: Targets the track (background) of the scrollbar.

You can apply CSS properties like background-color, border-radius, border, box-shadow, etc., to these pseudo-elements to style the scrollbar.

Safari:

Safari also uses the WebKit engine so that you can use the same"::-webkit-scrollbar" pseudo-elements for styling. However, Safari provides additional properties like scrollbar color and width for more specific control over the scrollbar's appearance.

Scrollbar-color: Sets the color of the thumb and track in one declaration.
Scrollbar-width: Adjusts the width of the scrollbar.
Remember that the scrollbar-color and scrollbar-width properties may not be supported in other browsers, so you might need to provide fallback styles or consider using feature detection.

Styling Scrollbars in Firefox

Styling scrollbars in Firefox involves using the CSS scrollbar-color and scrollbar-width properties. These properties allow you to customize the appearance of scrollbars in Firefox.

Scrollbar-color: The scrollbar-color property changes the scrollbar thumb and track color. It requires two color values: the first represents the thumb's color, and the second represents the track's color.
Scrollbar-width: The scrollbar-width property allows you to adjust the scrollbar's width. You can set it to 'auto' (default), 'thin,' or 'none.' 'auto' lets the browser decide the width, 'thin' narrows the scrollbar, and 'none' completely hides the scrollbar.

CSS scrollbars will help you change your website's look and feel. The CSS properties you select for your website depend on what design you want. You can change the size, colour, background colour, and border radius. You can also deactivate the scrollbar or hide the scrollbar if you want.

HTML
CSS

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Example 1</title>
    </head>
    <body>
        <div>
            <h2>Crate 1</h2>
            <p>Hey, Ninjas. Let's learn CSS Scrollbars.</p>
        </div>
        <div id="crate">
            <h2>Crate 2</h2>
            <p>Here some text in Crate 2. Donec quis risus nec risus tincidunt consequat at vitae lacus.</p>
            <p>More text in Crate 2. Integer consequat lacus sed neque tincidunt varius. Vivamus aliquet diam sed dolor lobortis congue. Nulla fringilla velit vel mauris consectetur, at</p>
        </div>
    </body>
</html>

CSS

body {
     background-color: #f5f5f5;
}

div {
     width: 300px;
     height: 150px;
     padding: 20px;
     background-color: #ffffe0;
     border: 1px solid #ddd;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     margin-bottom: 20px;
}

/* We are creating two crates one having scrollbar and other without scrollbar. */

#crate {
     width: 300px;
     height: 150px;
     padding: 20px;
     background-color: #ffe5b4;
     border: 3px solid #ddd;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     overflow-y: scroll;
     margin-bottom: 20px;
}

/* Now style the scrollbar */

#crate::-webkit-scrollbar {
     width: 8px;
}

#crate::-webkit-scrollbar-track {
     background: #f1f1f1;
}

#crate::-webkit-scrollbar-thumb {
     background: linear-gradient(to right, #f72585, #b5179e);
     border-radius: 10px;
     border: 1px solid #f1f1f1;
}

#crate::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(to right, #7209b7, #560bad);
     border: 1px solid #560bad;
}

Output:

EXPLANATION

In this example, we have two crates. The first one is a simple one with no scrollbar. The other one has a scrollbar.

When the data of your crate surpasses its height, it is called content overflow.

overflow-y: scroll: The overflow-y property handles the overflow. Setting it a value equal to scroll means adding a vertical scrollbar to the element. Now you can easily slide up and down to see the content that has spilt out.

-webkit-scrollbar: It is CSS-generated content. You can use it to design your scrollbar in Webkit-based browsers, such as Chrome and Safari. You can personalize the look of your scrollbar (width, height, colour etc.) according to your need.

-webkit-scrollbar-track: It is for setting the background of your scrollbar.

-webkit-scrollbar-thumb: It refers to the moveable handle of your scrollbar.

-webkit-scrollbar-thumb:hover: You can design the moveable handle of a scrollbar when you hover over it with your cursor. You can select elements by hovering over them with your cursor.

You can add as many properties to your scroll as you want.

Hidden CSS Scrollbar

It means hiding or customising the default scrollbar appearing in the browser when content overflows its container on your webpage. You can do this using overflow: hidden; or the:-webkit-scrollbar.

HTML
CSS

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Example 2</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div class="crate">
            <p>Hey, Ninjas!! We hope you are doing alright.</p>
        </div>
    </body>
</html>

CSS

/* First create the container with different properties according to your need */
.crate {
     height: 70px;
     overflow-y: scroll;
     -ms-overflow-style: none;
     scrollbar-width: none;
     background-color: rgba(255, 215, 140, 0.6);
     padding: 20px;
     border-radius: 20px;
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     font-size: 20px;
     color: #333;

    /* Giving a glass effect */

     box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 215, 140, 0.6);
}

/* Now we will hide the scrollbar */

.crate::-webkit-scrollbar {
     display: none;
}

/* Styling the text inside the container */

.crate p {
     font-weight: bold;
     text-align: center;
     margin: 0;
     text-shadow: 1px 1px #fff;
}

Output:

EXPLANATION

We use -ms-overflow-style: none; and scrollbar-width: none; properties to hide the default scrollbar. We are setting:-webkit-scrollbar pseudo-selector to display: none; to hide the CSS scrollbar.

Horizontal CSS Scrollbar

It's an element that comes at the bottom or top of a webpage and allows you to scroll through content horizontally. Use the::-webkit-scrollbar with the horizontal keyword to target only the horizontal scrollbar.

HTML
CSS

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Example 4</title>
    </head>
    <body>
        <div class="crate">Crate 1</div>
        <div class="crate">Crate 2</div>
        <div class="crate">Crate 3</div>
        <div class="crate">Crate 4</div>
        <div class="crate">Crate 5</div>
        <div class="crate">Crate 6</div>
    </body>
</html>

CSS

body {
     height: 300px;
     overflow-x: scroll;
     white-space: nowrap;
}

.crate {
     display: inline-block;
     width: 100px;
     height: 119px;
     background-color: #0077be;
     margin-right: 10px;
     border: 2px solid #333;
     box-shadow: 0px 0px 10px #333;
     text-align: center;
     line-height: 119px;
     color: white;
}

/* Even number blocks are with different properties. */

.crate:nth-child(2n) {
     background-color: #f2f2f2;
     color: #333;
}

/* Now style your scrollbar */

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

::-webkit-scrollbar-thumb {
     background-color: orange;
     border-radius: 10px;
}

::-webkit-scrollbar-track {
     background-color: #f2f2f2;
     border-radius: 10px;
}

Output:

EXPLANATION

In this example, we have 6 boxes and an orange-coloured horizontal scrollbar.

We are using webkit-scrollbar-thumb and::-webkit-scrollbar-track to design the thumb and track, respectively. We are setting overflow-x: auto; to make a horizontal scrollbar when your data overflows horizontally.

Accessible CSS Scrollbar

These scrollbars are made to give you a smooth and efficient scrolling experience. You can operate an accessible scrollbar using the keyboard alone, without using a mouse or other pointing device. They are correctly labelled. You can easily distinguish them from other elements on the page.

HTML CODE

HTML
CSS

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Example 5</title>
    </head>
    <body>
        <div class="crate">Crate 1</div>
        <div class="crate">Crate 2</div>
        <div class="crate">Crate 3</div>
        <div class="crate">Crate 4</div>
    </body>
</html>

CSS

/* Design your scrollbar */

::-webkit-scrollbar {
     width: 10px;
}
::-webkit-scrollbar-thumb {
     background-color: #666;
     border-radius: 10px;
}
::-webkit-scrollbar-track {
     background-color: #f2f2f2;
     border-radius: 10px;
}

/* Make your scrollbar visible when it is focused */

::-webkit-scrollbar-thumb:focus {
     background-color: #ccc;
}

/* Make your scrollbar keyboard accessible */

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:focus {
     background-color: #aaa;
}

/* Finally, add more styling */

body {
     background-color: #fffacd;
     padding: 20px;
     height: 200px;
     overflow-x: scroll;
     white-space: nowrap;
}

.crate {
     display: inline-block;
     width: 100px;
     height: 119px;
     background-color: #ffe4b5;
     margin-right: 10px;
     border: 2px solid #333;
     box-shadow: 0px 0px 10px #333;
     text-align: center;
     line-height: 119px;
     color: #333;
}

/* Even number blocks are with different properties. */

.crate:nth-child(2n) {
     background-color: #f2f2f2;
     color: #333;
}

OUTPUT

EXPLANATION

The ::-webkit-scrollbar-thumb: hover and ::-webkit-scrollbar-thumb: focus will make the scrollbar keyboard easy to use by changing the background colour of the thumb when you hover or focus.

Advantages of CSS Scrollbar

Here are some pros of using CSS scrollbars:

You can use them to improve the visual look of a webpage.
It will give you smooth scrolling functionality.
It will provide you with an indication of content length.
It can reduce your web page clutter. It will hide scrollbars when unnecessary.
It can improve the readability of your content by giving larger font sizes.

Disadvantages of CSS Scrollbar

Here are some cons of using CSS scrollbars:

Sometimes, it can interfere with other web page elements.
It can sometimes cause layout issues. It may shift the content position.
Sometimes, it can be difficult or confusing to use.
It may slow your web page loading time.
You should have advanced knowledge of CSS to implement it correctly.

Frequently Asked Questions

How do I add a scroll bar in CSS?

To add a scroll bar in CSS, arrange the "overflow" property of the container element to "auto" or "scroll." This activates a scroll bar when content overflows and enables users to navigate through the content easily.

How to show the scrollbar using CSS?

To display a scrollbar using CSS, apply the "overflow" property to the container element. Use "overflow: auto;" for vertical and horizontal scrollbars or "overflow-x: scroll;" for a horizontal scrollbar. The scrollbar will appear when the content exceeds the container's dimensions.

Can you style the scrollbar CSS?

Yes, you can style scrollbars using CSS. Utilize properties like "scrollbar-width," "scrollbar-color," and "scrollbar-track-color" to customize the scrollbar's appearance and enhances the overall design and user experience of your webpage.

How do I customize scroll in CSS?

To customize the scroll in CSS, use properties like "scrollbar-color," "scrollbar-width," and "scrollbar-track-color" to change the scrollbar's look. Adjust these properties to achieve your desired design, your site's visual appeal, and user engagement.

Conclusion

In this article, we learned how to use a scrollbar with various examples. We discussed the definition, pros, and cons of CSS Scrollbars. It guides how to implement custom designs and add accessibility features. The article has many examples of code to work with CSS Scrollbars in different cases. Refer to additional CSS and web development resources to improve your knowledge and learn more.

Happy Coding!