Feature Coming Soon!
The newsletter functionality is under development.
Custom Scrollbar Using HTML & CSS
5 min read
Project Overview
This project demonstrates how to create a custom-styled scrollbar using pure HTML and CSS. It allows you to replace the default browser scrollbar with a visually appealing and branded one, enhancing the overall aesthetic of your website. The custom scrollbar features a transparent track and a vibrant gradient-filled thumb, providing a modern and sleek look.
The implementation focuses on styling the `::-webkit-scrollbar` and `::-webkit-scrollbar-thumb` pseudo-elements, which are specific to WebKit-based browsers (like Chrome, Safari, Edge). This project is ideal for web developers looking to apply consistent branding and design across all elements of their user interface, including traditionally unstylable components like scrollbars.
HTML Structure
The HTML structure for demonstrating the custom scrollbar is simple, designed to create content that necessitates scrolling. It consists of a `section` element that acts as a container for multiple `div` elements, each with the class `card`. Each `card` contains an `h2` for a title and a `p` element with Lorem ipsum text. The repetition of these `card` elements ensures that the page content exceeds the viewport height, thereby activating the scrollbar. This straightforward structure allows the CSS to easily target and style the scrollbar without interference from complex nested elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Scrollbar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section>
<div class="card">
<h2 class="card-title">Title 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 7</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 8</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 8</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 8</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 8</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 8</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 8</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 8</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 8</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 8</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
<div class="card">
<h2 class="card-title">Title 8</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea cupiditate
illo eos, nihil soluta, assumenda, maiores quaerat aspernatur quis ab
unde. Nesciunt temporibus saepe rem similique excepturi sapiente,
laborum ea.
</p>
</div>
</section>
</body>
</html>
CSS Styling
The CSS for the custom scrollbar project focuses on styling the scrollbar itself and the content that generates the scroll. It starts by resetting default padding, margin, and box-sizing, and sets a `crimson` background for the `body`. The `.card` class styles individual content blocks with a fixed `width`, a light gray `background`, `padding`, and `margin`, along with a sans-serif font and line height. The core of the custom scrollbar lies in the `::-webkit-scrollbar` and `::-webkit-scrollbar-thumb` pseudo-elements. `::-webkit-scrollbar` is used to style the entire scrollbar track, setting its `background-color` to `transparent` and its `width` to `10px`. `::-webkit-scrollbar-thumb` styles the draggable part of the scrollbar, applying a vibrant `linear-gradient` from `#21d4fd` to `#b721ff` and a `border-radius` of `100px` for a rounded appearance. This combination of styles creates a visually distinct and modern scrollbar.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background: crimson;
}
.card {
width: 700px;
background: #ccc;
padding: 20px;
margin: 20px;
font-family: sans-serif;
line-height: 28px;
}
/* Scrollbar */
::-webkit-scrollbar {
background-color: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(#21d4fd, #b721ff);
border-radius: 100px;
}
Live Demo: Custom Scrollbar
Watch a live demonstration of the Custom Scrollbar below.
Final Thoughts
This Custom Scrollbar project effectively demonstrates how to personalize a often-overlooked UI element using pure HTML and CSS. By applying custom styles to the scrollbar, you can significantly enhance the visual consistency and branding of your web application. The use of a gradient for the scrollbar thumb adds a modern and sleek touch, making the scrolling experience more engaging for the user.
You can easily customize this component by:
- Changing the gradient colors of the scrollbar thumb to match your website's color scheme.
- Adjusting the `width` of the scrollbar to make it thicker or thinner.
- Experimenting with different `border-radius` values for the thumb to create various shapes (e.g., square, more rounded).
- Adding hover effects to the scrollbar thumb for a more interactive feel.
- Applying custom styles to the scrollbar track (`::-webkit-scrollbar-track`) for a more intricate design.
Pro Tip
While `::-webkit-scrollbar` pseudo-elements are widely supported in WebKit-based browsers, remember that other browsers (like Firefox) may require different vendor prefixes or more complex JavaScript solutions for full cross-browser custom scrollbar compatibility.
Ready to Use This Project?
Click the button below to download the full source code. Download will be ready in 10 seconds.