Custom Scrollbar
Create a custom scrollbar for your Webflow site with this CSS code snippet. Change the boring, static browser scrollbar design of your Webflow site to a unique design.
Create a custom scrollbar for your Webflow site with this CSS code snippet. Change the boring, static browser scrollbar design of your Webflow site to a unique design.
How to add it
- Add the CSS via an HTML embed or in the head section of your custom code
- Choose either the single class code or sitewide code
The code
CSS
<!-- Add via HTML embed or head custom code -->
<!-- Entire site-->
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
-webkit-border-radius: 0px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
border-radius: 0px;
background-color: #f3f3f3;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background: #004d43;
}
::-webkit-scrollbar-thumb:window-inactive {
background: #004d43;
}
<!-- Specific class -->
.classname::-webkit-scrollbar-track {
background-color: rgba(24, 44, 79, 0.2);
border: none;
}
.classname::-webkit-scrollbar {
width: 6px;
background-color: rgba(24, 44, 79, 0.2);
}
.classname::-webkit-scrollbar-thumb {
background-color: rgba(24, 44, 79, 1);
}
