scrollbar-width
Īpašums CSS kontrolē platumu vai "biezumu" no ritjoslas. scrollbar-width
ir daļa no CSS darba grupas Ritjoslu moduļa 1. līmeņa projekta, kas joprojām tiek turpināts. Šī raksta tapšanas laikā vienprātība ir tāda, kas, scrollbar-width
visticamāk, tiks iekļauta nākamajās CSS versijās, taču notiek diskusijas par to, vai mainīgais arguments būs atļauts, vai arī iespējas būs ierobežotas ar iepriekš iestatītām vērtībām (vairāk par tām vēlāk) .
Ritjoslas platuma pielāgošana ir īpaši svarīga lapās vai lietotāja saskarnēs ar ierobežotu vietu, kur, apgriežot tikai dažus pikseļus no ritjoslas (vai pilnībā to noņemot), saturs var dot pietiekami daudz vietas, lai to elpotu, nenoņemot iespēju ritināt.
Piemēram, iedomājieties teksta rediģēšanas saskarni, kurā vajadzības jāiekļauj īsā, šaurā konteinerā. Šādā situācijā ritjosla var aizņemt lielu daļu no pieejamās vietas:


ar scrollbar-width: auto;
Izmantojot scrollbar-width
, mēs varam iestatīt platumu, thin
lai ietaupītu vietu:
.scrollable-element ( scrollbar-width: thin; )


textarea
ar scrollbar-width: thin;
Vai arī mēs varam iestatīt platumu tā, none
lai to pilnībā noņemtu, ietaupot vēl vairāk vietas (pieņemot, ka mums ir labi, ja ritināšanas josla pazūd):
.scrollable-element ( scrollbar-width: none; )


textarea
ar scrollbar-width: none;
- un jūs joprojām varat ritināt!
Sintakse
scrollbar-width: auto | thin | none | ;
Vērtības
scrollbar-width
pieņem šādas vērtības:
auto
ir noklusējuma vērtība, un lietotāja aģentam tiks atveidotas standarta ritjoslas.thin
liks lietotāja aģentam vajadzības gadījumā izmantot plānākas ritjoslas.none
pilnībā slēps ritjoslu, neietekmējot elementa ritināšanu.tiek apspriests, bet (ja tiks pievienots) tas būtu maksimālais ritjoslas platums.
Piemērs
Pārlūka atbalsts
Tas ir paredzēts ritināšanas joslu vispārējai pielāgošanai. Lai vislabāk izmantotu ritjoslas šķērso pārlūku, skatiet šeit.
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
Chrome | Firefox | IE | Mala | Safari |
---|---|---|---|---|
91 * | 87 | 11 | 88 * | TP * |
Mobilais / planšetdators
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 * | Nē | 81 * | 14,0–14,4 * |
Saistīts
scrollbar-gutter
scrollbar-color
scrollbar
Resursi
- CSSWG ritjoslu moduļa melnraksts
- W3C lietošanas gadījumu kolekcija ritjoslas modifikācijai
- CSS nākotne: ritjoslas vietnē dev.to
- w3c Github diskusija par ritjoslas platuma kontroli