Введение
В сентябре 2018 г. комитет W3C в документе CSS Scrollbars определил спецификации настройки внешнего вида панелей прокрутки с помощью CSS.
В 2020 году 96% пользователей Интернета запускали браузеры, поддерживающие стили панелей прокрутки CSS. Однако, чтобы реализовать поддержку Blink, WebKit и браузеров Firefox, нужно написать два набора правил CSS.
В этом учебном модуле вы научитесь использовать 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 Scrollbars.
В этом примере используются свойства 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-scrollbar-track
, ::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 вы найдете полезные упражнения и проекты по программированию.