Styling scrollbars

scrollbar_styling.css

.styled-scrollbars {
    --scrollbar-foreground: #a6a6a6;
    --scrollbar-background: rgba(255, 255, 255, 0);
    --scrollbar-fake-background: #f0f0f3;
    --scrollbar-size: 5px;
    --scroll-thumb-start: 40px;
    --scroll-thumb-end: 40px;
    --scrollbar-radius: 20px;
    padding-right: 1px; /* экстра-отступ */
    margin-right: -1px;
}

.firefox .styled-scrollbars{
    scrollbar-width: thin;
    /* плашка-бегунок, фон */
    scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}

.styled-scrollbars::-webkit-scrollbar {
    width: var(--scrollbar-size);
    /* в основном для вертикальных полос прокрутки */
    height: var(--scrollbar-size);
    /* в основном для горизонтальных полос прокрутки */
    border-radius: var(--scrollbar-radius);
}

.styled-scrollbars::-webkit-scrollbar-thumb {
    /* плашка-бегунок */
    background: var(--scrollbar-foreground);
    /* фон */
    border-radius: var(--scrollbar-radius);
}

.styled-scrollbars::-webkit-scrollbar-track {
    /* фон */
    background: var(--scrollbar-background);
}

.styled-scrollbars::-webkit-scrollbar-track-piece:end {
    /* чтобы скроллбар шел не с самого верха */
    background: rgba(255, 255, 255, 0);
    margin-bottom: var(--scroll-thumb-end);
}

.styled-scrollbars::-webkit-scrollbar-track-piece:start {
    background: rgba(255, 255, 255, 0);
    margin-top: var(--scroll-thumb-start);
}