Ширина полосы прокрутки - CSS-хитрости

Anonim

scrollbar-widthСвойство в CSS контролирует ширину или «толщину» прокрутки. scrollbar-widthявляется частью проекта уровня 1 модуля полос прокрутки рабочей группы CSS, работа над которым все еще продолжается. На момент написания этой статьи консенсус 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, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром Fire Fox 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 Scrollbars
  • Коллекция W3C вариантов использования для модификации полосы прокрутки
  • Будущее CSS: полосы прокрутки на dev.to
  • w3c обсуждение на Github управления шириной полосы прокрутки