Стилизация полосы прокрутки в CSS

27 декабря, 2021 12:11 пп 15 730 views | Комментариев нет

| | Комментировать запись

В сентябре 2018 года Консорциум Всемирной паутины W3C CSS Scrollbars определил спецификации для настройки внешнего вида полос прокрутки с помощью CSS.

По состоянию на 2021 год 96% интернет-пользователей используют браузеры, поддерживающие CSS-стили для полосы прокрутки. Однако при настройке стилей нужно написать два набора правил CSS: для Blink и WebKit, а также браузеров Firefox.

В этом мануале вы узнаете, как использовать CSS для настройки полос прокрутки, которые будут поддерживаться современными браузерами.

Требования

Чтобы следовать инструкциям, рекомендуем вам ознакомиться с такими понятиями:

Стилизация полос прокрутки в Chrome, Edge и Safari

В настоящее время для оформления полосы прокрутки в браузерах Chrome, Edge и Safari существует псевдоэлемент -webkit-scrollbar.

В приведенном ниже примере использованы псевдоэлементы ::- webkit-scrollbar, ::- webkit-scrollbar-track и ::webkit-scrollbar-thumb.

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;  /* отступ вокруг бегунка */
}

Полоса прокрутки, созданная с помощью этих правил CSS, будет оранжевого цвета с синим бегунком. Бегунок будет занимать не всю ширину зоны отслеживания – с каждой стороны будет отступ в 3 пикселя.

Этот код работает в последних версиях Chrome, Edge и Safari.

К сожалению, W3C официально отказался от этой спецификации и, скорее всего, со временем она станет нерекомендуемой.

Стилизация полос прокрутки в Firefox

В настоящее время оформление полосы прокрутки для Firefox происходит при помощи CSS Scrollbars.

В этом примере мы используем свойства scrollbar-width и scrollbar-color:

body {
  scrollbar-width: thin;          /* "auto" или "thin" */
  scrollbar-color: blue orange;   /* цвет бегунка и зоны отслеживания */
}

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

Эта спецификация имеет некоторые общие черты со спецификацией -webkit-scrollbar. Однако в настоящее время она не поддерживает настройку отступов и округлости бегунка.

Создание перспективных стилей

CSS можно написать так, чтобы он поддерживал и спецификацию -webkit-scrollbar, и CSS Scrollbars.

В следующем примере мы используем scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb.

/* Работает в Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Работает в Chrome, Edge и Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Браузеры Blink и WebKit будут игнорировать правила, которые они не распознают, они применят правила -webkit-scrollbar. В свою очередь, браузеры Firefox тоже будут игнорировать неизвестные им правила и применять только CSS Scrollbars. Как только браузеры Blink и WebKit полностью откажутся от спецификации -webkit-scrollbar, они начнут поддерживать код CSS Scrollbars, который ранее игнорировали.

Заключение

В этой статье вы узнали об использовании CSS для оформления полос прокрутки и о том, как обеспечить распознавание этих стилей в большинстве современных браузеров.

Также полосу прокрутки можно имитировать, скрыв стандартную полосу и используя JavaScript для определения высоты и положения новой полосы. Однако такой подход имеет некоторые ограничения при воспроизведении таких действий, как прокрутка с инерцией или затухание движения.

Читайте также: Что такое CSS?

Tags:

Добавить комментарий