.webp)
Info
Overview
With this snippet, you can style scrollbars in browsers that support WebKit-based scrollbar styling, including Chrome, Edge, Brave, Opera, and Safari.
It lets you make scrollbars thinner, add rounded corners, customize the track and thumb colors, and apply a hover effect for custom look.
Setup
Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.
Right-click in Elementor, choose “Paste from another site,” and while the popup is open, press cmd/ctrl + v to insert the layout.
Place the code in an HTML widget or add it through Elementor → Custom Code (before the closing </body> tag) either globally or only on selected pages.
Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.
/* Scrollbar size */
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* Track */
*::-webkit-scrollbar-track {
background: #141414;
border-radius: 10px;
border: 1px solid #1C1C1C;
}
/* Thumb */
*::-webkit-scrollbar-thumb {
background: #5368FF;
border-radius: 10px;
border: 2px solid #1C1C1C;
transition: background 0.2s ease;
}
/* Thumb hover */
*::-webkit-scrollbar-thumb:hover {
background: #F77BE7;
}Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.
Place the PHP snippet inside your theme’s functions.php or using any code snippet to enable logic.