Ширина клизача - ЦСС-трикови

Anonim

scrollbar-widthИмовина у ЦСС контролише ширину или "дебљину" једног померање. scrollbar-widthје део нацрта модула клизача нивоа 1 ЦСС радне групе, који је још увек у току. Консензус у време писања овог чланка је да scrollbar-widthће вероватно бити укључен у будуће верзије ЦСС-а, али постоји расправа да ли ће променљиви аргумент бити дозвољен или ће опције бити ограничене на унапред задате вредности (више о њима касније) .

Прилагођавање ширине клизача посебно је важно на страницама или у корисничком интерфејсу са ограниченим простором, где обрезивање само неколико пиксела са клизача (или његово потпуно уклањање) може садржају дати довољно простора за дах, без уклањања могућности померања.

За један пример, замислите интерфејс за уређивање текста где потребе треба да стану у кратки, уски контејнер. У таквој ситуацији клизач може заузети већи део расположивог простора:

са 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 ће у потпуности сакрити траку за померање, без утицаја на могућност померања елемента.
  • се расправља, али (ако се дода) била би максимална ширина клизача.

Пример

Подршка прегледача

Ово је за укупну прилагодљивост клизача. За најбољи улог у обликовању клизача на више прегледача погледајте овде.

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
91 * 87 11 88 * ТП *

Мобиле / Таблет

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 * Не 81 * 14,0-14,4 *

Повезан

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Ресурси

  • Нацрт модула ЦССВГ клизача
  • В3Ц колекција случајева употребе за модификацију клизача
  • Будућност ЦСС-а: Клизачи на развоју за
  • в3ц Гитхуб дискусија о контроли ширине клизача