Setting up a Custom CSS Scrollbar
When a website has a highly polished and professional look, it is the subtle details that make the difference. One of the small customizations that is typically overlooked is the scrollbar. The default scrollbar in browsers work just fine but don’t usually complement your website’s unique style. Using webkit CSS, you can customize the size, shape, and color of the scrollbar to match the aesthetic of your site.
Stylizing your scrollbar will help you create a visual identity online. The scrollbar can enhance the cohesive look of your site and make it more immersive as an interactive element. You can adjust the width of the scrollbar as well as the radius of the handle and colors.
This tutorial utilizes CSS and webkit to style the scrollbar, so it can be done on any website, not just sites using Elementor.
Example
Code Tutorial
Add and Customize CSS
Drop in this CSS code where you would like to add a custom scrollbar. Below is a chart to show and explain what each item is targeting with CSS. You can change the styling of each of these items to customize your site’s scrollbar by adjusting the scrollbar piece background color, width of the scrollbar, color and shape of the handle and the color and shape of the handle on hover.
Webkit CSS target | What it changes |
|---|---|
-webkit-scrollbar-track-piece | Whole scrollbar background piece |
-webkit-scrollbar | Entire scrollbar |
-webkit-scrollbar-thumb | Scrollbar handle |
-webkit-scrollbar-thumb:hover | Scrollbar handle on hover |
/*Whole scrollbar background piece*/
::-webkit-scrollbar-track-piece{
background:#32344c;
}
/*Entire scrollbar*/
::-webkit-scrollbar{
width:15px;
}
/* Scrollbar handle */
::-webkit-scrollbar-thumb {
background: #0060b9;
border-radius: 5px;
}
/* Scrollbar handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b6bcfa;
}
Bonus Tip: Assign this to specific classes
If you want to add a custom scrollbar to just one area of your site, you can assign each of these items to specific classes. Just add the class to your container, and then add the class to your css before the double colons.