Пример стилизации на данном сайте
супер простой scrollbar на классах .svg-wrapper
выделение
можно на селектор повесить
::-webkit-scrollbar-track {
background: linear-gradient(to right, #d2fff5, #b8ffd8 3px);
}
::-webkit-scrollbar-thumb {
background: -webkit-gradient(linear,left top,left bottom,from( #aef3ff),to(#9f77ff));
background: linear-gradient(to bottom, #aef3ff, #9f77ff)
-webkit-box-shadow: inset 1px 1px 1px #a9caff, inset -1px -1px 3px #9871fe;
box-shadow: inset 1px 1px 1px #a9caff, inset -1px -1px 3px #9871fe;
}
::-webkit-scrollbar {
width: 17px;
height: 30px;
}
|
.svg-wrapper::-webkit-scrollbar-track {
background: #cecece;
}
.svg-wrapper::-webkit-scrollbar-thumb {
background: #3b7ddd;
}
.svg-wrapper::-webkit-scrollbar {
width: 10px;
height: 10px;
} |
| Псевдоэлементы: ::-webkit-scrollbar- вся полоса прокрутки. ::-webkit-scrollbar-button - кнопки на полосе прокрутки (стрелки, направленные вверх и вниз, которые прокручивают по одной строке за раз). ::-webkit-scrollbar:horizontal - горизонтальная полоса прокрутки. ::-webkit-scrollbar-thumb - перетаскиваемый маркер прокрутки. ::-webkit-scrollbar-track - полоса прокрутки (прогресс-бар), где поверх белой полосы находится серая полоса. ::-webkit-scrollbar-track-piece - часть дорожки (прогресс-бара), не охваченная ручкой. ::-webkit-scrollbar:vertical - вертикальная полоса прокрутки. ::-webkit-scrollbar-corner - нижний угол полосы прокрутки, где встречаются горизонтальная и вертикальная полосы прокрутки. Часто это нижний правый угол окна браузера. ::-webkit-resizer - перетаскиваемый маркер изменения размера, который появляется в нижнем углу некоторых элементов |
выделение
::selection {
background: #3e0083;
color: #fff;
} |
.myClass::selection {
background: #3e0083;
color: #fff;
} |