Today in this article you are going to learn how we can add a custom scrollbar to a website. Custom Scrollbar For All Browsers Friends, before clearing this topic, it is more important for us to understand what a is scrollbar.
CSS provides a property called Overflow that tells the browser what to do when the content of the box is larger than the box. And then this allows the Browser Box to use Scrollbars.
What is Scrollbar?
As you are currently on my website chat4now.com and you are reading this blog of Custom Scrollbar For All Browsers, then there will be a limit on the screen of your computer or mobile which ends at a certain height.
But the content of any website or blog is not fixed, the content can be more or less. In this condition, the browser puts a scroll bar on the side, the advantage of which is that the user can see the entire content of the website or blog on a low-height computer or mobile by scrolling down as if you are reading this blog, then you will have to read the entire content. If you have to scroll down for this then this is the scrollbar.
How to Add Custom Scrollbar
Lastly let’s talk about how we can add Custom Scrollbar For All Browsers to the website, for this there are some simple steps that you have to follow.
- Login to your WordPress website dashboard
- Go to Appearance and click on Customization.
- Under Customization, scroll down. click on Additional CSS, And Paste the given CSS Code.
- Finally, click on Publish.
/*ScrollBar Design by Roton Kumar Roy*/
*::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;margin-left:-10px!important;
}
*::-webkit-scrollbar
{
width: 10px;
margin-left:-10px;
background-color: #F5F5F5!important;
}
*::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: linear-gradient(90deg, rgba(36,14,0,1) 0%, rgba(121,9,109,1) 35%, rgba(173,6,47,1) 60%, rgba(21,255,0,1) 100%);
}
I hope you liked this article How to Add a Custom Scrollbar in WordPress? if you have any questions in your mind, please write in the comment box and share this post with your friends on social media platforms Facebook and Twitter.
