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.
Asked
Active
Viewed 9,529 times
11
Nejc Jezersek
- 333
- 5
- 12
2 Answers
15
I have this same requirement in my project.
Here is the solution:
overflow: overlay
Hope it helps
RienNeVaPlu͢s
- 6,574
- 6
- 36
- 72
Anugraha Acharya
- 197
- 1
- 8
-
Soo where did u put it? Which selector? – Wahyu Feb 10 '18 at 15:39
-
In the div which holds the content – Dalvik 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
-
1doesnt 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 – knuhol Jun 04 '20 at 09:57
-4
You can try changing the background of the Scrollbar to transparent-
::-webkit-scrollbar-track {background: transparent}
theLearner
- 298
- 2
- 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
-
-
4
-
@mikl How do you solved this issue? Do you have a working solution? – Kunal Tyagi Jun 02 '20 at 05:58