Плъзгач-цвят - CSS-трикове

Anonim

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

Преди 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