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 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

• What Is WordPress? Explained for Beginners
• Change the WooCommerce Sale Badge to Discount Percentage
• How to Add WooCommerce Auto Update Cart on Quantity Change
• How To Add A Buy Now Button. Send People Directly To Checkout WooCommerce

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.