Custom scrollbar CSS

custom-scrollbar.css

/*
*   @title  Custom scrollbar
*   @note   For vertical switch overflow-x and scroll-snap-type to 'y'.
*   @html   <div class='scrollbar-horizontal'>
*             <div class='child'>...</div>
*           </div>
*/

.scrollbar-horizontal {
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.scrollbar-horizontal .child {
    scroll-snap-align: center;
}

.scrollbar-horizontal::-webkit-scrollbar {
    width: 24px;
    height: 24px;
    background-color: transparent;
}

.scrollbar-horizontal::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 9999px;
}

.scrollbar-horizontal::-webkit-scrollbar-thumb {
    background-color: rebeccapurple;
    background-clip: padding-box;
    border: solid 8px transparent;
    border-radius: 9999px;
}