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 create a responsive custom scrollbar using CSS?
Custom scrollbars enhance the visual appeal of web pages by replacing the browser's default scrollbar with custom-styled alternatives. Using CSS webkit-scrollbar pseudo-elements, you can create responsive scrollbars that match your website's design theme and provide better user interaction feedback.
Syntax
The basic syntax for creating custom scrollbars uses webkit pseudo-elements
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Webkit Scrollbar Pseudo-Elements
The following webkit pseudo-elements are used to style different parts of the scrollbar
::-webkit-scrollbar The main scrollbar container that controls the overall width and height.
::-webkit-scrollbar-track The track (background) area where the scrollbar thumb moves.
::-webkit-scrollbar-thumb The draggable part of the scrollbar that users interact with.
::-webkit-scrollbar-thumb:hover The hover state styling for the scrollbar thumb.
::-webkit-scrollbar-corner The corner where horizontal and vertical scrollbars meet.
Basic Custom Scrollbar
The following example demonstrates how to create a basic custom scrollbar with track and thumb styling
<!DOCTYPE html>
<html>
<head>
<title>Basic Custom Scrollbar</title>
<style>
.scroll-container {
width: 300px;
height: 200px;
overflow-y: scroll;
border: 2px solid #ccc;
padding: 15px;
font-family: Arial, sans-serif;
}
.scroll-container::-webkit-scrollbar {
width: 12px;
}
.scroll-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Custom Scrollbar Example</h2>
<div class="scroll-container">
<p>This is a scrollable container with a custom scrollbar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
This creates a container with a custom scrollbar that has rounded edges and changes color on hover.
Responsive Custom Scrollbar
To make scrollbars responsive, adjust their width based on screen size using CSS media queries
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Custom Scrollbar</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
margin: 0;
}
.content {
height: 400px;
overflow-y: scroll;
border: 2px solid #ddd;
padding: 15px;
background-color: #fafafa;
}
/* Desktop scrollbar */
.content::-webkit-scrollbar {
width: 14px;
}
.content::-webkit-scrollbar-track {
background: #e0e0e0;
border-radius: 8px;
}
.content::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #4CAF50, #45a049);
border-radius: 8px;
border: 2px solid #e0e0e0;
}
.content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #45a049, #3d8b40);
}
/* Mobile responsive scrollbar */
@media (max-width: 768px) {
.content::-webkit-scrollbar {
width: 8px;
}
.content::-webkit-scrollbar-thumb {
border: 1px solid #e0e0e0;
}
}
</style>
</head>
<body>
<h2>Responsive Custom Scrollbar</h2>
<p>Resize your browser window to see the scrollbar adapt to different screen sizes.</p>
<div class="content">
<h3>Scrollable Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue tortor, congue sit amet mi sit amet, interdum euismod urna.</p>
<p>Aenean consequat eget odio eget elementum. Nam pellentesque scelerisque interdum. Sed placerat malesuada justo nec tristique.</p>
<p>Donec nec nisi suscipit, finibus nibh a, lacinia sem. Cras eleifend risus nulla, eget commodo metus condimentum sit amet.</p>
<p>Vestibulum aliquam rhoncus elit, pharetra mollis arcu dictum a. Integer vestibulum egestas nibh a consectetur.</p>
<p>Nam sagittis vitae velit a vulputate. Vivamus est lectus, laoreet vel volutpat quis, ultrices non dui.</p>
<p>Maecenas fringilla auctor odio, sed suscipit est iaculis et. Pellentesque sed consectetur urna.</p>
<p>Integer cursus blandit massa, eu varius ligula pellentesque non. Vestibulum mattis lacus eu sem gravida.</p>
</div>
</body>
</html>
The scrollbar width adjusts from 14px on desktop to 8px on mobile devices, ensuring optimal usability across different screen sizes.
Themed Custom Scrollbar
Create visually appealing scrollbars with gradients and animations
<!DOCTYPE html>
<html>
<head>
<title>Themed Custom Scrollbar</title>
<style>
.themed-scroll {
width: 100%;
height: 300px;
overflow-y: scroll;
border: 3px solid #2196F3;
border-radius: 10px;
padding: 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
font-family: Arial, sans-serif;
}
.themed-scroll::-webkit-scrollbar {
width: 16px;
}
.themed-scroll::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}
.themed-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #2196F3, #21CBF3);
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.themed-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(45deg, #1976D2, #1CB5E0);
transform: scale(1.1);
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f0f2f5;">
<h2>Themed Custom Scrollbar with Gradient</h2>
<div class="themed-scroll">
<h3 style="color: #1976D2;">Beautiful Scrollable Content</h3>
<p>This scrollbar features a gradient background and smooth hover transitions.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
</body>
</html>
This example creates a sophisticated scrollbar with gradient colors, shadows, and smooth scaling animation on hover.
Browser Compatibility
The -webkit-scrollbar pseudo-elements work in the following browsers
| Browser | Support | Notes |
|---|---|---|
| Chrome | Full Support | All versions |
| Safari | Full Support | All versions |
| Edge (Chromium) | Full Support | Version 79+ |
| Firefox | Limited Support | Use scrollbar-width and scrollbar-color instead |
| Opera | Full Support | Chromium-based versions |
For Firefox compatibility, use the standard scrollbar-width and scrollbar-color properties
/* Firefox scrollbar styling */
.scroll-container {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
Key Points
Custom
660 Views
