HomeCSSCSS Custom Scrollbar

CSS Custom Scrollbar

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!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

3 × 1 =

Most Popular