Görgetősáv-szélesség - CSS-trükkök

Anonim

A scrollbar-widthCSS tulajdonság a gördítősáv szélességét vagy „vastagságát” szabályozza. scrollbar-widthrésze a CSS munkacsoport Scrollbars Module 1 szintű tervezetének, amely még folyamatban van. A cikk megírásakor a konszenzus az, hogy scrollbar-widthvalószínűleg bekerül a CSS jövőbeli verzióiba, de vita folyik arról, hogy egy változó argumentum megengedett-e, vagy az opciók csak az előre beállított értékekre korlátozódnak (ezekről később) .

A gördítősáv szélességének beállítása különösen fontos a korlátozott helyű oldalakon vagy felhasználói felületeken, ahol csak néhány képpont levágása a gördítősávról (vagy teljes eltávolítása) elegendő teret enged a tartalomnak a lélegzéshez, anélkül, hogy eltávolítaná a görgetés képességét.

Példaként képzeljünk el egy szövegszerkesztő felületet, ahol egy rövid, keskeny tárolóba kell illeszkedni. Ilyen helyzetben a gördítősáv elfoglalhatja a rendelkezésre álló hely nagy részét:

val vel scrollbar-width: auto;

Ezzel scrollbar-widthbeállíthatjuk a szélességet a thinhelytakarékosság érdekében:

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

Vagy beállíthatjuk a szélességet a noneteljes eltávolításra, még több helyet megtakarítva (feltéve, hogy a gördítősáv eltűnik)

.scrollable-element ( scrollbar-width: none; )
textareaA scrollbar-width: none;- és akkor is lépjünk!

Szintaxis

scrollbar-width: auto | thin | none | ;

Értékek

scrollbar-width a következő értékeket fogadja el:

  • auto az alapértelmezett érték, és a szokásos gördítősávokat jeleníti meg a felhasználói ügynök számára.
  • thin meg fogja mondani a felhasználói ügynöknek, hogy használjon vékonyabb gördítősávokat, ha alkalmazható.
  • none teljesen elrejti a gördítősávot, anélkül, hogy befolyásolná az elem görgethetőségét.
  • vita tárgyát képezi, de (ha hozzáadódik) a gördítősáv maximális szélessége lenne.

Példa

Böngésző támogatás

Ez a gördítősávok általános testreszabhatóságát szolgálja. A gördítősávon átívelő böngésző legjobb fogadásához lásd itt.

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
91 * 87 11. 88 * TP *

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 * Nem 81 * 14,0–14,4 *

Összefüggő

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Erőforrások

  • CSSWG gördítősávok vázlata
  • W3C felhasználási esetek gyűjteménye a gördítősáv módosításához
  • A CSS jövője: Gördítősávok a dev.to oldalon
  • w3c Github beszélgetés a gördítősáv szélességének szabályozásáról