dr.Brain

doctor Brain

мир глазами веб-разработчика

CSS: пользовательский скроллбар

управляем дизайном полосы прокрутки с помощью CSS

dr.Brain

время чтения 1 мин.

Photo by Hafiz Kat Closon on Unsplash

Вы считаете, что дизайн полосы прокрутки нельзя изменить?

С помощью псевдоэлементов ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb можно переделать скроллбар в соответствии с требованиями к дизайну сайта:

::-webkit-scrollbar {
  width: 10px;
}

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

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

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

Настраиваемая полоса прокрутки работает в браузерах на основе WebKit (например, Chrome и Safari). Можно настроить её цвет и размеры так, чтобы они идеально соответствовали общему стилю страниц.

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


Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.