CSS Styling Scrollbars and Browser Compatibility

CSS styling scrollbars can be a bit of a challenge, but with the right approach, you can make them look great across different browsers. In this section, we'll explore CSS styling scrollbars and browser compatibility.

To style scrollbars, you can use the ::-webkit-scrollbar pseudo-element, which is supported in Chrome and Safari. However, this won't work in Firefox, so you'll need to use an alternative approach.

The ::-webkit-scrollbar pseudo-element allows you to style the scrollbar's width, height, and track color, among other properties. For example, you can set the scrollbar's width to 10px using the -webkit-scrollbar-width property.

In addition to the ::-webkit-scrollbar pseudo-element, you can also use the scrollbar-width and scrollbar-color properties to style the scrollbar in Firefox. These properties are supported in Firefox 57 and later versions.

The anatomy of a scrollbar is quite straightforward. A scrollbar consists of a track and a thumb, with the track representing the entire scroll distance and the thumb representing the current position within the scrollable region.

The track is where the thumb moves along, and it's often also draggable. In addition to the thumb and track, a scrollbar can have more parts, such as buttons to increment or decrement the scroll offset, determined by the underlying operating system.

Here's a breakdown of the parts that make up a scrollbar:

A scrollbar typically consists of a track and a thumb. The track is where the thumb moves and represents the entire scroll distance.

The thumb is the movable part of the scrollbar that represents the current position of the content. It can be clicked and dragged to scroll the content up or down.

At the minimum, a scrollbar consists of a track and a thumb. This is the basic structure of a scrollbar.

Scrollbars can have more parts than just the thumb and track, though. For example, a scrollbar could have one or more buttons to increment or decrement the scroll offset.

Here's a breakdown of the elements that make up a scrollbar:

Webkit browsers like Chrome, Edge, and Safari allow you to style scrollbars using pseudo-elements like ::-webkit-scrollbar and its child elements.

You can target specific parts of the scrollbar, such as the button, thumb, and track, to customize its appearance.

To display both vertical and horizontal scrollbars, you can add the following CSS code: ::-webkit-scrollbar, ::-webkit-scrollbar-button, ::-webkit-scrollbar-thumb, and ::-webkit-scrollbar-track.

However, in most cases, you'd only display one scrollbar, so you can modify the overflow property to either overflow-x or overflow-y, depending on the axis you want to display the scrollbar.

To make the scrollbar visible, you can set the image's width and height to 100%, making it responsive.

Here's a brief example of how to do this: write the following HTML code, followed by the corresponding CSS code.

If you only want to display one scrollbar, you can use the overflow-x or overflow-y property, but this won't work unless you make the image responsive by setting its width and height to 100%.

You can see a live example of this in action on CodePen, where the scrollbar is styled using the ::-webkit-scrollbar pseudo-element.

Classic and overlay scrollbars are two types of scrollbars.

The distinction between these two types of scrollbars is important to understand before styling them.

Classic scrollbars are the traditional type, but they're not the focus of this discussion.

Overlay scrollbars are floating scrollbars rendered on top of content underneath.

They are not shown by default but only while you are actively scrolling.

To keep the content underneath visible, overlay scrollbars are often semi-transparent.

Their size may also vary while interacting with them.

You can customize scrollbars with CSS, but it's not a straightforward process. Custom styling tips are essential to get started.

To create a custom scrollbar, you need to tie its styles to your site's design theme. This can be done by incorporating your brand's color scheme or logo into the scrollbar design.

You can use CSS variables to make your job easier when customizing scrollbars. This is especially useful when you have multiple themes for your webpage and want your scrollbar to change according to the active theme.

To change the color scheme of scrollbars, you can use the scrollbar-color property. This property accepts two color values: the first determines the color of the thumb, and the second determines the color of the track.

You can also use the scrollbar-width property to change the size of the scrollbar. Accepted values are auto, thin, and none. Note that it's not possible to use a length such as 16px as the value for scrollbar-width.

