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.