Kerimisriba laius - CSS-trikid

Anonim

scrollbar-widthVara CSS kontrollib laius või "paksus" on kerimisriba. scrollbar-widthon osa CSS-i töörühma kerimisribade 1. mooduli mustandist, mis on veel pooleli. Selle artikli kirjutamise ajal on konsensus selline, mis scrollbar-widthtõenäoliselt lisatakse CSS-i tulevastesse versioonidesse, kuid vaieldakse selle üle, kas muutuja argument on lubatud või kas valikud piirduvad eelseadistatud väärtustega (rohkem neist hiljem) .

Kerimisriba laiuse reguleerimine on eriti oluline piiratud ruumi lehtedel või kasutajaliideses, kus vaid mõne piksli kerimisribalt kärpimine (või selle täielik eemaldamine) võib anda sisule piisavalt ruumi hingamiseks, ilma et oleks võimalik kerida.

Näiteks kujutage ette teksti redigeerimise liidest, kus vajadused peavad mahtuma lühikesesse kitsasse konteinerisse. Sellises olukorras võib kerimisriba võtta palju vaba ruumi:

koos scrollbar-width: auto;

Rakenduse abil scrollbar-widthsaame thinruumi säästmiseks laiuseks seada :

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

Või võime selle laiuse nonetäielikult eemaldamiseks seadistada , säästes veelgi rohkem ruumi (eeldades, et kerimisriba kadumisega on kõik korras):

.scrollable-element ( scrollbar-width: none; )
textareakoos scrollbar-width: none;- ja saate ikkagi kerida!

Süntaks

scrollbar-width: auto | thin | none | ;

Väärtused

scrollbar-width aktsepteerib järgmisi väärtusi:

  • auto on vaikeväärtus ja renderdab kasutajaagendi standardsed kerimisribad.
  • thin käsib kasutajaagendil kasutada õhemaid kerimisribasid, kui see on asjakohane.
  • none peidab kerimisriba täielikult, ilma et see mõjutaks elemendi keritavust.
  • arutatakse, kuid (kui lisatakse) oleks kerimisriba maksimaalne laius.

Näide

Brauseri tugi

See on kerimisribade üldiseks kohandatavuseks. Parima panuse saamiseks kerimisriba ristbrauseri kujundamiseks vaadake siit.

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

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

Mobiil / tahvelarvuti

Android Chrome Android Firefox Android iOS-i Safari
88 * Ei 81 * 14,0–14,4 *

Seotud

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Ressursid

  • CSSWG kerimisribade mooduli mustand
  • Kerimisriba muutmiseks kasutatavate juhtumite kogum W3C
  • CSS-i tulevik: kerimisribad saidil dev.to
  • w3c Githubi arutelu kerimisriba laiuse juhtimisel