Custom Scrollbar

Code

/* Webkit scrollbar */
.custom-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Hide scrollbar */
.hide-scroll {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.hide-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Scroll snap */
.scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

.scroll-section {
    scroll-snap-align: start;
    height: 100vh;
}

/* Scroll-to-top button */
.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}
.scroll-top.visible {
    opacity: 1;
}

Explanation

::-webkit-scrollbar customizes Webkit scrollbars; scrollbar-width is for Firefox; scroll-snap implements scroll snapping.

More CSS Snippets