Report this

What is the reason for this report?

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

Published on February 20, 2021
William LeBradley Kouchi

By William Le and Bradley Kouchi

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

Введение

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the author(s)

William Le
William Le
Author
Bradley Kouchi
Bradley Kouchi
Editor
See author profile

Former Technical Editor at DigitalOcean. Expertise in areas including Vue.js, CSS, React, and more.

Category:
Tags:

Still looking for an answer?

Was this helpful?


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Creative CommonsThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.