Ширина смуги прокрутки - CSS-хитрощі

Anonim

scrollbar-widthВластивість в CSS контролює ширину або «товщину» прокрутки. scrollbar-widthє частиною проекту робочого колективу CSS модуля смуг прокрутки рівня 1, який все ще триває. Консенсус на момент написання цієї статті полягає у тому, що scrollbar-width, ймовірно, буде включено до майбутніх версій CSS, але є суперечки про те, чи буде дозволений аргумент змінної , чи параметри будуть обмежені попередньо встановленими значеннями (про це далі) .

Регулювання ширини смуги прокрутки особливо важливо на сторінках або в користувацьких інтерфейсах з обмеженим простором, де обрізання лише декількох пікселів від смуги прокрутки (або його взагалі видалення) може дати вмісту достатньо місця для вдиху, не усуваючи можливості прокрутки.

Наприклад, уявіть інтерфейс редагування тексту, де потреби повинні поміститися в короткий вузький контейнер. У такій ситуації смуга прокрутки може займати більшу частину доступного місця:

з scrollbar-width: auto;

За допомогою scrollbar-widthми можемо встановити ширину, thinщоб заощадити трохи місця:

.scrollable-element ( scrollbar-width: thin; )
textarea з scrollbar-width: thin;

Або ми можемо встановити ширину так, щоб noneповністю видалити її, заощадивши ще більше місця (якщо припустити, що з смугою прокрутки все в порядку)

.scrollable-element ( scrollbar-width: none; )
textareaза допомогою scrollbar-width: none;- і ви все ще можете прокручувати!

Синтаксис

scrollbar-width: auto | thin | none | ;

Цінності

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

  • auto - значення за замовчуванням і відображатиме стандартні смуги прокрутки для агента користувача.
  • thin вкаже користувацькому агенту використовувати тонші смуги прокрутки, якщо це можливо.
  • none повністю приховає смугу прокрутки, не впливаючи на прокручуваність елемента.
  • обговорюється, але (якщо його додати) буде максимальна ширина смуги прокрутки.

Приклад

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

Це для загальної настроюваності смуг прокрутки. Найкраще для вибору стилю прокрутки в крос-браузері дивіться тут.

Дані про підтримку веб-переглядача подані компанією 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-color
  • scrollbar

Ресурси

  • Чернетка модуля смуг прокрутки CSSWG
  • Колекція випадків використання W3C для модифікації смуги прокрутки
  • Майбутнє CSS: смуги прокрутки на dev.to
  • w3c Обговорення Github щодо управління шириною смуги прокрутки