Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a custom scrollbar. Styling the default scrollbar supported by all major browsers can be a bit challenging. But with the tutorial, I’ll guide you step by step into creating a custom scrollbar. This scrollbar is supported by major browsers like chrome, firefox, edge, opera etc.
We style the scrollbar to make it suit the theme of our webpage. Customizing the scrollbar makes it more visually appealing.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post, you should check out the video down below. Subscribe to my youtube channel, where I post more such tips, tricks and tutorials related to web development. Also, I post multiple-choice questions based on HTML, CSS and Javascript that help you improve your coding knowledge.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We start by creating the project folder called – ‘Custom Scrollbar’. Inside this folder, we have two files. The first file is index.html which is an HTML document. Next, we have the style.css file which is the stylesheet.
HTML:
Let us start with the HTML code. First, copy the code below and paste it into your HTML document. HTML creates elements responsible for building the layout of our page. In our case, we do not need any HTML elements. I have added some text just for demo purposes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Scrollbar</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="sub-div">
<h1 class="title">Custom Scrollbar</h1>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi,
facilis ipsam. Voluptates minima eaque cupiditate nostrum illum quis
possimus qui dolorem ex, facere optio sapiente. Beatae inventore
accusamus ratione, quos cupiditate maxime repudiandae id ex. Magni
dolore aut earum tempora doloribus porro debitis pariatur expedita,
quis soluta optio sed distinctio repudiandae sit, in animi! Ea
consectetur magni consequuntur velit at illo aut neque deleniti
impedit, voluptatem quo ad deserunt animi eligendi commodi tempore
placeat aliquid dolor? Quam vero officia perspiciatis illo velit eum
iusto, impedit autem! Distinctio, obcaecati! Tempore debitis dolor
iste aliquam fuga ipsa, cumque magni sit. Consequuntur commodi nisi
in, voluptates alias aliquid, ipsam eveniet rem ducimus omnis nemo
doloremque! Corporis, earum harum sed asperiores autem cum ab aut
repellat, provident perferendis aliquid molestias. Quos sed
consequuntur molestiae, incidunt officia odio nisi ex numquam et vero
sequi maxime maiores, necessitatibus iure ut exercitationem sapiente.
Consequuntur eaque odio, inventore vitae odit adipisci ex modi fuga
dignissimos, incidunt maiores quaerat corporis quia veniam ipsam, esse
non omnis! Aperiam nemo praesentium quidem ipsa ad, perferendis
debitis, quia voluptatum nostrum possimus eligendi! Cupiditate, unde
et consectetur iusto porro maiores. Blanditiis eos architecto maxime
dolores ab libero nostrum delectus odit accusamus harum quos
cupiditate aliquid, a sed, ullam sit? Facilis voluptatibus earum
officia unde accusamus tempore odit aspernatur et reiciendis
dignissimos! Quos velit similique voluptate ab quam quasi ullam culpa
officiis et quaerat alias, ipsam iste, perferendis repudiandae atque
temporibus eum? Nostrum, repellat praesentium doloremque amet quasi
atque doloribus tenetur aspernatur tempore quo?
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi,
facilis ipsam. Voluptates minima eaque cupiditate nostrum illum quis
possimus qui dolorem ex, facere optio sapiente. Beatae inventore
accusamus ratione, quos cupiditate maxime repudiandae id ex. Magni
dolore aut earum tempora doloribus porro debitis pariatur expedita,
quis soluta optio sed distinctio repudiandae sit, in animi! Ea
consectetur magni consequuntur velit at illo aut neque deleniti
impedit, voluptatem quo ad deserunt animi eligendi commodi tempore
placeat aliquid dolor? Quam vero officia perspiciatis illo velit eum
iusto, impedit autem! Distinctio, obcaecati! Tempore debitis dolor
iste aliquam fuga ipsa, cumque magni sit. Consequuntur commodi nisi
in, voluptates alias aliquid, ipsam eveniet rem ducimus omnis nemo
doloremque! Corporis, earum harum sed asperiores autem cum ab aut
repellat, provident perferendis aliquid molestias. Quos sed
consequuntur molestiae, incidunt officia odio nisi ex numquam et vero
sequi maxime maiores, necessitatibus iure ut exercitationem sapiente.
Consequuntur eaque odio, inventore vitae odit adipisci ex modi fuga
dignissimos, incidunt maiores quaerat corporis quia veniam ipsam, esse
non omnis! Aperiam nemo praesentium quidem ipsa ad, perferendis
debitis, quia voluptatum nostrum possimus eligendi! Cupiditate, unde
et consectetur iusto porro maiores. Blanditiis eos architecto maxime
dolores ab libero nostrum delectus odit accusamus harum quos
cupiditate aliquid, a sed, ullam sit? Facilis voluptatibus earum
officia unde accusamus tempore odit aspernatur et reiciendis
dignissimos! Quos velit similique voluptate ab quam quasi ullam culpa
officiis et quaerat alias, ipsam iste, perferendis repudiandae atque
temporibus eum? Nostrum, repellat praesentium doloremque amet quasi
atque doloribus tenetur aspernatur tempore quo?
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi,
facilis ipsam. Voluptates minima eaque cupiditate nostrum illum quis
possimus qui dolorem ex, facere optio sapiente. Beatae inventore
accusamus ratione, quos cupiditate maxime repudiandae id ex. Magni
dolore aut earum tempora doloribus porro debitis pariatur expedita,
quis soluta optio sed distinctio repudiandae sit, in animi! Ea
consectetur magni consequuntur velit at illo aut neque deleniti
impedit, voluptatem quo ad deserunt animi eligendi commodi tempore
placeat aliquid dolor? Quam vero officia perspiciatis illo velit eum
iusto, impedit autem! Distinctio, obcaecati! Tempore debitis dolor
iste aliquam fuga ipsa, cumque magni sit. Consequuntur commodi nisi
in, voluptates alias aliquid, ipsam eveniet rem ducimus omnis nemo
doloremque! Corporis, earum harum sed asperiores autem cum ab aut
repellat, provident perferendis aliquid molestias. Quos sed
consequuntur molestiae, incidunt officia odio nisi ex numquam et vero
sequi maxime maiores, necessitatibus iure ut exercitationem sapiente.
Consequuntur eaque odio, inventore vitae odit adipisci ex modi fuga
dignissimos, incidunt maiores quaerat corporis quia veniam ipsam, esse
non omnis! Aperiam nemo praesentium quidem ipsa ad, perferendis
debitis, quia voluptatum nostrum possimus eligendi! Cupiditate, unde
et consectetur iusto porro maiores. Blanditiis eos architecto maxime
dolores ab libero nostrum delectus odit accusamus harum quos
cupiditate aliquid, a sed, ullam sit? Facilis voluptatibus earum
officia unde accusamus tempore odit aspernatur et reiciendis
dignissimos! Quos velit similique voluptate ab quam quasi ullam culpa
officiis et quaerat alias, ipsam iste, perferendis repudiandae atque
temporibus eum? Nostrum, repellat praesentium doloremque amet quasi
atque doloribus tenetur aspernatur tempore quo?
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi,
facilis ipsam. Voluptates minima eaque cupiditate nostrum illum quis
possimus qui dolorem ex, facere optio sapiente. Beatae inventore
accusamus ratione, quos cupiditate maxime repudiandae id ex. Magni
dolore aut earum tempora doloribus porro debitis pariatur expedita,
quis soluta optio sed distinctio repudiandae sit, in animi! Ea
consectetur magni consequuntur velit at illo aut neque deleniti
impedit, voluptatem quo ad deserunt animi eligendi commodi tempore
placeat aliquid dolor? Quam vero officia perspiciatis illo velit eum
iusto, impedit autem! Distinctio, obcaecati! Tempore debitis dolor
iste aliquam fuga ipsa, cumque magni sit. Consequuntur commodi nisi
in, voluptates alias aliquid, ipsam eveniet rem ducimus omnis nemo
doloremque! Corporis, earum harum sed asperiores autem cum ab aut
repellat, provident perferendis aliquid molestias. Quos sed
consequuntur molestiae, incidunt officia odio nisi ex numquam et vero
sequi maxime maiores, necessitatibus iure ut exercitationem sapiente.
Consequuntur eaque odio, inventore vitae odit adipisci ex modi fuga
dignissimos, incidunt maiores quaerat corporis quia veniam ipsam, esse
non omnis! Aperiam nemo praesentium quidem ipsa ad, perferendis
debitis, quia voluptatum nostrum possimus eligendi! Cupiditate, unde
et consectetur iusto porro maiores. Blanditiis eos architecto maxime
dolores ab libero nostrum delectus odit accusamus harum quos
cupiditate aliquid, a sed, ullam sit? Facilis voluptatibus earum
officia unde accusamus tempore odit aspernatur et reiciendis
dignissimos! Quos velit similique voluptate ab quam quasi ullam culpa
officiis et quaerat alias, ipsam iste, perferendis repudiandae atque
temporibus eum? Nostrum, repellat praesentium doloremque amet quasi
atque doloribus tenetur aspernatur tempore quo?
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi,
facilis ipsam. Voluptates minima eaque cupiditate nostrum illum quis
possimus qui dolorem ex, facere optio sapiente. Beatae inventore
accusamus ratione, quos cupiditate maxime repudiandae id ex. Magni
dolore aut earum tempora doloribus porro debitis pariatur expedita,
quis soluta optio sed distinctio repudiandae sit, in animi! Ea
consectetur magni consequuntur velit at illo aut neque deleniti
impedit, voluptatem quo ad deserunt animi eligendi commodi tempore
placeat aliquid dolor? Quam vero officia perspiciatis illo velit eum
iusto, impedit autem! Distinctio, obcaecati! Tempore debitis dolor
iste aliquam fuga ipsa, cumque magni sit. Consequuntur commodi nisi
in, voluptates alias aliquid, ipsam eveniet rem ducimus omnis nemo
doloremque! Corporis, earum harum sed asperiores autem cum ab aut
repellat, provident perferendis aliquid molestias. Quos sed
consequuntur molestiae, incidunt officia odio nisi ex numquam et vero
sequi maxime maiores, necessitatibus iure ut exercitationem sapiente.
Consequuntur eaque odio, inventore vitae odit adipisci ex modi fuga
dignissimos, incidunt maiores quaerat corporis quia veniam ipsam, esse
non omnis! Aperiam nemo praesentium quidem ipsa ad, perferendis
debitis, quia voluptatum nostrum possimus eligendi! Cupiditate, unde
et consectetur iusto porro maiores. Blanditiis eos architecto maxime
dolores ab libero nostrum delectus odit accusamus harum quos
cupiditate aliquid, a sed, ullam sit? Facilis voluptatibus earum
officia unde accusamus tempore odit aspernatur et reiciendis
dignissimos! Quos velit similique voluptate ab quam quasi ullam culpa
officiis et quaerat alias, ipsam iste, perferendis repudiandae atque
temporibus eum? Nostrum, repellat praesentium doloremque amet quasi
atque doloribus tenetur aspernatur tempore quo?
</p>
</div>
</div>
</body>
</html>
CSS:
Next, we style and customize the scrollbar. For this we need CSS. Now copy the code provided to you below and paste it into your stylesheet.
That’s all for this tutorial. Our custom scrollbar is now ready. You can now go ahead and use your creativity to customize the scrollbar further.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #0d0c24;
}
/* Decoration */
h1.title {
color: #ffffff;
font-family: "Poppins", sans-serif;
text-align: center;
font-size: 9vw;
margin: 0.5em 0;
}
p.text {
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-weight: 300;
line-height: 2em;
text-align: justify;
padding: 0 1.4em;
letter-spacing: 0.02em;
}
/* Decoration Ends */
/* Code For Custom Scrollbar Starts Here */
/* For firefox */
.sub-div {
max-height: 100vh;
overflow-y: scroll;
/*Thumb color and background color for firefox */
scrollbar-color: #00c6ff #242942;
overflow-x: none;
}
/* ::-webkit- is for chrome */
::-webkit-scrollbar {
width: 1.2em;
overflow-x: none;
}
::-webkit-scrollbar-track {
background-color: #242942;
margin-block: 0.25em;
border-radius: 0.3em;
}
::-webkit-scrollbar-thumb {
background: #00c6ff;
background: -webkit-linear-gradient(to right, #00c6ff, #0072ff);
background: linear-gradient(to right, #00c6ff, #0072ff);
border-radius: 0.3em;
}
If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Also if you have any queries, suggestions or feedback comment below.
Happy Coding!
