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.
Anatomy and Options
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:
- Thumb: The movable part of the scrollbar that represents the current position of the content.
- Track: The area of the scrollbar that the thumb moves along.
- Arrow buttons: Located at the top and bottom of the scrollbar track.
- Scrollbar borders: The lines that surround the scrollbar element.
- Scrollbar corner: The intersection between the vertical and horizontal scrollbars when both are present.
Anatomy of Scrollbars
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:
- Thumb: The movable part of the scrollbar that represents the current position of the content.
- Track: The area of the scrollbar that the thumb moves along, representing the entire length of the content.
- Arrow buttons: Located at the top and bottom of the scrollbar track, the arrow buttons can be clicked to scroll the content.
- Scrollbar borders: The lines that surround the scrollbar element.
- Scrollbar corner: The intersection between the vertical and horizontal scrollbars when both are present.
Browser Options
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
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.
Customizing Scrollbars
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:
- ::-webkit-scrollbar-thumb: used to style the thumb of the scrollbar
- ::-webkit-scrollbar-track: used to style the track of the scrollbar
- ::-webkit-scrollbar-button: used to style the up and down buttons of the scrollbar
- ::-webkit-scrollbar-corner: used to style the space between the vertical and horizontal scrollbars
Remember, some of these pseudo-class selectors may not work on Firefox, so you may need to use alternative methods.
Accessibility and Compatibility
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
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 Considerations
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.
Browser-Specific Features
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.
Changes and History
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.
Changes Since 9 December 2021
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.
Changes from 2021-08-05 Draft
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:
- Switched "should" to a "must" with regards to accessibility of narrow scrollbars.
Frequently Asked Questions
What are the best practices of scroll bar?
Effective scroll bars are visually distinct, responsive, and easy to navigate, providing clear feedback on the current position and aligning with the overall interface design
Featured Images: pexels.com