How to make scrollbar overlapping page content

Question

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.

score 31 · Accepted Answer · edited May 25 '19 at 02:49

31

I have this same requirement in my project.

Here is the solution:

overflow: overlay

Hope it helps

edited May 25 '19 at 02:49

RienNeVaPlu͢s

7,442
6
43
77

answered Jan 11 '18 at 10:08

Anugraha Acharya

480
4
8

Soo where did u put it? Which selector? – Wahyu Feb 10 '18 at 15:39
1

In the div which holds the content – Rahul Apr 18 '18 at 06:17
Children nodes have their background clipped even with a transparent scrollbar-track – sergio91pt Jun 13 '18 at 15:58
@Wahyu in scrollable parent selector. – Anugraha Acharya Jul 18 '18 at 09:35
1

doesnt help in 2019 - Google Chrome Version 80.0.3987.87 (Official Build) (64-bit) – godblessstrawberry Feb 11 '20 at 05:34
@knuhol Is you issue resolved? If yes, then please guide me. – Kunal Tyagi Jun 02 '20 at 05:59
@KunalTyagi unfortunately not, I needed to resolve it completely differently – Knut Holm Jun 04 '20 at 09:57

score 2 · Answer 2 · answered Jan 12 '22 at 12:34

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.

Firefox likes to call things "deprecated" when they mean "works everywhere but in Firefox". Take MDN with a grain of salt for things like that. — Glenn Maynard, Oct 14 '22 at 01:16

score -4 · Answer 3 · answered Aug 31 '16 at 15:56

-4

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

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

answered Aug 31 '16 at 15:56

theLearner

363
4
16

It worked but i had to set the body width to the width of my monitor. By default body does not overlap with scrollbar. – Nejc Jezersek Aug 31 '16 at 16:02
Glad that I could help :) – theLearner Aug 31 '16 at 16:10
5

Works only for background, scrollbar cannot overlap content in webkit. – mikl Feb 24 '17 at 19:26
@mikl How do you solved this issue? Do you have a working solution? – Kunal Tyagi Jun 02 '20 at 05:58

How to make scrollbar overlapping page content

3 Answers3

Linked