Styling

Customize the following CSS variables to tailor the appearance of your scrollbar

// Adjust the border radius of the scrollbar track
--scrollbar-border-radius: 0px;

// Set the thickness of the scrollbar track
--scrollbar-thickness: 5;

// Define the space between the scrollbar track and its surroundings
--scrollbar-offset: 0;

// Customize the transition effect for the scrollbar track wrapper
--scrollbar-track-wrapper-transition: width 60ms linear, height 60ms linear;

// Define the color of the scrollbar track
--scrollbar-track-color: transparent;

// Define the color of the scrollbar thumb
--scrollbar-thumb-color: rgb(0 0 0 / 20%);

// Define the color of the scrollbar thumb when hovered
--scrollbar-thumb-hover-color: var(--scrollbar-thumb-color);

// Define the thickness of the scrollbar when hovered
--scrollbar-hover-thickness: var(--scrollbar-thickness);

// Customize the transition effect for the scrollbar thumb
--scrollbar-thumb-transition: none;

// Set the minimum size for the scrollbar thumb
--scrollbar-thumb-min-size: 20;

// Define the colors for the scrollbar buttons
--scrollbar-button-color: var(--scrollbar-thumb-color);
--scrollbar-button-hover-color: var(--scrollbar-button-color);
--scrollbar-button-active-color: var(--scrollbar-button-hover-color);

// Define the fill color for the scrollbar button arrow
--scrollbar-button-fill: white;
--scrollbar-button-hover-fill: var(--scrollbar-button-fill);
--scrollbar-button-active-fill: var(--scrollbar-button-hover-fill);

// Customize the overscroll behavior of the viewport
// Disabling overscroll behavior prevents bouncing in Firefox and Safari
--scrollbar-overscroll-behavior: initial;

// Define the overscroll behavior for mobile devices
--scrollbar-mobile-overscroll-behavior: none;