Styling
Customize the following CSS variables to tailor the appearance of your scrollbar
| CSS Variable Name | Value | Description |
|---|---|---|
--scrollbar-border-radius |
0px | Adjust the border radius of the scrollbar track. |
--scrollbar-thickness |
5 | Set the thickness of the scrollbar track. |
--scrollbar-offset |
0 | Define the space between the scrollbar track and its surroundings. |
--scrollbar-track-wrapper-transition |
width 60ms linear, height 60ms linear | Customize the transition effect for the scrollbar track wrapper. |
--scrollbar-track-color |
transparent | Define the color of the scrollbar track. |
--scrollbar-thumb-color |
rgb(0 0 0 / 20%) | Define the color of the scrollbar thumb. |
--scrollbar-thumb-hover-color |
var(--scrollbar-thumb-color) | Define the color of the scrollbar thumb when hovered. |
--scrollbar-hover-thickness |
var(--scrollbar-thickness) | Define the thickness of the scrollbar when hovered. |
--scrollbar-thumb-transition |
none | Customize the transition effect for the scrollbar thumb. |
--scrollbar-thumb-min-size |
20 | Set the minimum size for the scrollbar thumb. |
--scrollbar-button-color |
var(--scrollbar-thumb-color) | Define the color of the scrollbar button. |
--scrollbar-button-hover-color |
var(--scrollbar-button-color) | Define the color of the scrollbar button when hovered. |
--scrollbar-button-active-color |
var(--scrollbar-button-hover-color) | Define the color of the scrollbar button when active. |
--scrollbar-button-fill |
white | Define the fill color for the scrollbar button arrow. |
--scrollbar-button-hover-fill |
var(--scrollbar-button-fill) | Define the fill color for the scrollbar button arrow when hovered. |
--scrollbar-button-active-fill |
var(--scrollbar-button-hover-fill) | Define the fill color for the scrollbar button arrow when active. |
--scrollbar-overscroll-behavior |
initial | Customize the overscroll behavior of the viewport. |
--scrollbar-mobile-overscroll-behavior |
none | Define the overscroll behavior for mobile devices. |
Become a sponsor and get your logo on our README on GitHub and the front page of https://ngx-scrollbar.netlify.com/.
Become a backer and get your logo on our README on GitHub.
