Styling

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

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

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

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

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

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

// Customize the transition effect for the scrollbar track
--custom-scrollbar-track-transition: none;

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

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

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

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

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

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

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

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

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