Styling scrollbars with CSS

The page explains that styled scrollbars are still uncommon, but they can improve a design. It recommends using both the newer scrollbar properties and the WebKit pseudo-elements so the result works in more browsers.

Reading notes

#

• The article says scrollbars have traditionally been hard to style, but CSS now includes scrollbar-color and scrollbar-width.
• It defines CSS variables for scrollbar width, background color, and thumb color so the values can be reused.
• It uses scrollbar-width and scrollbar-color on the container as the newer scrollbar styling approach.
• It notes that Chrome support needs settings enabled, and Firefox needs layout.css.scrollbar-color.enabled set to true.
• It says scrollbar-color takes thumb color first and background second, and that dark and light are not supported by browsers yet.
• It uses ::-webkit-scrollbar to set the width, ::-webkit-scrollbar-track for the track background, and ::-webkit-scrollbar-thumb for the thumb styling.
• It says the WebKit prefix is more widely supported, so combining it with the newer properties gives broader browser coverage.