Quick Ways To Create A Custom Scrollbar In WordPress
July 15. 2020
It is safe to say that, for whatever reason, you want your website to stand out. Having such a platform will ensure the thing you are putting outstays longer in the mind of the visitor, and that is almost exclusively a good thing. Apart from the content on your website, another way to draw attention to your product is the visual aspect. This is by no means a piece of new knowledge. There is a reason why McDonald’s is red and yellow and Facebook blue. However, here, we will talk about one small part of the experience your website offers. It is a part that may not seem too important, but we believe still has its value – the scrollbar. In the following few lines, you will learn some quick ways to create a custom scrollbar in WordPress.
Simple ways to create a custom scrollbar in WordPress
Creating a custom scrollbar is an essential step in making a custom theme for your website. So, if you are interested in making your website stand out in every single way, let us introduce you to the first method of making that scrollbar unique.
Add a custom scrollbar in WordPress with a Plugin
As is with most things you want to do in WordPress, using a Plugin as a means of creating a slick scrollbar is a good road to take. The reason why this method is highly recommended for most users is its simplicity. With a few simple clicks, you will find yourself looking at a scrollbar that matches your style. Still, it is worth mentioning one tiny flaw that comes with this method. Namely, this plugin does not support mobile browsers. However, if this does not seem like much of a loss, do continue with the read.
First of all, you will need to install and activate the Advanced Scrollbar plugin. This action is simple enough:
- Visit the Plugins, then go to Add New page inside your WordPress admin area. Type the name of the said plugin in the search bar, and hit Enter.
- Once you locate the plugin, click on the ‘Install Now’ button. WordPress will then download and install the plugin for you. After this, you will be able to notice that the ‘Install Now’ button has changed into the ‘Activate’ button.
- Click on that ‘Activate’ button and you are all set to go.
Now that you have installed and activated the necessary plugin, you are going to have to configure it. While that word may sound intimidating, the process is super easy. Simply go over to Settings > Custom Color Scrollbar Settings. Once there, you will be able to change the color of your scrollbar, as well as its rail background colors. You can then select the mouse scroll step, which would be the scrolling speed of the mouse wheel. What is also great about this plugin is that it allows you to select whether you want to auto-hide the scrollbar, or always display it.
You also have the option to choose the ‘Cursor only’ option, which would display the scrollbar rail without the button. Below that, you will be able to find options to set the scroll speed, change rail alignment (left or right), and enable touch behavior.
After you have gone through all the options, played with colors, and found what combination suits your style and preference best, don’t forget to click the ‘save changes’ button, in order to store all that work. Upon doing so, you can visit your website to see those gorgeous custom scrollbar colors in action.
Add custom scrollbar colors in WordPress using CSS
As you can deduce from the subtitle, this method uses CSS to style your scrollbar. This method has proven itself faster than the one where you use jQuery. However, it is important to mention that it only works on desktop browsers using WebKit rendering engines like Google Chrome, Safari, and Opera. It will, unfortunately, fail to have any effect on mobile browsers or Firefox and Edge on desktop computers. With that said, if this is the option you are keen on opting for, here is the way to go about it.
Start by heading over to Themes > Custom page. This action will launch the WordPress theme customizer interface. You will be able to see your site’s live preview with a bunch of options on the left plane of your screen. Proceed by clicking on the Additional CSS tab from the left pane. The tab will slike to show you a simple box where you will be able to add your custom CSS. As soon as you add a valid CSS rule, you will see it applied to your website’s live preview pane. As for that valid CSS rule, here is what you ought to add for your scrollbar to be susceptible to changes:
::-webkit-scrollbar {
-webkit-appearance: none ;
}
::-webkit-scrollbar {
width : 10px ;
}
::-webkit-scrollbar-track {
background: #ffb400 ;
borger : 1px solid #ccc ;
}
::-webkit-scrollbar-thumb {
background: #cc00ff ;
borger : 1px solid #eee ;
height : 100px ;
border-radius: 5px ;
}
::-webkit-scrollbar-thumb:hover {
background: blue ;
Remember that any custom CSS that you add using theme customizer is only available with that particular theme. If you happen to change a theme but want to keep that custom scrollbar, you will have to copy and paste that CSS rule to your new theme using the same method.
A word of caution considering custom scrollbar colors
Although this is a great means of making your website stand out, we have to mention one downside of creating a custom scrollbar in WordPress. Namely, by default, CSS does not come with a ruleset that would let you change scrollbar properties. There are some proposals to add this option, but they are not supported by the majority of browsers at the current moment. To overcome this issue, designers and developers use browser-specific pseudo-elements or JavaScrip to override default scrollbar appearance. Those are the techniques we have described to you. Still, you have to keep in mind that you must test your site with different browsers and devices in order to ensure it works as you imagined on all browsers. Once you have that covered, it is safe to say that you know how to create a custom scrollbar in WordPress.