SVG иконка вместо thumb в скролле

Question

Как можно реализовать такое? куда копать? вместо thumb(вроде так называется в скролле)поставить свою иконку, может какая-то библиотека для это есть?

Answer 1

.scrollbar {
    background-color: #F5F5F5;
    float: left;
    height: 300px;
    margin-bottom: 25px;
    margin-left: 22px;
    margin-top: 40px;
    width: 65px;
       overflow-y: scroll;
}

.force{
    min-height: 450px;
}
#style-1::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb {
    background-color: #000000;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Скрол</title>
        <link type="text/css" rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="scrollbar" id="style-1">
            <div class="force"></div>
        </div> 
    </body>
</html>

Источник,нужно уметь гуглить http://websketches.ru/blog/kastomizacia-brauzernogo-skrollbara

БЛОГ НА HUSL

SVG иконка вместо thumb в скролле

Ответы (1 шт):