Ritjoslas platums - CSS-triki

Anonim

scrollbar-widthĪpašums CSS kontrolē platumu vai "biezumu" no ritjoslas. scrollbar-widthir 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-widthvisticamā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, thinlai ietaupītu vietu:

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

Vai arī mēs varam iestatīt platumu tā, nonelai 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; )
textareaar 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