2022-09-01 13:19:00
Вот и первое сентября — день знаний.
Значит, пора и нам набираться новых знаний!
Полосы прокрутки: неизбежность или красота?
Скорее всего большинство из вас, у кого на лендинге есть
прокручивающийся контент, будь то окна информации или даже всё окно страницы, задавались вопросом:
"А можно ли как-то стилизовать область прокрутки?"
Ответ прост:
можно! Существуют псевдоклассы, с помощью которых мы можем влиять на полосу прокрутки (скроллбар), и стилизовать её как нам хочется. Таких псевдокласса три:
::-webkit-scrollbar — Отвечает за целиковый скроллбар (как контейнер для скролл-трека и передвижного тумблера)
::-webkit-scrollbar-track — Путь нашего скролл-бара (сюда применяются стили формы трека, например, скругления или бекграунд)
::-webkit-scrollbar-thumb — Передвижной тумблер прокрутки (так же воспринимает цвет, формы, скругления)
В качестве примера на скриншотах к посту маленькая демонстрация со своими собственными приукрашиваниями Я применил прокрутку к "полотну" текста и стилизовал:
.part-text::-webkit-scrollbar {
width: 10px;
border-radius: 5px;
}
.part-text::-webkit-scrollbar-track {
background: lavender;
border-radius: 5px;
}
.part-text::-webkit-scrollbar-thumb {
background: violet;
border-radius: 5px;
}
.part-text {
height: 250px;
border: 1px solid violet;
border-radius: 5px;
padding: 15px;
overflow-y: scroll;
}
Если вы делаете крутой дизайн, то стандартные браузерные скроллбары
уж точно никак не впишутся в ваш собственный стиль сайта. Таким образом вы можете подстроить под себя даже такую деталь браузера как скроллбар
#полезная_фишка
448 views10:19
К
