How to Change Scrollbar

How to Change Scrollbar | Custom Scrollbars WebKit


Live Demo

WordPress Site HTML Site

Also Helpful –

Responsive Header Navigation Menu

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)

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.

Change Scrollbar Code

In the same page

<style type=”text/css”>

//above code


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

Change Scrollbar WordPress

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!

Leave a Comment

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

%d bloggers like this: