How to Change Scrollbar | Custom Scrollbars WebKit
Also Helpful –
How to Change Scrollbar?
To change the scrollbar you need some CSS WebKit code to modify the scrollbar. Create a CSS page or put in the style tag to execute the scrollbar. Here we use
::-webkit-scrollbar class to set background and width,
::-webkit-scrollbar-track class to box-shadow and border-radius, and
::-webkit-scrollbar-thumb class to scrollbar to gradient effect and also border.
Just create a .css page and link to the main page or put in the style tag bellow code. If you want the scrollbar you can do that also follow the tag and change the what kind of style you want, like background, width, shadow, radius, and many more which you want to add.
style.css (sample code)
/* Custom Scrollbars WebKit */
box-shadow: inset 0 0 10px #00000070;
How to change Scrollbar on any webpage?
After completing your all designing part, you saw the default scrollbar it that kind to attractive so you want to change that. Yes, you can do that easily. In the CSS section, you need to put those above codes and it starts working.
In the same page
Link all page
<link rel=“stylesheet” href=“style.css”>
in the style.css page
// Paste above code
How to change Scrollbar on the WordPress site?
To change the WordPress site scrollbar you need to follow the four steps to complete the changes
1) Login to your WordPress
2) Then go to Appearance -> Customize
3) In the Customize section find additional CSS option
4) Put above code in the Additional CSS section
Thank you for visiting!
We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.
Keep coding, Keep debugging!
- Click to share on Facebook (Opens in new window)
- Click to share on WhatsApp (Opens in new window)
- Click to share on Twitter (Opens in new window)
- Click to email this to a friend (Opens in new window)
- Click to share on Telegram (Opens in new window)
- Click to print (Opens in new window)
- Click to share on Pinterest (Opens in new window)