Как стилизовать полосы прокрутки с помощью CSS

Введение

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

По состоянию на 2020 год 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;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

Вот скриншот полосы прокрутки, созданной с помощью этих правил CSS:

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

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

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

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

Вот пример, в котором используются свойства scrollbar-width и scrollbar-color:

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */ 
}

Вот скриншот полосы прокрутки, созданной с помощью этих правил CSS:

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

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

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

Вот пример, который использует scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit- полоса прокрутки, ::webkit-scrollbar-thumb:

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and 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, ознакомьтесь с нашей темой по CSS, где вы найдете упражнения и проекты по программированию.