HomeCSSCustom Scrollbar Using CSS

Custom Scrollbar Using CSS

Introduction:

In this tutorial, we will explore how to create a stylish scrollable container using custom CSS. By applying a set of carefully crafted styles, we can enhance the appearance of a typical scrollbar and give it a unique and appealing look. Throughout this tutorial, we will cover the necessary HTML and CSS code to achieve this effect.

Things You Will Learn:

  1. How to structure your project folder for optimal organization.
  2. Creating a basic HTML structure for the scrollable container.
  3. Applying custom CSS styles to achieve a visually appealing scrollbar.
  4. Enhancing the readability and aesthetics of the container’s content using CSS properties.

Video Tutorial:

To supplement this blog post, you can watch a detailed video tutorial on my YouTube channel, where I guide you step by step through the process of building this stylish scrollable container.

Project Folder Structure:

Before diving into the code, let’s establish a well-organized project folder structure. Structuring your project folders in a logical manner will make it easier to manage and maintain your codebase. Here’s an example structure you can follow:

  • index.html
  • style.css

HTML:

In your index.html file, start by creating a basic HTML structure for the scrollable container. This structure will serve as the foundation for the CSS styles we’ll apply later. Remember to link your CSS file as well.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Scrollbar CSS</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, eum
        dicta dolore neque et harum similique eius impedit voluptatum totam rem
        accusantium esse officiis a quisquam adipisci cum mollitia velit error
        commodi, nulla vel deserunt necessitatibus voluptates! Consectetur quo
        iusto rerum tempore ullam error voluptatum repellendus in similique non
        libero odit, dolorum quam sunt amet totam eius? Adipisci autem quas,
        accusantium eius labore quidem atque corrupti quis inventore? Quisquam
        nisi debitis sequi distinctio eum perspiciatis fugit dignissimos
        deserunt, aliquam nihil ipsa officiis quia quo odit dolore at. Porro
        vitae in, nisi eveniet voluptates fugiat officia! Natus dolorum mollitia
        magnam, aperiam earum dolores veritatis, amet numquam dignissimos
        deleniti, aliquam sint maiores saepe tempora iste odio tenetur quisquam
        asperiores perferendis minus possimus. Dolor eos praesentium
        perspiciatis nemo! Officia voluptate eos dolores est consequatur modi
        molestiae dignissimos odio, aut praesentium sit corrupti voluptatem
        aperiam, quo ut minus corporis assumenda eveniet expedita possimus
        aspernatur. Blanditiis nostrum consequuntur, voluptatem cupiditate ex
        ipsa quisquam aliquid corporis quam consectetur, repudiandae minima
        possimus. Doloremque maxime similique mollitia dolor repellat
        consequuntur facere deserunt obcaecati, corrupti et excepturi tempora,
        id molestias accusantium nihil. Voluptate non obcaecati fugit quo
        similique ducimus eveniet? Atque molestiae reiciendis, dolorem
        repellendus aperiam vero provident numquam.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, eum
        dicta dolore neque et harum similique eius impedit voluptatum totam rem
        accusantium esse officiis a quisquam adipisci cum mollitia velit error
        commodi, nulla vel deserunt necessitatibus voluptates! Consectetur quo
        iusto rerum tempore ullam error voluptatum repellendus in similique non
        libero odit, dolorum quam sunt amet totam eius? Adipisci autem quas,
        accusantium eius labore quidem atque corrupti quis inventore? Quisquam
        nisi debitis sequi distinctio eum perspiciatis fugit dignissimos
        deserunt, aliquam nihil ipsa officiis quia quo odit dolore at. Porro
        vitae in, nisi eveniet voluptates fugiat officia! Natus dolorum mollitia
        magnam, aperiam earum dolores veritatis, amet numquam dignissimos
        deleniti, aliquam sint maiores saepe tempora iste odio tenetur quisquam
        asperiores perferendis minus possimus. Dolor eos praesentium
        perspiciatis nemo! Officia voluptate eos dolores est consequatur modi
        molestiae dignissimos odio, aut praesentium sit corrupti voluptatem
        aperiam, quo ut minus corporis assumenda eveniet expedita possimus
        aspernatur. Blanditiis nostrum consequuntur, voluptatem cupiditate ex
        ipsa quisquam aliquid corporis quam consectetur, repudiandae minima
        possimus. Doloremque maxime similique mollitia dolor repellat
        consequuntur facere deserunt obcaecati, corrupti et excepturi tempora,
        id molestias accusantium nihil. Voluptate non obcaecati fugit quo
        similique ducimus eveniet? Atque molestiae reiciendis, dolorem
        repellendus aperiam vero provident numquam.
      </p>

      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, eum
        dicta dolore neque et harum similique eius impedit voluptatum totam rem
        accusantium esse officiis a quisquam adipisci cum mollitia velit error
        commodi, nulla vel deserunt necessitatibus voluptates! Consectetur quo
        iusto rerum tempore ullam error voluptatum repellendus in similique non
        libero odit, dolorum quam sunt amet totam eius? Adipisci autem quas,
        accusantium eius labore quidem atque corrupti quis inventore? Quisquam
        nisi debitis sequi distinctio eum perspiciatis fugit dignissimos
        deserunt, aliquam nihil ipsa officiis quia quo odit dolore at. Porro
        vitae in, nisi eveniet voluptates fugiat officia! Natus dolorum mollitia
        magnam, aperiam earum dolores veritatis, amet numquam dignissimos
        deleniti, aliquam sint maiores saepe tempora iste odio tenetur quisquam
        asperiores perferendis minus possimus. Dolor eos praesentium
        perspiciatis nemo! Officia voluptate eos dolores est consequatur modi
        molestiae dignissimos odio, aut praesentium sit corrupti voluptatem
        aperiam, quo ut minus corporis assumenda eveniet expedita possimus
        aspernatur. Blanditiis nostrum consequuntur, voluptatem cupiditate ex
        ipsa quisquam aliquid corporis quam consectetur, repudiandae minima
        possimus. Doloremque maxime similique mollitia dolor repellat
        consequuntur facere deserunt obcaecati, corrupti et excepturi tempora,
        id molestias accusantium nihil. Voluptate non obcaecati fugit quo
        similique ducimus eveniet? Atque molestiae reiciendis, dolorem
        repellendus aperiam vero provident numquam.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, eum
        dicta dolore neque et harum similique eius impedit voluptatum totam rem
        accusantium esse officiis a quisquam adipisci cum mollitia velit error
        commodi, nulla vel deserunt necessitatibus voluptates! Consectetur quo
        iusto rerum tempore ullam error voluptatum repellendus in similique non
        libero odit, dolorum quam sunt amet totam eius? Adipisci autem quas,
        accusantium eius labore quidem atque corrupti quis inventore? Quisquam
        nisi debitis sequi distinctio eum perspiciatis fugit dignissimos
        deserunt, aliquam nihil ipsa officiis quia quo odit dolore at. Porro
        vitae in, nisi eveniet voluptates fugiat officia! Natus dolorum mollitia
        magnam, aperiam earum dolores veritatis, amet numquam dignissimos
        deleniti, aliquam sint maiores saepe tempora iste odio tenetur quisquam
        asperiores perferendis minus possimus. Dolor eos praesentium
        perspiciatis nemo! Officia voluptate eos dolores est consequatur modi
        molestiae dignissimos odio, aut praesentium sit corrupti voluptatem
        aperiam, quo ut minus corporis assumenda eveniet expedita possimus
        aspernatur. Blanditiis nostrum consequuntur, voluptatem cupiditate ex
        ipsa quisquam aliquid corporis quam consectetur, repudiandae minima
        possimus. Doloremque maxime similique mollitia dolor repellat
        consequuntur facere deserunt obcaecati, corrupti et excepturi tempora,
        id molestias accusantium nihil. Voluptate non obcaecati fugit quo
        similique ducimus eveniet? Atque molestiae reiciendis, dolorem
        repellendus aperiam vero provident numquam.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, eum
        dicta dolore neque et harum similique eius impedit voluptatum totam rem
        accusantium esse officiis a quisquam adipisci cum mollitia velit error
        commodi, nulla vel deserunt necessitatibus voluptates! Consectetur quo
        iusto rerum tempore ullam error voluptatum repellendus in similique non
        libero odit, dolorum quam sunt amet totam eius? Adipisci autem quas,
        accusantium eius labore quidem atque corrupti quis inventore? Quisquam
        nisi debitis sequi distinctio eum perspiciatis fugit dignissimos
        deserunt, aliquam nihil ipsa officiis quia quo odit dolore at. Porro
        vitae in, nisi eveniet voluptates fugiat officia! Natus dolorum mollitia
        magnam, aperiam earum dolores veritatis, amet numquam dignissimos
        deleniti, aliquam sint maiores saepe tempora iste odio tenetur quisquam
        asperiores perferendis minus possimus. Dolor eos praesentium
        perspiciatis nemo! Officia voluptate eos dolores est consequatur modi
        molestiae dignissimos odio, aut praesentium sit corrupti voluptatem
        aperiam, quo ut minus corporis assumenda eveniet expedita possimus
        aspernatur. Blanditiis nostrum consequuntur, voluptatem cupiditate ex
        ipsa quisquam aliquid corporis quam consectetur, repudiandae minima
        possimus. Doloremque maxime similique mollitia dolor repellat
        consequuntur facere deserunt obcaecati, corrupti et excepturi tempora,
        id molestias accusantium nihil. Voluptate non obcaecati fugit quo
        similique ducimus eveniet? Atque molestiae reiciendis, dolorem
        repellendus aperiam vero provident numquam.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, eum
        dicta dolore neque et harum similique eius impedit voluptatum totam rem
        accusantium esse officiis a quisquam adipisci cum mollitia velit error
        commodi, nulla vel deserunt necessitatibus voluptates! Consectetur quo
        iusto rerum tempore ullam error voluptatum repellendus in similique non
        libero odit, dolorum quam sunt amet totam eius? Adipisci autem quas,
        accusantium eius labore quidem atque corrupti quis inventore? Quisquam
        nisi debitis sequi distinctio eum perspiciatis fugit dignissimos
        deserunt, aliquam nihil ipsa officiis quia quo odit dolore at. Porro
        vitae in, nisi eveniet voluptates fugiat officia! Natus dolorum mollitia
        magnam, aperiam earum dolores veritatis, amet numquam dignissimos
        deleniti, aliquam sint maiores saepe tempora iste odio tenetur quisquam
        asperiores perferendis minus possimus. Dolor eos praesentium
        perspiciatis nemo! Officia voluptate eos dolores est consequatur modi
        molestiae dignissimos odio, aut praesentium sit corrupti voluptatem
        aperiam, quo ut minus corporis assumenda eveniet expedita possimus
        aspernatur. Blanditiis nostrum consequuntur, voluptatem cupiditate ex
        ipsa quisquam aliquid corporis quam consectetur, repudiandae minima
        possimus. Doloremque maxime similique mollitia dolor repellat
        consequuntur facere deserunt obcaecati, corrupti et excepturi tempora,
        id molestias accusantium nihil. Voluptate non obcaecati fugit quo
        similique ducimus eveniet? Atque molestiae reiciendis, dolorem
        repellendus aperiam vero provident numquam.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, eum
        dicta dolore neque et harum similique eius impedit voluptatum totam rem
        accusantium esse officiis a quisquam adipisci cum mollitia velit error
        commodi, nulla vel deserunt necessitatibus voluptates! Consectetur quo
        iusto rerum tempore ullam error voluptatum repellendus in similique non
        libero odit, dolorum quam sunt amet totam eius? Adipisci autem quas,
        accusantium eius labore quidem atque corrupti quis inventore? Quisquam
        nisi debitis sequi distinctio eum perspiciatis fugit dignissimos
        deserunt, aliquam nihil ipsa officiis quia quo odit dolore at. Porro
        vitae in, nisi eveniet voluptates fugiat officia! Natus dolorum mollitia
        magnam, aperiam earum dolores veritatis, amet numquam dignissimos
        deleniti, aliquam sint maiores saepe tempora iste odio tenetur quisquam
        asperiores perferendis minus possimus. Dolor eos praesentium
        perspiciatis nemo! Officia voluptate eos dolores est consequatur modi
        molestiae dignissimos odio, aut praesentium sit corrupti voluptatem
        aperiam, quo ut minus corporis assumenda eveniet expedita possimus
        aspernatur. Blanditiis nostrum consequuntur, voluptatem cupiditate ex
        ipsa quisquam aliquid corporis quam consectetur, repudiandae minima
        possimus. Doloremque maxime similique mollitia dolor repellat
        consequuntur facere deserunt obcaecati, corrupti et excepturi tempora,
        id molestias accusantium nihil. Voluptate non obcaecati fugit quo
        similique ducimus eveniet? Atque molestiae reiciendis, dolorem
        repellendus aperiam vero provident numquam.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, eum
        dicta dolore neque et harum similique eius impedit voluptatum totam rem
        accusantium esse officiis a quisquam adipisci cum mollitia velit error
        commodi, nulla vel deserunt necessitatibus voluptates! Consectetur quo
        iusto rerum tempore ullam error voluptatum repellendus in similique non
        libero odit, dolorum quam sunt amet totam eius? Adipisci autem quas,
        accusantium eius labore quidem atque corrupti quis inventore? Quisquam
        nisi debitis sequi distinctio eum perspiciatis fugit dignissimos
        deserunt, aliquam nihil ipsa officiis quia quo odit dolore at. Porro
        vitae in, nisi eveniet voluptates fugiat officia! Natus dolorum mollitia
        magnam, aperiam earum dolores veritatis, amet numquam dignissimos
        deleniti, aliquam sint maiores saepe tempora iste odio tenetur quisquam
        asperiores perferendis minus possimus. Dolor eos praesentium
        perspiciatis nemo! Officia voluptate eos dolores est consequatur modi
        molestiae dignissimos odio, aut praesentium sit corrupti voluptatem
        aperiam, quo ut minus corporis assumenda eveniet expedita possimus
        aspernatur. Blanditiis nostrum consequuntur, voluptatem cupiditate ex
        ipsa quisquam aliquid corporis quam consectetur, repudiandae minima
        possimus. Doloremque maxime similique mollitia dolor repellat
        consequuntur facere deserunt obcaecati, corrupti et excepturi tempora,
        id molestias accusantium nihil. Voluptate non obcaecati fugit quo
        similique ducimus eveniet? Atque molestiae reiciendis, dolorem
        repellendus aperiam vero provident numquam.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, eum
        dicta dolore neque et harum similique eius impedit voluptatum totam rem
        accusantium esse officiis a quisquam adipisci cum mollitia velit error
        commodi, nulla vel deserunt necessitatibus voluptates! Consectetur quo
        iusto rerum tempore ullam error voluptatum repellendus in similique non
        libero odit, dolorum quam sunt amet totam eius? Adipisci autem quas,
        accusantium eius labore quidem atque corrupti quis inventore? Quisquam
        nisi debitis sequi distinctio eum perspiciatis fugit dignissimos
        deserunt, aliquam nihil ipsa officiis quia quo odit dolore at. Porro
        vitae in, nisi eveniet voluptates fugiat officia! Natus dolorum mollitia
        magnam, aperiam earum dolores veritatis, amet numquam dignissimos
        deleniti, aliquam sint maiores saepe tempora iste odio tenetur quisquam
        asperiores perferendis minus possimus. Dolor eos praesentium
        perspiciatis nemo! Officia voluptate eos dolores est consequatur modi
        molestiae dignissimos odio, aut praesentium sit corrupti voluptatem
        aperiam, quo ut minus corporis assumenda eveniet expedita possimus
        aspernatur. Blanditiis nostrum consequuntur, voluptatem cupiditate ex
        ipsa quisquam aliquid corporis quam consectetur, repudiandae minima
        possimus. Doloremque maxime similique mollitia dolor repellat
        consequuntur facere deserunt obcaecati, corrupti et excepturi tempora,
        id molestias accusantium nihil. Voluptate non obcaecati fugit quo
        similique ducimus eveniet? Atque molestiae reiciendis, dolorem
        repellendus aperiam vero provident numquam.
      </p>
    </div>
  </body>
