Смужка прокрутки - CSS-хитрощі

Anonim

scrollbar-colorВластивість контролює два кольори прокрутки: по кольору пальця і колір доріжки . scrollbar-colorє частиною проекту робочого колективу CSS модуля смуг прокрутки рівня 1, який на цей час все ще триває.

До цього scrollbar-colorрозробники не мали стандартного способу змінити зовнішній вигляд смуг прокрутки браузера, не вдаючись до приховування смуги прокрутки за допомогою overflow: hiddenта рендерінгу смуг прокрутки на основі JavaScript або використання атрибутів смуги прокрутки з префіксом браузера. З scrollbar-colorіншого боку, ми можемо створити стиль смуги прокрутки відповідно до дизайну, не вдаючись до переробки функціональних можливостей браузера або використання префіксів постачальників.

.scrollable-element ( scrollbar-color: red yellow; )
Звільніть із користувацькими кольорами

scrollbar-colorтакож прийматиме значення darkі lightвідповідати уподобанням користувача, якщо він використовує щось на зразок темного режиму на Mac OSX.

.scrollable-element ( scrollbar-color: dark; )

Станом на березень 2019 року підтримка darkта lightзначення не доступні в жодному браузері. підтримується у Firefox. Детальніше див. Розділ підтримки браузера нижче.

Синтаксис

scrollbar-color: auto | dark | light | ;

Цінності

scrollbar-color приймає такі значення:

  • auto є значенням за замовчуванням і відображатиме стандартні кольори смуги прокрутки для агента користувача.
  • dark скаже користувацькому агенту використовувати темні смуги прокрутки, щоб відповідати поточній кольоровій схемі.
  • light скаже користувацькому агенту використовувати світліші смуги прокрутки, щоб відповідати поточній колірній схемі.
  • визначає два кольори, які використовуватимуться для смуги прокрутки. Перший колір - для "великого пальця" або рухомої частини смуги прокрутки, яка з'являється зверху. Другий колір - для "доріжки" або фіксованої частини смуги прокрутки.

Приклад

Це поєднує новий синтаксис специфікації та префікс WebKit.

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox IE Край Сафарі
91 * 87 11 88 * TP *

Мобільний / планшетний

Android Chrome Android Firefox Android iOS Safari
88 * Ні 81 * 14,0-14,4 *

Пов’язані

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Ресурси

  • Поточний стан стилів смуг прокрутки
  • Спеціальні смуги прокрутки у WebKit
  • Чернетка модуля смуг прокрутки CSSWG
  • Колекція випадків використання W3C для модифікації смуги прокрутки
  • Майбутнє CSS: смуги прокрутки на dev.to
  • Випуск хрому 891944