Ширина на лентата за превъртане - 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, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

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 дискусия за контрол на ширината на лентата за превъртане