scrollbar-track-color and scrollbar-width properties not working
i have tried setting scroll bar width to 5px and track color to hsla(0, 0%, 85%, 1) but it doesnt seem to work
4 Replies
those only work in firefox 🙂
::-webkit-scrollbar {...}
::-webkit-scrollbar-thumb {...}
::-webkit-scrollbar-track {...}
::-moz-scrollbar-thumb{...}oh only on fire fox huh
scrollbar styling in CSS is a dumpster fire right now. It's been proposed for Interop 2024 so hopefully we can get something cross browser consistent next year. FYI
scrollbar-face-color and scrollbar-track-color are from an old spec and only ever supported by IE. They were replaced with scrollbar-color which now takes 2 colors one for the button and one for the track. But indeed this is only for Firefox right now. Chrome is adding support for scrollbar-color and scrollbar-width in chrome 121 in Jan. Hopefully Safari won't be that far behind.
the -webkit stuff has already been removed from ios safari as of version 13. The best explination that i've seen is that it butts heads with OS level scrollbar styles too much??? Not sure if it's also going to be removed from Chrome