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?
- Scrollbar Selectors
- Create Custom Scrollbar
- Styling Scrollbar
- Realated CSS Scrollbar Properties
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).
<html><head><style>
div {
width: 100%;
height: 120px;
background-color: #F1EFB0;
overflow: auto;
}
div::-webkit-scrollbar {
width: 35px;
}
div::-webkit-scrollbar-track {
background: yellow;
}
div::-webkit-scrollbar-thumb {
background: green;
border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
background: darkgreen;
}
</style></head><body><div><h3>
Scrollbars using -webkit-scrollbar
</h3>
This block includes a large amount of content
to demonstrate how scrollbars work when there
is an overflow within an element box.
They consist of vertical or horizontal bars
with a draggable thumb, enabling users to
move content up and down or left to right.
<br><strong>Changes Made:</strong><br>
Changed Scrollbar Thumb Color
<br>
Changed Scrollbar background Color
<br>
Add Hover effect to thumb
</div></body></html>
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).
<html><head><style>
div {
width: 370px;
height: 120px;
background-color: #F1EFB0;
overflow: auto;
}
div::-webkit-scrollbar {
width: 15px;
}
div::-webkit-scrollbar-track {
background: #90e9e4;
}
div::-webkit-scrollbar-thumb {
background: #e77f7f;
border-radius: 10px;
border: 3px solid yellow;
}
div::-webkit-scrollbar-thumb:hover {
background: #da3e3e;
}
.heading{
color: #DC4299;
text-align: center;
}
</style></head><body><div><h3 class="heading">
Scrollbars using -webkit-scrollbar
</h3>
This block includes a large amount of content
to demonstrate how scrollbars work when there
is an overflow within an element box.
They consist of vertical or horizontal bars
with a draggable thumb, enabling users to
move content up and down or left to right.
</div></body></html>
CSS Scrollbar Related Properties
Following is the list of CSS pseudo-elements related to scrollbar:
| Property | Value | Example |
|---|---|---|
| -webkit-scrollbar | Selects the entire scrollbar to style it. | Try It |
| -webkit-scrollbar-button | Selects the buttons at the top and bottom of scrollbar. | Try It |
| -webkit-scrollbar-thumb | Selects the draggable scrolling thumb. | Try It |
| -webkit-scrollbar-track | Tracks background of the scrollbar. | Try It |
| -webkit-scrollbar-track-piece | Selects the intermediate part of the scrollbar track between the thumb’s top and bottom positions. | Try It |
| -webkit-scrollbar-corner | Selects the bottom corner of scrollbar where horizontal and vertical scrollbar meets. | Try It |
Leave a Reply