CSS приклад: scrollbar-track-color

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+

Коротка інформація

Значення за замовчуваннямЗалежить від браузера
УспадковуєтьсяНі
Процентний записНе застосовується
Застосовується<applet>, <body>, <embed>, <object>, <select>, <table>, <textarea> або до елементу, у якого overflow задано як scroll або auto.

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Встановлює колір основи смуги прокрутки. На рис. 1 червоним кольором виділена область, до якої застосовується значення scrollbar-track-color.

Синтаксис

scrollbar-track-color: <колір>

Значення

Див. колір

Приклад

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>scrollbar-track-color</title>
  <style>
   html, body { 
    scrollbar-arrow-color: #fff; /* Колір стрілок */
    scrollbar-base-color: #ffa12d; /* Колір смуги прокрутки */
    scrollbar-shadow-color: #fed189; /* Колір тіні */
    scrollbar-highlight-color: #fff; /* Колір світлих ділянок тіні */
    background: #fed189; /* Колір фону */
    height: 100%; 
   }
  </style>
 </head> 
 <body>
  <p>...</p>
 </body>
</html>

Результат цього прикладу показано на рис. 2.

Часті запитання

  • Q: Як використовувати scrollbar-track-color в CSS?

    A: scrollbar-track-color є частиною CSS Custom Properties for Cascading Variables Module Level 1 (CSS Variables) і використовується для визначення кольору фону треку прокрутки. Встановлюється за допомогою властивості --scrollbar-track-color.

  • Q: Де можна застосовувати scrollbar-track-color в CSS?

    A: scrollbar-track-color використовується для стилізації треку прокрутки в елементах з прокруткою, таких як div, textarea тощо.

  • Q: Як змінити колір треку прокрутки за допомогою scrollbar-track-color в CSS?

    A: Для зміни колору треку прокрутки використовують CSS властивість scrollbar-track-color та встановлюють нове значення кольору, наприклад, --scrollbar-track-color: blue;

  • Q: Чи підтримують усі браузери властивість scrollbar-track-color?

    A: Підтримка властивості scrollbar-track-color може відрізнятися в залежності від браузера. Рекомендується перевірити сумісність з різними браузерами або використовувати альтернативні методи стилізації прокрутки.

  • Q: Як визначити ширину або висоту треку прокрутки в CSS?

    A: Ширина або висота треку прокрутки визначається властивостями scrollbar-width або scrollbar-height, а не властивістю scrollbar-track-color.