Šířka posuvníku - Triky CSS

Anonim

scrollbar-widthVlastnost CSS řídí šířku nebo „tloušťku“ v posuvníku. scrollbar-widthje součástí konceptu Scrollbars Module úrovně 1 pracovní skupiny CSS, který stále probíhá. V době psaní tohoto článku scrollbar-widthpanuje shoda v tom, že je pravděpodobné, že bude zahrnuta v budoucích verzích CSS, ale debatuje se o tom, zda bude povolen variabilní argument, nebo zda budou možnosti omezeny na přednastavené hodnoty (více o nich později) .

Úprava šířky posuvníku je obzvláště důležitá na stránkách nebo uživatelských rozhraních s omezeným prostorem, kde oříznutí jen několika pixelů mimo posuvník (nebo jeho úplné odstranění) může dát obsahu dostatek prostoru k dechu, aniž by byla odstraněna možnost posouvání.

U jednoho příkladu si představte rozhraní pro úpravy textu, kde se potřeby vejdou do krátkého úzkého kontejneru. V takové situaci může posuvník zabírat většinu dostupného místa:

s scrollbar-width: auto;

Pomocí scrollbar-widthmůžeme nastavit šířku na, thinabychom ušetřili nějaké místo:

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

Nebo můžeme nastavit šířku tak, noneaby ji úplně odstranila, což šetří ještě více místa (za předpokladu, že jsme v pořádku se zmizením posuvníku):

.scrollable-element ( scrollbar-width: none; )
textareas scrollbar-width: none;- a stále můžete posouvat!

Syntax

scrollbar-width: auto | thin | none | ;

Hodnoty

scrollbar-width přijímá následující hodnoty:

  • auto je výchozí hodnota a vykreslí standardní posuvníky pro agenta uživatele.
  • thin řekne uživatelskému agentovi, aby použil tenčí posuvníky, pokud je to možné.
  • none skryje posuvník úplně, aniž by to ovlivnilo posouvatelnost prvku.
  • je diskutován, ale (pokud je přidán) by byla maximální šířka posuvníku.

Příklad

Podpora prohlížeče

To je pro celkovou přizpůsobitelnost posuvníků. Chcete-li svůj nejlepší styl sázení upravit pomocí posuvného pruhu, přejděte zde.

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
91 * 87 11 88 * TP *

Mobilní / Tablet

Android Chrome Android Firefox Android iOS Safari
88 * Ne 81 * 14,0-14,4 *

Příbuzný

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Zdroje

  • Návrh modulu CSSWG Scrollbars
  • Sbírka případů použití W3C pro úpravy posuvného pruhu
  • Budoucnost CSS: posuvníky na dev.to
  • Diskuse w3c Github o ovládání šířky posuvníku