</html>

 

CSS:

Now, let’s move on to the CSS code. Open the style.css file and add the following code:

body {
  background-color: #0d0c24;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
p {
  font-family: "Poppins", sans-serif;
  color: #ffffff;
  font-size: 1.2em;
  line-height: 2em;
  font-weight: 300;
  text-align: justify;
  letter-spacing: 0.2px;
  padding: 0 2em;
}
.container {
  max-height: 100vh;
  overflow-y: scroll;
  scrollbar-color: #00c6ff #242942;
}
::-webkit-scrollbar {
  width: 1.2em;
  overflow-x: none;
}
::-webkit-scrollbar-track {
  border-radius: 0.3em;
  background: #242942;
  margin-block: 0.25em;
}
::-webkit-scrollbar-thumb {
  background: #00c6ff;
  background: -webkit-linear-gradient(to right, #00c6ff, #0072ff);
  background: linear-gradient(to right, #00c6ff, #0072ff);
  border-radius: 0.3em;
}

 

Conclusion:

In this tutorial, we learned how to create a stylish scrollable container using custom CSS. By applying the provided CSS styles, you can enhance the appearance of the scrollbar and make it more visually appealing. We covered the project folder structure, HTML markup, and the necessary CSS properties to achieve this effect. Feel free to experiment and customize the styles to match your own design preferences.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

17 − three =

Most Popular