Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to style scrollbar thumb for the webkit browsers and what are components of scrollbar?
Scrollbars are essential UI components that allow users to navigate through content that extends beyond the visible area. Webkit-based browsers (Chrome, Safari, Edge) provide special CSS pseudo-elements to style scrollbar components, including the draggable thumb handle.
Syntax
::-webkit-scrollbar {
width: value;
}
::-webkit-scrollbar-thumb {
background: color;
border-radius: value;
}
::-webkit-scrollbar-track {
background: color;
}
Scrollbar Components
| Component | Description | CSS Pseudo-element |
|---|---|---|
| Scrollbar | The entire scrollbar container | ::-webkit-scrollbar |
| Track | The background area where thumb moves | ::-webkit-scrollbar-track |
| Thumb | The draggable handle | ::-webkit-scrollbar-thumb |
| Buttons | Arrow buttons at both ends | ::-webkit-scrollbar-button |
Method 1: Basic Thumb Styling
Style the scrollbar thumb with background color and border radius
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: #4CAF50;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="container">
<p>This is a long content that will require scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
A scrollable container with a green rounded scrollbar thumb appears. The thumb has a smooth rounded appearance and moves smoothly when scrolling.
Method 2: Complete Scrollbar Styling
Style all scrollbar components including track and hover effects
<!DOCTYPE html>
<html>
<head>
<style>
.styled-container {
width: 300px;
height: 150px;
overflow-y: scroll;
border: 2px solid #333;
padding: 15px;
background-color: #f9f9f9;
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-track {
background: #e0e0e0;
border-radius: 7px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
border-radius: 7px;
transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(45deg, #ff5252, #d63031);
}
</style>
</head>
<body>
<div class="styled-container">
<h3>Styled Scrollbar</h3>
<p>This container demonstrates advanced scrollbar styling with gradient colors, hover effects, and rounded corners. The track has a light gray background while the thumb features an orange-red gradient that changes on hover.</p>
<p>Scroll to see the styling effects in action. The smooth transitions and modern appearance enhance the user experience significantly.</p>
</div>
</body>
</html>
A container with a custom-styled scrollbar featuring a gradient orange-red thumb, light gray track, and smooth hover transitions appears.
Browser Support
Note: Webkit scrollbar pseudo-elements only work in Webkit-based browsers (Chrome, Safari, Edge). For Firefox and cross-browser compatibility, consider using JavaScript libraries or the newer scrollbar-width and scrollbar-color CSS properties.
Conclusion
Webkit scrollbar pseudo-elements provide powerful customization options for scrollbar styling in supported browsers. Use ::-webkit-scrollbar-thumb for the draggable handle and combine with track styling for complete customization.
965 Views
