Menu
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.
648
We call those overlay scrollbars and they are either partially or fully transparent while sitting on top of the page content. In other words, unlike classic scrollbars that take up physical real estate on the screen, overlay scrollbars sit on top of the screen content.
An element's scrollbar gutter is the space between the inner border edge and the outer padding edge, where the browser may display a scrollbar. If no scrollbar is present, the gutter will be painted as an extension of the padding.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
Suppose we want to add a scroll bar option in HTML, use an “overflow” option and set it as auto-enabled for adding both horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.
I have this same requirement in my project.
Here is the solution:
overflow: overlay
Hope it helps
105
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.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
