Add Custom Scrollbar in Any WordPress Website Without Plugin

What Is Scrollbar?

A scrollbar is an interaction technique or widget in which continuous text, pictures, or any other content can be scrolled in. It can be vertical or horizontal. I will learn in today’s post Add Custom Scrollbar in Any WordPress Website


The scroll bar is very common on websites that have long pages of content on their site. When you click the scroll bar, it will move to let you see the whole page, which makes it easy for you to navigate through the rest of the page.

Add Custom Scrollbar in Any WordPress Website

All types of web browsers have a default scrollbar. But we will not put this boring scrollbar on our website. We will add a very nice custom scrollbar to our WordPress website very easily.

There are many free paid plugins available for adding custom scrollbars. But I will not use any plugin because I think it would not be right to reduce the speed of the site by installing plugins for this small modification. Remember that the more plugins you install, the slower your site will be. So try to use as few plugins as possible.

We will add custom scrollbars to our website using a little bit of CSS. If the theme you are using has a custom CSS option on your website, then there is no need to worry. Now almost every theme has custom CSS options. And if the themes you are using don’t have custom CSS, I can add my custom CSS and custom JS to our website by installing a small plugin.

Install Custom CSS and JS Free Plugin

Custom CSS & Custom JS Plugins to install Plugins Click Add New and Install then Activate.

Add Custom Scrollbar in Any WordPress Website Without Plugin
Simple Custom CSS and JS

Add Custom CSS

Copy the CSS from below and paste and publish in the custom CSS. OK Guys I have successfully added a custom scrollbar. To change the color of the scrollbar, edit the color codes and use the color of your choice.

Custom Scroll Bar CSS

/***Custom Scroll Bar CSS***/
::-webkit-scrollbar{
width: 0.7vw;
background: 46464600;
}
::-webkit-scrollbar-thumb{
background: -webkit-linear-gradient(transparent,#ea6a40);
background: linear-gradient(transparent,#ea6a40);
border-radius: 20px;
}
/***End***/

Custom Scroll Bar Hover CSS

/***Custom Scroll Bar Hover CSS***/
::-webkit-scrollbar-thumb:hover{
background: -webkit-linear-gradient(transparent,#464646);
background: linear-gradient(transparent,#464646); 
}
/***End***/
You can read our other WordPress posts

This custom scrollbar Mozilla firefox and internet explorer will not support these two or browsers. These two browsers show the default scrollbar when a visitor visits your website.

I hope this post will be useful for you. If you like it, please share the post. If there is any problem, please comment. I will try to solve it.

Share your love
Default image
SM.Tanvir Hassan
I love technology and love to learn. This is my personal blog. I share with you everything I learn through this blog
Articles: 19

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.