CSS - Scrollbars: A Beginner's Guide

Привет, будущие маги веб-дизайна! Сегодня мы окунемся в神奇ный мир CSS скроллбаров. Не волнуйтесь, если вы никогда не писали ни строчки кода — я буду вашим доброжелательным проводником в этом путешествии, и к концу вы будете стилизовать скроллбары как профи!

CSS - Scrollbars

Введение в скроллбары

Прежде чем мы углубимся в детали, давайте поговорим о том, что такое скроллбары. Вы видите их каждый день, browse'я в интернете — это те маленькие полосы по бокам или снизу веб-страницы, которые позволяют вам прокручивать контент вверх, вниз, влево или вправо, когда контент не умещается на вашем экране.

Теперь представьте, если бы вы могли взмахнуть магической палочкой и изменить的外观 этих скроллбаров. Именно это мы сегодня и научимся делать с помощью CSS!

Как стилизовать скроллбары?

Стилизация скроллбаров с помощью CSS — это как сделать вашей веб-странице.makeover. Это способ выделить ваш сайт и предоставить уникальный опыт пользователя. Давайте начнем с простого примера:

/* Это применяется ко всему телу вашей веб-страницы */
body::-webkit-scrollbar {
width: 12px;               /* ширина всего скроллбара */
}

body::-webkit-scrollbar-track {
background: orange;        /* цвет области трека */
}

body::-webkit-scrollbar-thumb {
background-color: blue;    /* цвет拇指 скролла */
border-radius: 20px;       /* округлость拇指 скролла */
border: 3px solid orange;  /* создает отступ вокруг拇指 скролла */
}

В этом примере мы говорим браузеру:

Сделать скроллбар 12 пикселей wide
Покрасить трек (область, по которой скользит拇指) в оранжевый цвет
Сделать拇指 (часть, которую вы захватываете для прокрутки) синим
Дать拇指 закругленные углы
Добавить оранжевую рамку вокруг拇指

Получается здорово, правда? Но подождите, есть еще!

Селекторы скроллбаров

Чтобы стилизовать скроллбары, мы используем особые селекторы. Представьте их как магические слова, которые говорят CSS, какой части скроллбара нужно изменить. Вот основные из них:

Селектор	Описание
::-webkit-scrollbar	Стилизует весь скроллбар
::-webkit-scrollbar-button	Стилизует кнопки на скроллбаре (стрелки, указывающие вверх и вниз)
::-webkit-scrollbar-track	Стилизует трек (полосу进展) скроллбара
::-webkit-scrollbar-track-piece	Стилизует часть трека (полосы进展), не покрытую рукояткой
::-webkit-scrollbar-thumb	Стилизуетovable scrolling handle
::-webkit-scrollbar-corner	Стилизует нижний угол скроллбара, где встречаются горизонтальные и вертикальные скроллбары
::-webkit-resizer	Стилизуетovable resizing handle, который появляется в нижнем углу некоторых элементов

Создание пользовательского скроллбара

Теперь, когда мы знаем наши магические слова (селекторы), давайте создадим fun, пользовательский скроллбар:

/* Давайте сделаем неоновый скроллбар! */
.neon-scroll::-webkit-scrollbar {
width: 16px;
}

.neon-scroll::-webkit-scrollbar-track {
background: #000000;
box-shadow: inset 0 0 5px grey;
}

.neon-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(#00ff00, #ff00ff);
border-radius: 10px;
}

.neon-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#ff00ff, #00ff00);
}

В этом примере мы создали скроллбар, который looks like он belongs в киберпанк фильме! Трек черный с-subtle inner shadow, а thumb имеет градиент, который изменяется при наведении. Примените этот класс к любому элементу с перетеком, и смотрите, как магия happens!

Стилизация CSS скроллбара

Давайте разберем процесс стилизации скроллбара на шаги:

Выберите цель: Решите, хотите ли вы стилизовать скроллбар для всей страницы (используйте body) или только для определенного элемента (используйте класс или ID).
Установите ширину: Используйте селектор ::-webkit-scrollbar, чтобы установить общую ширину скроллбара.
Стилизуйте трек: Используйте ::-webkit-scrollbar-track, чтобы установить фоновый цвет, добавить тени или другие стили к треку.
Разработайте thumb: Используйте ::-webkit-scrollbar-thumb, чтобы стилизовать قابل перетаскиванию часть скроллбара. Это место, где вы можете проявить creativeness с цветами, градиентами и формами.
Добавьте интерактивность: Используйте псевдо-классы, такие как :hover или :active, чтобы изменить appearance скроллбара при взаимодействии пользователей.

Вот пример, объединяющий все это:

.cool-scroll {
height: 300px;
overflow-y: scroll;
}

.cool-scroll::-webkit-scrollbar {
width: 14px;
}

.cool-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}

Это создает modern scrollbar для любого элемента с классом cool-scroll. Скроллбар немного шире чем по умолчанию, имеет закругленные углы и затемняется при наведении.

Связанные с CSS скроллбаром свойства

Хотя мы сосредоточены на WebKit браузерах (например, Chrome и Safari), есть некоторые стандартные свойства CSS, которые работают в разных браузерах. Вот таблица этих свойств:

Свойство	Описание
scrollbar-width	У устанавлива ширины скроллбара (только для Firefox)
scrollbar-color	У устанавлива цвет скроллбара (только для Firefox)
overflow	Указывае что делать, если контент перетекает за пределы ящика элемента
overflow-x	Указывае что делать с левыми/правыми краями контента, если он перетекает за пределы области содержимого элемента
overflow-y	Указывае что делать с верхними/нижними краями контента, если он перетекает за пределы области содержимого элемента

Вот как вы можете использовать их:

/* Для Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}

/* Для других браузеров */
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
background-color: #888;
}

Этот код устанавливает consistent scrollbar стиль across разные браузеры. Он тонкий, с легким треком и более темным thumb.

И вот и все,folks! Вы только что повысили свои навыки CSS и научились стилизовать скроллбары. Помните, с большой властью приходит большая ответственность — используйте эти техники wisely чтобы улучшить опыт пользователя, а не создавать отвлекающие или сложные для использования интерфейсы.

Продолжайте экспериментировать, продолжайте учиться, и, что самое главное, получайте удовольствие! Кто знает, может быть,下一大的趋势 в веб-дизайне будет ваш уникально стилизованный скроллбар. Счастливо кодирования!

Credits: Image by storyset