Create an Overlay and Transparent Scrollbar that is Visible on Hover using CSS

Hello, developers! In this blog post, we will learn how to create and style a transparent and overlay scrollbar that is only visible when the scrolling container or content is hovered over. Overlay and transparent scrollbars enhance user experience because their availability does not affect layout size, and they appear over content on hover.

We will create an overlay scrollbar that is visible only when hovering over the scrolling container or scrollbar area. Additionally, we will style the scrollbar in a way that prevents two scrollbars from being visible at the same time.

Let's assume you have a scrolling container within another scrolling container. By default, when we hover over the child scrolling container, both the child and parent scrolling container's scrollbars become visible. However, we only want one scrollbar to be visible at a time. When we hover over the child, only the child's scrollbar should be visible, and when we hover over the parent, only the parent's scrollbar should be visible. You can see in the video below exactly what we are going to create.

Firstly, I want to clarify that, at the time of writing this blog post, I attempted to create an overlay scrollbar but was not able to achieve it even when trying both of the following CSS properties:

.scrollingContainer{
    overflow: overlay;
    scrollbar-gutter: auto; /* I tried rest of all values*/
}

I was able to style the scrollbar to make it overlay and transparent, but it was only styled as we wanted. It did not actually overlay the content; it still took its own space when available.

So, how do we create an overlay scrollbar? The answer is to add content to an element and give it some padding or margin so that it does not stick to the edge. Let's take a div in which we want to give a padding of 15 pixels. This div is a scrolling container where we want to create an overlay scrollbar with a width of 10px. Here, we add 15px padding on the left side but 5px on the right side, and the remaining 10px space takes the scrollbar with overflow-y:scroll. We make the scrollbar thumb visible on hover and otherwise invisible, creating the appearance of an overlay scrollbar.

Here, "transparent" means a semi-transparent thumb, not completely transparent. I hope you understand the concept; now let's dive into the code.

As I mentioned, we have two scrolling containers nested within each other, one with the class "parent" and the other with the class "child". The following HTML provides an example:

<div class="parent">
    <div>
        here too many contents available so parent becomes scrollable
        <div class="child">
            here too many contents available so child becomes scrollable
        </div>
    </div>
</div>

Add the following CSS to make the elements scrollable and set paddings:

.parent , .child{
    /* rest of css*/
    overflow-y: scroll;
    padding-left: 15px;
    padding-right: 5px;
    /* for firefox*/
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
}

The following CSS styles the parent and child scrollbars and makes them invisible by default:

.parent::-webkit-scrollbar, .child::-webkit-scrollbar{
    width: 10px;
    background: transparent;
}
.parent::-webkit-scrollbar-thumb, .child::-webkit-scrollbar-thumb{
    background: transparent;
    border-radius: 5px;
}

The following CSS makes the scrollbars visible one at a time on hover:

/*::-webkit-scrollbar is only available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others).*/
.parent:not(:has(.child:hover)):hover::-webkit-scrollbar-thumb, 
 .child:hover::-webkit-scrollbar-thumb{
    background: rgba(220, 220, 220, 0.678);
}
/* for firefox*/
.parent:hover, .child:hover{
    scrollbar-color: rgba(220, 220, 220, 0.678) rgba(220, 220, 220, 0.678);  
}

The :not(:has(.child:hover)) CSS checks whether any child is not in a hovered state.

All the above CSS works perfectly as intended in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others). However, it does not function as expected in Firefox. But, we can customize scrollbar styling in Firefox using the scrollbar-color and scrollbar-width properties, as demonstrated in the above CSS. Please refer to the following note available on MDN regarding the usage of the ::-webkit-scrollbar pseudo-class.

Note: ::-webkit-scrollbar is only available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others). A standardized method of styling scrollbars is available with scrollbar-color and scrollbar-width, but is currently only supported in Firefox.

I write blog posts in my own words about problems that I faced in my learning journey and about coding concepts. And after writing I use ChatGPT for correction of Grammatical and Spelling mistakes. Today I tried to write a "I hope message" or "you can say end message" using ChatGPT and following are messages:

In my own words: I hope you now understand how to create an overlay and transparent scrollbar that is visible only on hover and Enjoy reading this blog post!

Using ChatGPT: I hope the information provided above proves helpful in understanding how to create and customize overlay and transparent scrollbars using CSS. If you encounter any issues, especially in Firefox, remember that scrollbar styling in Firefox can be fine-tuned using the scrollbar-color and scrollbar-width properties, as outlined in the preceding CSS. Feel free to explore and experiment, and may your coding endeavors be both enjoyable and successful. Happy coding!

The message written by ChatGPT looks professional and even I don't know the meaning of words that ChatGPT used in it's response. So I change some words in ChatGPT's message.

So I want to ask a question from Medium Community or my Own Website Visitors, "Is using ChatGPT in this way is right and which is better?. Because my English is little week and I faced many writing problems but I want to write blog posts on problems that I faced.