Šírka posuvného pruhu - Triky CSS

Anonim

scrollbar-widthVlastnosť CSS riadi šírku alebo "hrúbku" v posuvníka. scrollbar-widthje súčasťou konceptu modulu posuvných modulov pracovnej úrovne CSS úrovne 1, ktorý stále nie je dokončený. V čase písania tohto článku panuje zhoda v tom, že scrollbar-widthje pravdepodobné, že bude zahrnutá do budúcich verzií CSS. Diskutuje sa však o tom, či bude povolený variabilný argument, alebo či budú možnosti obmedzené na prednastavené hodnoty (viac o nich neskôr). .

Úprava šírky posuvného pruhu je obzvlášť dôležitá na stránkach alebo používateľských rozhraniach s obmedzeným priestorom, kde orezanie iba niekoľkých pixelov od posuvného pruhu (alebo jeho úplné odstránenie) dá obsahu dostatočný priestor na dýchanie bez odstránenia možnosti rolovania.

Ako príklad si predstavte rozhranie na úpravu textu, kde sa potreby zmestia do krátkeho a úzkeho kontajnera. V takejto situácii môže posúvač zaberať väčšinu dostupného miesta:

s scrollbar-width: auto;

Pomocou scrollbar-widthmôžeme nastaviť šírku na, thinaby sme ušetrili miesto:

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

Alebo môžeme nastaviť šírku na, noneaby sme ju úplne odstránili, čo šetrí ešte viac miesta (za predpokladu, že sme v poriadku so zmiznutím posuvného pruhu):

.scrollable-element ( scrollbar-width: none; )
textareas scrollbar-width: none;- a stále môžete posúvať!

Syntax

scrollbar-width: auto | thin | none | ;

Hodnoty

scrollbar-width akceptuje nasledujúce hodnoty:

  • auto je predvolená hodnota a vykreslí štandardné posuvníky pre agenta používateľa.
  • thin povie užívateľskému agentovi, aby použil tenšie posuvníky, ak sú použiteľné.
  • none skryje posuvník úplne bez toho, aby to malo vplyv na rolovateľnosť prvku.
  • sa diskutuje, ale (ak by bola pridaná) by predstavovala maximálnu šírku posuvného pruhu.

Príklad

Podpora prehľadávača

To slúži na celkové prispôsobenie posuvných pruhov. Informácie o tom, ako najlepšie upraviť vzhľad posúvača v rôznych prehliadačoch, nájdete tu.

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
91 * 87 11 88 * TP *

Mobil / tablet

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

Súvisiace

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Zdroje

  • Návrh modulu CSSWG Scrollbars
  • Zbierka prípadov použitia W3C na úpravu posuvného pruhu
  • Budúcnosť CSS: Posuvníky na dev.to
  • Diskusia w3c Github o ovládaní šírky posuvného pruhu