Welcome to CodeCrew Infotech

shape shape
Shape Shape Shape Shape

How To Add Custom Scrollbar In WordPress

1. Add Custom Scrollbar With Plugin:

Step 1: First, install and activate the Advanced Scrollbar plugin.


Step 2: After that go to Settings > Advanced Scrollbar Settings.

Here you can change the scroll bar color and background color and set the mouse scroll step, scroll speed, and auto-hide option.


Step 3: Then go scrollbar custom style setting tab and then you can change the Scrollbar width, border, and radius. and save it.


Step 4: Open your WordPress and check that the color of the scroll bar will be changed.


2. Add Custom Scrollbar Color Using CSS:

Step 1: Click on Appearance and select customize.


Step 2: Select the Additional CSS from the theme to customize the option.


Step 3: Copy the below CSS and paste the Additional CSS.

Check your WordPress site and see your changes.

  ::-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;




  ::-webkit-scrollbar-thumb:hover {

    background: blue;