How to make scrollbar overlapping page content

html css webkit scrollbar

12,458

Solution 1

You can try changing the background of the Scrollbar to transparent-

::-webkit-scrollbar-track {background: transparent}

Solution 2

I have this same requirement in my project.

Here is the solution:

overflow: overlay

Hope it helps

Solution 3

As Anugraha Acharya said, the only CSS option is:

overflow: overlay;

But it is worth noting that this has been deprecated, so there is no telling how long it will work in Chromium / Webkit.

It is not supported in Firefox so, you will have to do the following to ensure Firefox can scroll too:

overflow: scroll;
overflow: overlay;

With this, Firefox will render like the "Normal" diagram in the original post and Chromium will render like "how I want scroll to look". Also, if Chromium ever drops it it will still be usable.

This currently works as of January 2022.

I believe, by deprecated, Mozilla means that it was never officially added rather than it was considered and has now been dropped. So, hopefully, it will be considered and made official. In the meantime, you take your own risk.

12,458

Author by

Nejc Jezersek

Updated on June 05, 2022

Comments

Nejc Jezersek almost 2 years

I want to make scrollbar that overlaps the page. I wonder if there is a way to do it with pure CSS. I read an article about styling scrollbars with CSS (https://css-tricks.com/custom-scrollbars-in-webkit) but I didn't get a result I wanted. I think it would be possible to do it with some JavaScript and HTML element with fixed position, but I prefer to do it with CSS.
Nejc Jezersek over 7 years

It worked but i had to set the body width to the width of my monitor. By default body does not overlap with scrollbar.
theLearner over 7 years

Glad that I could help :)
mikl over 7 years

Works only for background, scrollbar cannot overlap content in webkit.
Wahyu over 6 years

Soo where did u put it? Which selector?
Rahul about 6 years

In the div which holds the content
sergio91pt almost 6 years

Children nodes have their background clipped even with a transparent scrollbar-track
Anugraha Acharya almost 6 years

@Wahyu in scrollable parent selector.
godblessstrawberry over 4 years

doesnt help in 2019 - Google Chrome Version 80.0.3987.87 (Official Build) (64-bit)
Kunal Tyagi almost 4 years

@mikl How do you solved this issue? Do you have a working solution?
Kunal Tyagi almost 4 years

@knuhol Is you issue resolved? If yes, then please guide me.
Knut Holm almost 4 years

@KunalTyagi unfortunately not, I needed to resolve it completely differently