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; height:100px; border-radius:5px; } ::-webkit-scrollbar-thumb:hover { background: blue; } |
