DEV Community 👩‍💻👨‍💻

Discussion on: Easy Overlay Scrollbars with Reactive Design

Collapse
kumikumi profile image
Mikko Ankkala

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.

Collapse
jonosellier profile image
jonosellier Author

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.