Do you want to add a custom scrollbar for Divi? Customizing the appearance of the browser scrollbar can help your website stand out and highlight your brand colors.
In this post, we will show you how you can add a custom-colored scrollbar in Divi by adding a few lines of CSS.
These are the two main options for adding a custom scrollbar in Divi.
Option 1 is to use some CSS and option 2 is to use a WordPress plugin.
The CSS option is quicker and means not using yet another plugin so I prefer to use the CSS option.
In the steps below we will use the CSS method to customize the scrollbar.
Add a custom Divi scrollbar using CSS
This option uses CSS to style the Divi scrollbar, but whilst it is quicker to implement it will only work on limited browsers.
These custom Divi scrollbars using CSS only work on desktop browsers using WebKit such as Google Chrome, Safari, and Opera. This method does not work on mobile browsers or Firefox and Edge on desktop computers.
To use this method you will need to add some custom CSS to your Divi Theme Options custom CSS box, on a page’s custom CSS area, or into a Divi child theme.
You will need to add the following custom CSS to Divi.
/* width of the sidebar */
::-webkit-scrollbar {
width: 10px;
}
/* Scrollbar Track */
::-webkit-scrollbar-track {
background: #efefef;
border-radius: 4px;
}
/* Scrollbar Handle */
::-webkit-scrollbar-thumb {
background: #25c1c6;
border-radius: 5px;
}
/* Scrollbar Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #ff6652;
}This CSS above will result in the following red scrollbar design with a grey background “rail” and a turquoise hover effect;
The demo above uses just a few of the available styling options for the scrollbar.
For WebKit browsers, you can use any or all of the following pseudo-elements to customize the Divi browser’s scrollbar:
::-webkit-scrollbar to customize the scrollbar.
::-webkit-scrollbar-button to customize the buttons on the scrollbar (arrows pointing upwards and downwards).
::-webkit-scrollbar-thumb to customize the draggable scrolling handle.
::-webkit-scrollbar-track to customize the track (progress bar) of the scrollbar.
::-webkit-scrollbar-track-piece to customize the track (progress bar) NOT covered by the handle.
::-webkit-scrollbar-corner to customize the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
::-webkit-resizer to customize the draggable resizing handle that appears at the bottom corner of some elements.
Final thoughts
This is perhaps a bit of a 1990s design trend, but when used with a little restraint I think it can help add detailed styling to your website and help emphasize company branding.
Do you use a custom scrollbar on your Divi website? Drop a link in the comments if you have a great design you would like to share.
