CSS - Scrollbars

Scrollbars are UI elements that allow users to navigate through long content that doesn’t fit entirely within the visible area.

They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.

It is important to test your scrollbar styling in different browsers and devices to make sure it works as expected.

Table of Contents

How to Style Scrollbars?

• Create a container element, such as div, to hold the content and the scrollbar.

• Set the height of the container element to a fixed value.

• Add the overflow: auto property to the container element to enable the scrollbar.

• Use the :-webkit-scrollbar pseudo-element to style the scrollbar.

div {
   width: 370px;
   height: 120px;
   overflow: auto; 
}
div::-webkit-scrollbar {
   width: 15px;
}

• Customize the scrollbars using CSS properties ( width, height, background-color, border, border-radius ).

Scrollbar Selectors

For webkit browsers(Chrome, Safari, Edge), you can use following pseudo-elements to make changes to scrollbar.

• ::-webkit-scrollbar Selects the entire scrollbar to style it.

• ::-webkit-scrollbar-button Selects the buttons at the top and bottom of scrollbar.

• ::-webkit-scrollbar-thumb Selects the draggable scrolling thumb.

• ::-webkit-scrollbar-track Tracks background of the scrollbar.

• ::-webkit-scrollbar-track-piece Selects the intermediate part of the scrollbar track between the thumb’s top and bottom positions.

• ::-webkit-scrollbar-corner Selects the bottom corner of scrollbar where horizontal and vertical scrollbar meets.

• ::-webkit-resizer Selects tha draggable resizer at the bottom of scrollbar.

Create a Custom Scrollbar

The following example demonstrates how to create and style a basic scrollbar using the -webkit-scrollbar CSS pseudo-element.

Example

This example will only work properly on webkit browsers(Chrome, Safari, Edge).

Styling a CSS Scrollbar

The following example demonstrates how to style scrollbars using the -webkit-scrollbar pseudo-element to customize their appearance by adding colors, width, border and border-radius −

Example

This example will only work properly on webkit browsers(Chrome, Safari, Edge).

CSS Scrollbar Related Properties

Following is the list of CSS pseudo-elements related to scrollbar: