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:
- How to structure your project folder for optimal organization.
- Creating a basic HTML structure for the scrollable container.
- Applying custom CSS styles to achieve a visually appealing scrollbar.
- 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.
