Dynamic Color Scrollbars
Take UI customization to the next level. This script uses CSS Variables and JavaScript to instantly repaint the scrollbar without reloading the page.
Scroll Me! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Copy the Script
<style>
:root { --thumb-color: #888; }
/* Chrome/Safari */
::-webkit-scrollbar-thumb { background: var(--thumb-color); }
/* Firefox */
* { scrollbar-color: var(--thumb-color) #f1f1f1; }
</style>
<script>
function changeScrollColor(color) {
document.documentElement.style.setProperty('--thumb-color', color);
}
</script>Frequently Asked Questions
JavaScript cannot directly access pseudo-elements like `::-webkit-scrollbar`. Instead, it updates CSS Custom Properties (variables) on the `:root` element, which the scrollbar CSS uses.
Firefox supports `scrollbar-color` which can also be controlled via CSS variables, ensuring good cross-browser compatibility.
Yes. Since it uses standard CSS properties, adding a `transition` rule to the element will allow colors to fade smoothly.