CSS scrollbar-width — товщина смуги прокрутки

CSS властивість scrollbar-width задає товщину смуги прокрутки: звичайна, тонка чи жодної.

правити

Загальний опис

Три значення: auto (системна), thin (тонка — для компактних бічних панелей і чатів) і none — смуги не видно, але блок лишається прокручуваним колесом, свайпом, клавішами.

none — спокуслива, але двосічна річ: разом зі смугою зникає єдина видима підказка, що вміст узагалі прокручується, і користувач може так і не дізнатись про решту вмісту. Ховати смугу варто лише там, де прокрутку видно з самого вмісту — каруселі, стрічки з обрізаним останнім елементом.

Піксельних значень немає навмисно — лише ці три слова.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	121	64	18.2	107	121	—

Підтримка: мобільні переглядачі

Переглядач
	—	121	64	18.2

Приклади

+ запропонувати свій приклад у пісочниці

<div class="chat">
    <p>Повідомлення 1</p><p>Повідомлення 2</p><p>Повідомлення 3</p><p>Повідомлення 4</p>
</div>

.chat {
    height: 120px;
    overflow-y: auto;
    border: 1px solid #ccc;
    scrollbar-width: thin;
}