Как изменить полосу прокрутки на CSS
На сегодняшний день, можно очень простым способом изменить внешний вид всем надоевшей серой полосы прокрутки. И для этого не нужно подключать сторонние библиотеки или писать JavaScript код, а достаточно запомнить несколько CSS свойств. Правда, такой способ имеет поддержку, только у популярных -webkit браузеров - Chrome, Safari, Opera.
Данные CSS свойства не будут работать в IE и Firefox, но поскольку большинство пользователей, сегодня выбирают Chrome, то можно смело эти свойства применять в своих проектах. Ничего страшного не произойдет, если немногочисленные пользователи других браузеров, увидят не кастомную полосу прокрутки (scrollbar), а дефолтную.
Свойство -webkit-scrollbar
Свойство -webkit-scrollbar служит контейнером для всех элементов полосы прокрутки: ползунка и дорожки. Его стандартная ширина равна 17 пикселям, но мы можем задавать любую ширину.
::-webkit-scrollbar {
width: 25px; /* ширина нового скроллбара */
}
Свойство -webkit-scrollbar-track
Данное свойство стилизует дорожку, расположенную внизу под ползунком. Наш ползунок бегает по дорожке, когда мы двигаем по нему мышкой. Главным образом суть стилизации полосы прокрутки состоит в замене ее родного серого цвета на другой, подходящий под цветовую гамму страницы.
::-webkit-scrollbar-track {
background: #f5cdcd; /* цвет фона у дорожки */
box-shadow: 0 0 2px rgba(0, 0, 0, .2) inset; /* тень у дорожки */
}
Мы видим, что дорожка покрасилась в светло-розовый цвет.
Свойство -webkit-scrollbar-thumb
Свойство -webkit-scrollbar-thumb кастомизирует ползунок, который бегает по дорожке. Теперь покрасим наш ползунок в темно-розовый цвет, скруглим у него углы и зададим рамку.
::-webkit-scrollbar-thumb {
background: #e47e7e; /* цвет фона у дорожки */
border-radius: 8px; /* скругление углов */
border: 3px solid #f5cdcd; /* толщина, стиль и цвет рамки */
}
::-webkit-scrollbar-thumb:hover {
background: #b91414; /* ползунок меняет цвет при наведении */
}
В качестве дополнения на ползунок можно повесить картинку.
::-webkit-scrollbar-thumb {
background: #e47e7e url(mouse.png) no-repeat top;
background-size: contain;
border-radius: 8px;
border: 3px solid #f5cdcd;
}
Очень круто будет смотреться линейный градиент.
::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, #c471f5 0%, #fa71cd 100%);
background-size: contain;
border-radius: 8px;
border: 3px solid #f5cdcd;
}
Свойство -webkit-scrollbar-button
Свойство -webkit-scrollbar-button отвечает за навигационные стрелочки, которые были сверху и снизу у стандартной полосы прокрутки.
::-webkit-scrollbar-button {
background: #f5cdcd url(arrow_top.png) no-repeat;
background-size: contain;
}
Все рассмотренные выше стили можно применять к любым другим скроллам на сайте, например к элементам формы. Вот таким простым способом, уже сегодня можно полосу прокрутки сделать частью дизайна сайта, тем самым повысив его индивидуальность и эстетическое восприятие.
-
Создано 28.10.2020 10:20:41
-
Михаил Русаков
Комментарии (2):
Добрый день! Отличная статья! Однако где взять картинку для объекта mouse.png ?
Ответить
Читаю, повторяю код у себя. Смотрю результат на мобильных Android и WindowsPhone. И вновь обнаруживаю что не знаю где взять картинку для объекта "стрелка" - arrow_top.png ? Кстати, этих стрелок должно быть две: направленных вверх и вниз. А если делать скролл и горизонтальный - тогда ещё необходимо две стрелки: влево и вправо. Подскажите пожалуйста, где можно найти эти объекты, причём с учётом того что ширина полосы прокрутки может меняться в большую сторону?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.