CSS

Изменить дизайн скроллбара на CSS для Chrome, Safari, Yandex и других браузеров

Довольно часто дизайнер предлагает добавить особые стили на скроллбар. По дизайну это выглядит красиво, но для разработчика это может быть дополнительной головной болью. В этой статье разберемся как изменить дизайн скроллбара на CSS для webkit-браузеров (Chrome, Safari, Yandex и др.).

Да, сегодня есть множество библиотек на Javascript, которые полностью заменяют скроллбар, и добавив свои элементы, позволяют веб-разработчику стилизовать их. Но это добавляет дополнительные ограничения, так как потребуется учитывать множество всевозможных факторов (тач-устройства, прокрутку тачпадом или колесом мышки, возможность прокрутки как вертикально, так и горизонтально). В общем огромное количество разных проблем.

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

Итак, в CSS для движка webkit есть несколько псевдоклассов:

::-webkit-scrollbar — вся панель прокрутки.
::-webkit-scrollbar-button — кнопки на панели прокрутки (стрелки, указывающие вверх и вниз).
::-webkit-webkit-scrollbar-thumb — перетаскиваемая ручка прокрутки.
::-webkit-scrollbar-track — полоса прокрутки (шкала прогресса) полосы прокрутки.
::-webkit-scrollbar-track-piece — часть дорожки (индикатор прогресса), не покрытая ручкой.
::-webkit-scrollbar-corner — нижний угол полосы прокрутки, где встречаются как горизонтальные, так и вертикальные полосы прокрутки.
::-webkit-resizer — перетаскиваемая ручка изменения размера, которая отображается в нижнем углу некоторых элементов.

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

Также рекомендуем: