This needs to be updated. It's the top result on Google for "CSS overlay scrollbar", but "overflow: overlay" has been deprecated and I could not find a working alternative.
While yes it is deprecated as far as W3 is concerned, Chromium has not indicated that they will be depreciating it.
So, yes, this is nonstandard but it is supported on 80% of desktop systems [src] (and all mobile devices and Safari use overlay scrollbars anyways) so it's still worthwhile to use in my opinion. Once you wrap it in a @supports block and have a good experience for users who cannot use this property, you will be fine.
As a final note: Seeing as more and more browsers have overlay scrollbars by default, it might not be necessary to even use this trick. Unless you are planning on overlaying your scrollbar on top of dynamic content (like a minimap in VSCode, or a timeline slider in a video editor), the default overlay scrollbars from the browser is probably enough.
How do browsers "have" overlay scrollbars?
Are they injecting CSS of their own? I really dont understand how to use it, especially with the scrollbar-gutter functionality (the caniuse page for overflow:overlay says that it is deprecating in favor of scrollbar-gutter)
It would depend on the implementation of UI for each browser but most modern browsers have a base-level stylesheet called a user-agent stylesheet which defines styles for all elements on a web page. From font size to scrollbars, everything has a base style.
Hi, just wanted to reach out and let you know this feature has finally been soft-deprecated 18 months after I posted this. If you were using this, be aware it is no longer functional as of Chromium 114.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
This needs to be updated. It's the top result on Google for "CSS overlay scrollbar", but "overflow: overlay" has been deprecated and I could not find a working alternative.
While yes it is deprecated as far as W3 is concerned, Chromium has not indicated that they will be depreciating it.
So, yes, this is nonstandard but it is supported on 80% of desktop systems [src] (and all mobile devices and Safari use overlay scrollbars anyways) so it's still worthwhile to use in my opinion. Once you wrap it in a
@supportsblock and have a good experience for users who cannot use this property, you will be fine.As a final note: Seeing as more and more browsers have overlay scrollbars by default, it might not be necessary to even use this trick. Unless you are planning on overlaying your scrollbar on top of dynamic content (like a minimap in VSCode, or a timeline slider in a video editor), the default overlay scrollbars from the browser is probably enough.
How do browsers "have" overlay scrollbars?
Are they injecting CSS of their own? I really dont understand how to use it, especially with the
scrollbar-gutterfunctionality (the caniuse page for overflow:overlay says that it is deprecating in favor of scrollbar-gutter)It would depend on the implementation of UI for each browser but most modern browsers have a base-level stylesheet called a user-agent stylesheet which defines styles for all elements on a web page. From font size to scrollbars, everything has a base style.
Hi, just wanted to reach out and let you know this feature has finally been soft-deprecated 18 months after I posted this. If you were using this, be aware it is no longer functional as of Chromium 114.