How to Create Custom Scrollbars in HTML & CSS using Webkit.
- You must add a <style></style> tag to the head custom code area of all the pages where you need a custom scrollbar in your site.
- This is to be able to write computer readable CSS, which will let browsers know how to style the scrollbars. - Inside the style tag you just added, target the scrollbars with CSS. See example below and above for reference.
- If you want to update all of the scrollbars everywhere on the site, then just add the webkit selector like below. - Add the styles to the scrollbar & track like you would with any other html element.
If you are unsure about things, look at the page settings of this website to better get a feel of how to do this, or feel free to reach out.
You can clone this on Webflow to mess around with it more.
// General Scrollbar styling used on this site:
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, .05);
-webkit-border-radius: 20px;
border-radius: 20px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 20px;
border-radius: 20px;
background: rgb(54, 49, 49);
}
Need a partner?
Make sure you consider my company, Sol Company in your search. We'd love the opportunity to meet with you and learn more about your business goals.