This content originally appeared on DEV Community and was authored by Muhammad Rauf
If you are thinking about styling the browser’s scrollbar then you are in the right place. You may have tried to make a custom scrollbar but did not get the actual output that you were wanted. In this tutorial, you’ll come to know how to create a custom scrollbar for all browsers using pure CSS.
Yes! you heard it right, we are not going to use any scrollbar plugin or custom scrolling function. We’ll just explore the ways to style the browser’s default scrollbar using CSS properties. Well! the benefit of using pure CSS is that the page scrolling will remain smooth as compare to scrolling plugins.
The scrollbar styles that we are going to share replace the browser’s default scrollbar styles whether it is a horizontal or vertical scrollbar. You can check this custom scrollbar on the demo page. There you will see two scroll bars, one of them is a page scrollbar and the other is a scrollable section.
How to Create Custom Scrollbar
In order to create a custom scrollbar, you just need to have some scrollable content on your webpage. Basically, you don’t need to create any special HTML for the custom scrollbar. If you have already a scrollbar in your webpage then simply skip the HTML and read the CSS styling guide. Anyhow, if you don’t have any element on your page, you may try the following scrollable box. Just keep some content inside it.
<div class="scrollable" style="height: 1000px; width: 400px">
This is a scrollable div.
</div>
Besides this, we created three classes for horizontal, vertical, and both horizontal and vertical scroll. You may add the "horizontal-scroll" class to a div element to make a horizontal scrollable box.
<div class="horizontal-scroll">
Place your div content here...
</div>
Similarly, you can use the "vertical-scroll" class for the vertical scrollable box.
<div class="vertical-scroll">
Place your div content here...
</div>
You can add a class name "scrollable" that we styled a 500px both horizontal and vertical scrollable box.
<div class="scrollable">
Place your div content here...
</div>
Styling Browsers Scrollbar with CSS
In order to style the scrollbar, we’ll use the CSS -WebKit- extension and target the browser’s built-in selector for the scrollbar. So, select the scrollbar with the -webkit- prefix and define the width of the scrollbar. It will set the thickness of the scrollbar. You can define the custom value for the CSS width property (that we defined 15px) according to your needs.
/* scrollbar width */
::-webkit-scrollbar {
width: 15px;
}
Best Designed Web Scroll bar.
If you want to add custom scroll bar with hover effect just copy below code and add it to your webpage.
<style>
/* width */
::-webkit-scrollbar {
width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #ddd;
border-radius: 15px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: orange;
border-radius: 15px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #e30d00;
}
</style>
Want to read in detail from our official website Create Custom Scroll Bar
To SEE DEMO
That’s all! I hope you have successfully designed browsers' custom scrollbar using CSS. If you have any questions or suggestions, let me know by discuss below.
This content originally appeared on DEV Community and was authored by Muhammad Rauf
Muhammad Rauf | Sciencx (2021-11-27T15:33:47+00:00) Create Custom Scroll Bar Using CSS. Retrieved from https://www.scien.cx/2021/11/27/create-custom-scroll-bar-using-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.