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:
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:
autoaz 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.thinmeg fogja mondani a felhasználói ügynöknek, hogy használjon vékonyabb gördítősávokat, ha alkalmazható.noneteljesen 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-gutterscrollbar-colorscrollbar
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