CSS Scrollbars

Scrollbars are an essential part of any website or application that requires scrolling. They allow users to navigate through content that doesn’t fit within a single screen. By default, the scrollbar in a web browser is relatively plain and may not always match the website’s design aesthetic. In this article, we’ll cover how to customize the CSS scrollbar with proper subheadings and provide HTML and CSS code examples.

What is a CSS Scrollbar?

A CSS scrollbar is a GUI element that appears on the right side of a webpage to indicate content and enable scrolling. By default, the scrollbar is relatively plain and may not always match the website’s design aesthetic. However, with CSS, you can customize the scrollbar’s appearance to match your website’s design and theme.

Examples of CSS scrollbars

To add a scrollbar to your web page, you need to include the following HTML code:

<div class="scrollbar">
   <div class="content">
      <!-- Add your content here -->
   </div>
</div>

The outer div element has the class scrollbar, and the inner div element has the class content. The content within the div with the content class will be the content that can be scrolled.

Next, we will add CSS to customize the scrollbar’s appearance. Here is an example of CSS that will customize the scrollbar’s color, width, and height:

.scrollbar {
   overflow-y: scroll;
   scrollbar-color: #000000 #FFFFFF;
   scrollbar-width: thin;
   height: 300px;
}

.scrollbar::-webkit-scrollbar {
   width: 6px;
}

.scrollbar::-webkit-scrollbar-thumb {
   background-color: #000000;
}

.scrollbar::-webkit-scrollbar-track {
   background-color: #FFFFFF;
}

Output:

The overflow-y: scroll; property on the .scrollbar class will make sure that the content is scrollable. The scrollbar-color property sets the color of the scrollbar’s thumb and track, while the scrollbar-width property sets the width of the scrollbar. The height property sets the height of the scrollbar.

The remaining CSS rules target the scrollbar specifically for webkit browsers (Chrome, Safari).

They use ::-webkit-scrollbar pseudo-element to set the width of the scrollbar, and ::-webkit-scrollbar-thumb and ::-webkit-scrollbar-track pseudo-elements to set the colors of the scrollbar’s thumb and track.

Customizing the CSS Scrollbar

There are many different properties that you can use to customize the CSS scrollbar’s appearance. Here are a few examples:

1. scrollbar-color: Sets the color of the scrollbar’s thumb and track.

2. scrollbar-width: Sets the width of the scrollbar.

3. ::-webkit-scrollbar: Targets the entire scrollbar element and allows you to set properties like width, height, and background color.

4. ::-webkit-scrollbar-thumb: Targets the thumb of the scrollbar and allows you to set properties like background-color, border-radius, and box shadow.

5. ::-webkit-scrollbar-track: Targets the track of the scrollbar and allows you to set properties like background-color and border-radius.

Here’s an example of a CSS code that customizes the scrollbar’s width, height, and color:

scrollbar {
   overflow-y: scroll;
   scrollbar-color: #FF0000 #FFFFFF;
   scrollbar-width: thin;
   height: 300px;
}

.scrollbar::-webkit-scrollbar {
   width: 8px;
   height: 8px;
   background-color: #FFFFFF;
}

.scrollbar::-webkit-scrollbar-thumb {
background-color: #FF0000;
border-radius: 10px;
}

.scrollbar::-webkit-scrollbar-track {
background-color: #FFFFFF;
border-radius: 10px;
}

Output:

Build Future-Proof Scrollbar Styles

To build future-proof scrollbar styles in CSS, it is recommended to use the ::-webkit-scrollbar pseudo-element to target webkit browsers, and use the scrollbar-width and scrollbar-color properties for non-webkit browsers. It is also important to consider accessibility by ensuring that the customized scrollbar remains usable and easy to navigate for users with disabilities. Additionally, testing on multiple browsers and devices is important to ensure that the customized scrollbar styles are consistent and functional across all platforms.

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* compatible with Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 22px;
}

*::-webkit-scrollbar-track {
  background: green;
}

*::-webkit-scrollbar-thumb {
  background-color: green;
  border-radius: 10px;
  border: 5px solid blue;
}

Usage of CSS scrollbar

1. The styles will be applied to any scrollbar that might occur on the page if there is no qualifying selector in front of the various pseudo-elements.

2. When using Mac OS versions newer than Lion, when scrollbars are typically suppressed by default, you can force your website to display horizontal or vertical scrollbars by setting the -webkit-scrollbar styles.

3.A number of jQuery plugins have been created to “polyfill” or expand this functionality to other browsers because this property is hidden behind a -webkit vendor prefix. The plugin jScrollPane is one example

Conclusion

Customizing the CSS scrollbar can improve the user experience on your website. By changing the scrollbar’s color, width, and height, you can ensure that it matches your website’s design aesthetic. The examples provided in this article are a great starting point for customizing your scrollbar but feel free to experiment and find what works best for your website.