How to Customize Your Divi Website Scrollbar
Have you ever been to a website and noticed the website has a big, bold, colorful scrollbar instead of the boring default browser scrollbar?
It’s actually just a few lines of custom CSS to completely customize your website’s scroll bar!
So why would you want to create a custom browser scrollbar for your Divi website?
The answer is branding!
In this day in age, branding is everything! Any extra things you can do to further yours (or your client’s) brand on the website, is a huge win.
You want website visitors to remember you, and an extra subtle dose of some razzle dazzle can definitely help with that.
Below you can see an example of what a customer browser scrollbar looks like. Let’s Get Started!
The CSS to Customize Your Browser Scrollbar
Here’s the CSS! As you can see, it’s not very much. You can copy this CSS and place it in one of the following places:
- In the Custom CSS Box in Divi Theme Options
- In your Child Theme’s Style.CSS File (learn how to create a Divi Child Theme, if you don’t know already)
Note: You can place the custom CSS into a single page’s custom CSS box. It won’t work. It needs to be in Divi Theme Options custom CSS box, or the style.css file of your child theme. If you want to add it to a single page, see below.
/* Custom Divi Scrollbar by Divi Life */
/* width of entire scrollbar */
::-webkit-scrollbar {
width: 25px;
}
/* The Scrollbar Track */
::-webkit-scrollbar-track {
background: #161616;
}
/* The Scrollbar Handle */
::-webkit-scrollbar-thumb {
background-image: linear-gradient(180deg,#00c4cc 0%,#7d2ae8 100%)!important;
/* don't want a gradient? just remove the above line and keep the line below */
background: #7d2ae8;
border-radius: 50px;
}
/* The Scrollbar Handle on hover */
::-webkit-scrollbar-thumb:hover {
}The CSS above is well commented so you can see what to customize to fit your own color scheme and branding.
It’s worth noting that you do not need to have a gradient scrollbar like our example. Instead, you can remove that line as instructed in the comment, and keep the background color.
How to Add the Custom Browser Scrollbar to a Single Page
In some cases, you might not want the custom browser scrollbar site wide, but instead on a singe page. In fact, that’s exactly what we did. We added a custom browser scrollbar on our All Access Pass membership landing page that matches the branding of our membership, but didn’t put one for the rest of our site.
To do this, you simply need to target the custom CSS page classes that WordPress generated for the page you want to use.
For example, every page has a unique ID, and WordPress generates a CSS class for this page. To find the page ID, go to “Pages” from WP Admin, and click on the page you’d like to add the scrollbar to. Then, look in the URL bar and you’ll see ?post=1234&action=edit in the URL. The number is the page ID.
/* Custom Divi Scrollbar by Divi Life for a SINGLE PAGE. Replace 1234 with the page ID that you'd like the browser scrollbar to appear on */
/* width of entire scrollbar */
.page-id-1234::-webkit-scrollbar {
width: 25px;
}
/* The Scrollbar Track */
.page-id-1234::-webkit-scrollbar-track {
background: #161616;
}
/* The Scrollbar Handle */
.page-id-1234::-webkit-scrollbar-thumb {
background-image: linear-gradient(180deg,#00c4cc 0%,#7d2ae8 100%)!important;
/* don't want a gradient? just remove the above line and keep the line below */
background: #7d2ae8;
border-radius: 50px;
}
/* The Scrollbar Handle on hover */
.page-id-1234::-webkit-scrollbar-thumb:hover {
}That’s it, we’re done!
Easy, right?
Replay, Manchester UK
Thanks for watching 🙂
Thanks so much, Tim! It doesn’t sound too hard. Lol! I’ve been enjoying your YouTubes! Keep up the awesome work!
You’re very welcome! 🙂
Replay, Bournemouth UK 🙂
Thanks for watching, Sarah!
This came at the right time. I am having this added to my next project.
That’s great to hear, Mark!! I’m so glad the timing worked out 🙂
Watching from Portugal.
Great jobs.
Thanks
Thanks for watching, Bernardo! 🙂
Replay, Köln DE
Thanks for watching, Michael!
Replay, Glasgow, Scotland
Thanks for watching, Gordon. Stay tuned for more epic stuff all month long 🙂
Thanks Tim, Good vid 🙂
Is it my Firefox? It seems not to be be working. Tried on my workstation and laptop 🙁
Hi Chook,
Thanks for watching. No, it’s not just you. Custom scrollbars don’t currently work on Firefox unfortunately. They supposedly have added limited support, but I haven’t been able to get it to work.
Replay on the site from the Blue Ridge Mountains.
Thanks for watching, Erik!
Nice job. I’ve been using this on client sites for that extra touch for a while now. But the gradient adds an even cooler flare.
Yeah the gradients are awesome! 🙂
Replay, From the Netherlands
Awesome 🙂
Replay – Tweed Heads, Australia 😊
Glad you stopped by Emma! 🙂
Reply from Australia 🙂
Thanks Bec for watching 🙂
Work only on Chrome ?
I’ve also noticed that after I applied the change, it only worked on Chrome.
It should work in all browsers except Firefox. Firefox does not support custom scrollbars although they’re supposedly adding support for it.
It should work in all browsers except Firefox. Firefox does not support custom scrollbars although they’re supposedly adding support for it.
Replay, Uganda
Thanks for watching, Jimmy!
Hey Tim, this is super cool. I really like this feature! Thanks
Glad you like it, Wilfred 🙂
Thanks Tim,
Much appreciated. Nice addition to the tool kit for when that extra je ne said quo is needed.
Definitely 🙂
Thanks for sharing this Tim, that’s a really nice touch and so simple when you know how 🙂
Yes, I totally agree! 🙂
Thanks!
You’re welcome! 🙂
Replay. Connecticut. 😊
Thanks for watching, Maura!
Hello
Simple and efficient
thank you
replay Cahors (France)
Thanks Bruno 🙂
Would it be possible, to have an image as scrollbar?
Yes, I believe it is possible. You’ll just need to define the image in the CSS. But it should work 🙂
Hi Tim, thanks for the great tutorial. If I want to add different colour scrollbars to a group of pages – eg 10 pages with one colour combination, 10 pages with a different combination, and 10 more with another, is it possible to group the page ID’s or do I have to copy and paste the css 30 times each with the individual page ID?
Hi Tara, You can group the page IDs by placing a comma in between.
So you would write the CSS like this:
.page-id-1::-webkit-scrollbar, .page-id-2::-webkit-scrollbar {
width: 25px;
}
You would just need to do the same for each page ID, and each chunk of the CSS.
Replay from The Netherlands!
Thanks for watching, Martin!
replay from Nashville TN
Thanks for watching, Jenn!
Thanks a lot for this simple tutorial, now mi website its happy and more unik!
Great! Glad you found it useful! 🙂
Thanks for this! It is working on my site, but is there a way to change the background to be transparent? Or 0 opacity? I don’t really need the background color in full.
Thanks!
For the scroll bar track, just set background to “none” and that will do what you need 🙂