Довольно часто дизайнер предлагает добавить особые стили на скроллбар. По дизайну это выглядит красиво, но для разработчика это может быть дополнительной головной болью. В этой статье разберемся как изменить дизайн скроллбара на 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 — перетаскиваемая ручка изменения размера, которая отображается в нижнем углу некоторых элементов.
