How to Change the Scrollbar Style on Your Website
Youssuf Abramo
Why change the scrollbar look?
It’s just a super easy tweak you can do on your site, and it’ll make it look really nice and catchy. All you need to do is change the scrollbar style. You’ve probably seen it a lot on sites like Facebook and Google, but they usually do it for the scrollbars inside the site, not the main body one. What we’ll do is add it to the body too, so the whole website looks cooler. And when you’re done, don’t forget to thank me later!
You can do this in two ways:
How to do it:
-
Write some code
-
Use a plugin
But like I mentioned before in one of my posts, plugins aren’t really the best choice. They usually add extra tables to your database and slow down the site. That’s why I prefer doing everything with code if possible. And if you’d like to read an article about speeding up your site, here’s the link—make sure to check it out, it’s super useful: Click here to visit the link.
So now I’ll show you how to do it with code in a really simple way. You don’t need to know programming at all—just copy the code, paste it, change a few numbers and colors, and you’re good to go. It won’t take more than 5 minutes.
Where to put the code
First, just go to your website and log in like we always do through wp-admin. Then open Appearance, click on Customize—all normal stuff we’ve done a million times before to edit the site. Nothing new here!
Now, once you’re in, my friend, you’ll see something called Additional CSS. Click on it, and that’s where it asks you to add any CSS code you want to apply on your site. Super simple—just copy the code I’ll give you, paste it into Additional CSS, and that’s it, as we agreed.
code
/* START SCROLLBAR */
html {
–scrollbarBG: #f5f5f5;
–thumbBG: #e04622;
transition:0.5s;
}
::-webkit-scrollbar-thumb:hover {
–thumbBG: #131359;
transition:0.5s;
}body::-webkit-scrollbar {width: 13px;}body::-webkit-scrollbar-track {background: #f5f5f5 !important;}
body::-webkit-scrollbar-thumb {
background-color: var(–thumbBG) ;
border-radius: 6px;
border: 3px solid var(–scrollbarBG);
}
/* END SCROLLBAR */
Download the code
Alright, focus with me now… As soon as you paste the code, you’ll notice the scrollbar style has changed. Of course, you’ll probably want to tweak its look a bit.
I’ll list some properties that are inside the code, and all you need to do is change the numbers and keep the same unit px (which stands for pixel). If you want to make something bigger, increase the numbers. If you want it smaller, decrease them. Sounds good? Easy stuff! Now let’s break down the code so you know exactly what to change.
Code explanation
-
The part in red → this is the color of the scrollbar itself (in the code, it’s orange).
-
The part in green → this is the hover color (when the mouse is over the bar, it shows this color, here it’s blue).
-
The part in purple → this sets the scrollbar width.
-
The part in orange → this is the color of the track (the background area of the scrollbar). You can leave it as is (a matte white).
-
The part in turquoise → this sets the scrollbar corner rounding. If you delete this line or set it to
0px, the scrollbar corners will become sharp. -
The part in blue → this adds a border color around the scrollbar. In our case, I set it to the same as the background color, so it creates spacing between the bar and the screen edge. If you don’t want that spacing, just follow along.
-
The part in light blue (last one) → this creates an outline around the scrollbar. If you set it to the same as the background, you’ll get a nice effect that makes the bar look detached from the edge of the screen. If you don’t want that, simply delete this line.
Supported colors
That’s it—you now know everything about the code! Of course, it supports HEX, RGB, RGBA, and more. But honestly, I recommend sticking to HEX; it’ll make your life easier.
Note: This code might not work on all browsers, but it usually works fine on any browser built with the Chromium engine (like Chrome, Edge, etc.).
Plugin alternative
Now, if you don’t feel like messing with code and just want a plugin that does this for you—and lets you control it from the WordPress dashboard—here you go, my friend:
[Click here to visit the plugin link]
That’s it! If you liked the content, stay with us in the group—I always share useful stuff. You can even send me an add if you want so you won’t miss any new posts. And of course, feel free to check out the other articles I’ve shared here:
[Click here to visit the link]
Or you can also check out the YouTube channel—you’ll love it!
I have been surfing online more than three hours these days,
yet I never discovered any interesting article like yours. It is pretty value
sufficient for me. In my view, if all web owners and
bloggers made excellent content material as you probably did, the net will
be much more useful than ever before.