How to Change Default Scrollbar Style Make a Stylish One

Default Scrollbar

When a webpage overflow a page with any type of content such as text, video, music or any others type of media. A default scrollbar (sometimes vertical and sometimes horizontal) automatically appear on the right side and bottom side of the page. Usually, you use these scrollbars to see the overflowed content that’s are hidden.

Custom Scrollbar - PrograCoding
Default Scrollbar

But you are here because you want to change the default scrollbar style that is implemented by the browsers like Google Chrome, Mozilla Firefox, Opera Desktop or Safari. They are quietly same. 

Custom Scrollbar

Here now we will see How to change the default scrollbar and create a completely unique scrollbar for your website, blog or online store. We will use pure CSS to get this job done.

HTML:

<!-- Demo Custom embedded Scrollbar code -->
<div id="scrollbox">
    <div class="scrollbars" id="customscrollbar">
      If you want to add this....
      <div class="force-overflow"></div>
    </div>
</div>

Then add this CSS snippet in the header of the page you want to show the custom scrollbar

.scrollbars
{
	float: left;
	height: 300px;
	width: 100%;
	background: #F5F5FF;
	overflow-y: scroll;
}

.force-overflow
{
	min-height: 450px;
}
#scrollbox
{
	text-align: center;
	width: 500px;
	margin: auto;
}
/*
 * Custom Scrollbar by PrograCoding
 */
#customscrollbar::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#customscrollbar::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}
#customscrollbar::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #D62929;
}

Preview custom stylish scrollbar

Scroll the mouse wheel in this box to see effects. If you want to add this scrollbar to your whole website, then add id="scrollbox" to <head> tag on every page. It will look like <head id="scrollbox">. Then add class="scrollbars" and id="customscrollbar" to your pages’s <body> tag. After adding it will look like <body class="scrollbars" id="customscrollbar">.
Note: You can always define your own id and class value. And you can also merge these tag and id.

 

 

Always make sure you have added the CSS code to your page’s head in which page you want to show the custom scrollbar. If you forget to add the custom scrollbar won’t work. Instead, It will show the default scrollbar.

Have you noticed that the entire things happened with pure CSS? Yes! CSS is such powerful. But you can also get this job done by adding some line of Javascript snippet in your page. But you should not use javascript where CSS can solve an issue. Have fun!

$ Recommended for you

Leave a Reply

Your email address will not be published. Required fields are marked *