To create a more customized design, you can target specific scrollbar elements and style them using pseudo-class selectors. Some of the most common pseudo-classes include :horizontal, :vertical, :decrement, :increment, :start, and :end.

Here are some examples of pseudo-class selectors:

Remember, some of these pseudo-class selectors may not work on Firefox, so you may need to use alternative methods.

You can't use standard properties to style the main scrollbar on a webpage, but you can target the universal property *. To style the main scrollbar, use the standard properties, not webkit-scrollbar, which doesn't need to be linked to any property.

User style sheets provide an override for thin scrollbars, and user agents are encouraged to expose a setting letting users express their preference. The CSS Working Group acknowledges the need for wider scrollbars and encourages operating systems and user agents to offer a means for users to express their preference.

Some users may need wider scrollbars, and it's possible to use both the new scrollbar-* and ::-webkit-scrollbar-* properties to support older browser versions. Note that setting the width or height of ::-webkit-scrollbar will always display an overlay scrollbar, turning it into a classic scrollbar.

Browser support is crucial for ensuring that your website's accessibility and compatibility features work seamlessly across different browsers. The good news is that the scrollbar-color and scrollbar-width properties have decent browser support.

Chrome supports these features from version 121 and up. Firefox supports them from version 64 and up. Unfortunately, Internet Explorer only supports them from version 11 and up, which may be a limitation for some users.

The table below shows a summary of browser support for scrollbar-color and scrollbar-width:

This information can help you make informed decisions about which browsers to support and how to implement accessibility and compatibility features on your website.

Accessibility is crucial for a seamless user experience. You can't use standard properties to style the body HTML element, so if you want to style the main scrollbar, you need to target the universal property, *.

User style sheets are a great way to give users the opportunity to override custom styles, including thin-looking scrollbars. This way, users can express their preferences and choose the scrollbar width they're comfortable with.

Some users may need wider scrollbars than what's typical, and operating systems and user agents can offer settings to let users express that preference. CSS will honor that choice in such cases.

Firefox doesn't offer advanced styling methods like Webkit browsers, so you're limited to using scrollbar-width and scrollbar-color properties.

To style a scrollbar's width in Firefox, you can use the scrollbar-width property, which accepts only three keywords: auto, thin, and none.

In Webkit browsers like Chrome, Edge, and Safari, you can use pseudo-elements to customize your scrollbar. The base selector is ::-webkit-scrollbar, which is used to specify the width of a scrollbar.

You can use the following pseudo-elements to target different parts of the scrollbar in Webkit browsers: ::-webkit-scrollbar-button, ::-webkit-scrollbar-corner, ::-webkit-scrollbar-thumb, and ::-webkit-scrollbar-track.

If you're targeting a specific element, make sure to add overflow: scroll; to the element, or else the scrollbar won't show.

Here's a table highlighting the differences in styling across the major browsers:

Note that in Webkit browsers, you can use the ::-webkit-scrollbar-button pseudo-element to style the up and down (or left and right for horizontal scrollbars) buttons.

CSS styling scrollbars has a rich history, dating back to the early days of the web. The first scrollbar styles were introduced in the late 1990s with the release of Netscape Navigator 4.

In the early 2000s, Internet Explorer 6 popularized the use of CSS to style scrollbars, making it easier for developers to customize their appearance. This led to a proliferation of custom scrollbar styles across the web.

The introduction of the scrollbar CSS property in CSS 3 in 2012 marked a significant milestone in the evolution of CSS styling scrollbars.

The changes since 9 December 2021 have been significant, and one notable shift was the switch of the Animation type of scrollbar-width to discrete.

This change reflects the fact that the scrollbar-width property only takes keyword values.

The 2021-08-05 Working Draft made some significant changes to the scrollbar specifications. One notable change was the switch from "should" to "must" regarding accessibility of narrow scrollbars.

This change was made to ensure that narrow scrollbars meet the necessary accessibility standards. The issue behind this change was #6675, which highlighted the importance of accessibility in web development.

A list of the changes made to the scrollbar specifications is as follows: