How to Change the Default Scrollbar of your WordPress Site

How to Change the Default Scrollbar of your WordPress Site
0/5 No votes
--

Report this app




Description

Changing the default scrollbar is a very interesting job where your WP site locks will optimize. The default gray color scrollbar looks too old because of we familiar with this color scrollbar from a long while. When your customer or visitor visit your site then they will surely love the horizontal as well as the parallel scrollbar. You can apply new fress look & colors, also customize the size and width of the scrollbar. So, read the full from the top to bottom post to Change the Default Scrollbar of your WordPress Site.

Before starting the method for custom scrollbar we need to know the effects after changing. Because it may not suitable for your website or the browser you and most of the users use. Do not need to panic, because of it just about some properties as follows –

  • Your WordPress CMS does not come with any extra scrollbar changing option so need to do it manually. The manual changing method may not work on all of your styles. Also, it may overdrive your default theme styles which sometimes not looks good.
  • As you change the CSS default properties style, CSS does not come with a ruleset that would let you change scrollbar properties. There are some suggestions to add this, but they are still not supported by few web browsers at the moment.
  • To defeat this issue of the designers as well as the developer’s browser-specific pseudo elements or JavaScript to override default scrollbar appearance.
  • We will show you both techniques. However, keep in mind that you must test your site with different browsers and devices to ensure it works properly on all browsers.

Way to Change the Default Scrollbar Style on WP Site

In this post, I’m going to share 2 effective methods to change or customize the scrollbar design. You can use any of this method, which one you like to perform, as per my recommendation use method 1 if you are a beginner in this field, otherwise, method 2 is a good choice. You can also visit – How to Find the URL of Uploaded Images on WordPress

Method 1. Use a Plugin to Customize the default Scrollbar [Easy Method]

This method is easier and recommended for most users. However, it does not support most of the smartphone browsers.

First, thing you need to do is install as well as activate the Advanced Scrollbar plugin

After activating the plugin, you need to head over to Settings » Custom Color Scrollbar Settings page to configure the plugin.

WP Plugin to Customize the default Scrollbar

After the above step, you can change the scrollbar color and the scrollbar rail background colors. You can then select the mouse scroll step, which is the scrolling speed of the mouse wheel.

You can also select whether you want to auto-hide the scrollbar or always display it.

You have the option pick ‘Cursor only’ option which would display the scrollbar rail but not the button.

Under that, you will see an option to set the scroll speed, change rail alignment (left or right), and enable touch behavior.

Don’t ignore to click on the save changes button to store your settings.

You can now visit your website to see your custom scrollbar colors in action.

Method 2: Add Custom Scrollbar Colors in WordPress using CSS

This method uses CSS to style your scrollbar, which is quicker than using jQuery.

But, it only works on desktop browsers using WebKit rendering engines like Google Chrome, Safari, Opera, and more.

It will not have any impact on mobile browsers or Firefox and Edge on desktop computers.

You will need to add the following custom CSS to your WordPress custom Code Editor

::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #ffb400;
border:1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background: #cc00ff;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
::-webkit-scrollbar-thumb:hover {
background: blue;
}

See the live effects on the code editor, if you think it’s working perfectly just save it. On the above-given code, you can apply your own color and style to customize as per your preference.

Leave a Reply

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