Всем привет и сегодня мы рассмотрим псевдоселекторы с помощью которых сможем осуществлять стилизацию скрола. Сразу оговорюсь что данные псевдоселекторы работают только с семейством webkit, то есть с такими браузерами как google, opera, safari и т. п. Для той же mozilla или IE придется найти другие решения.

Итак, поехали! Полоса прокрутки он же скрол на вашем сайте могут смотреться не всегда красиво. Поэтому здесь у нас есть два варианта либо убрать отображение полосы прокрутки, либо стилизовать ее под ваш дизайн.

Давайте рассмотрим как убрать полосу прокрутки. Делается это очень просто:

::-webkit-scrollbar{
    width: 0px;
}

Здесь мы просто задаем ширину полосы прокрутки. В нашем случае мы выставили значение 0px. В результате чего полоса прокрутки просто не будет отображаться.

Причем заметьте. Даже если мы поставим значение не 0px, а допустим 5px.

::-webkit-scrollbar{
    width: 5px;

}

Полоса прокрутки все равно не будет отображаться. Почему? Да потому что после использования данного псевдоселектора (-webkit-scrollbar), предыдущие стили скрола автоматически сбрасываются. И мы можем писать новые.

Например, теперь мы можем задать определенный фон полосе прокрутки.

::-webkit-scrollbar{
    width: 5px;
    background:gray;
}

С помощью свойства background мы задали серый цвет нашей полосе прокрутки. Однако самого ползунка мы не видим. Нам необходимо прописать для него стили в отдельном псевдоселекторе:

::-webkit-scrollbar-thumb {
    background-color:yellow;
}

Мы установили в качестве фона ползунка желтый цвет.

То есть с помощью псевдоселектора -webkit-scrollbar-thumb можно стилизовать ползунок полосы прокрутки.

Теперь для стилизации полосы прокрутки нам достаточно играться со свойствами и значениями псевдоселекторов -webkit-scrollbar и -webkit-scrollbar-thumb.

К примеру, можно скруглить острые углы скролов с помощью свойства border-radius:

::-webkit-scrollbar{
    width: 5px;
    background:gray;
    border-radius: 5px;
}


::-webkit-scrollbar-thumb {
    background-color:yellow;
   border-radius: 5px;
}

или в качестве фона полосы прокрутки, ползунка задать картинки

::-webkit-scrollbar{
    width: 5px;
    background:url(image1.jpg) no-repeat;        
    border-radius: 5px;
}


::-webkit-scrollbar-thumb {
    background:url(image2.jpg) no-repeat;
    border-radius: 5px;
}

В общем теперь все в ваших рукак! Включайте воображение и вперед.

На этом дорогие друзья данная статья подошла к концу. Надеюсь она была для вас полезна.

Я с вами прощаюсь! Желаю удачи и успехов! Пока!