Vierityspalkin leveys - CSS-temppuja

Anonim

scrollbar-widthOmaisuus CSS ohjaa leveys tai ”paksuus” vierityspalkki. scrollbar-widthon osa CSS-työryhmän vierityspalkkimoduulin tason 1 luonnosta, joka on edelleen kesken. Tämän artikkelin kirjoittamisen ajankohtana vallitsee yksimielisyys siitä, että scrollbar-widthse todennäköisesti sisällytetään CSS: n tuleviin versioihin, mutta keskustellaan siitä, sallitaanko muuttujan argumentti vai rajoitetaanko vaihtoehdot ennalta asetettuihin arvoihin (enemmän niistä myöhemmin) .

Vierityspalkin leveyden säätäminen on erityisen tärkeää sivuilla tai käyttöliittymissä, joissa on rajoitetusti tilaa, jolloin rajaamalla vain muutama pikseli pois vierityspalkista (tai poistamalla se kokonaan) voi antaa sisällölle riittävästi tilaa hengittää poistamatta mahdollisuutta vierittää.

Esimerkiksi, kuvittele tekstin muokkausliittymä, jossa tarpeet mahtuvat lyhyeen, kapeaan säilöön. Tällaisessa tilanteessa vierityspalkki voi viedä suuren osan käytettävissä olevasta tilasta:

kanssa scrollbar-width: auto;

Kanssa scrollbar-widthvoimme asettaa leveyden thintilan säästämiseksi:

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

Tai voimme asettaa leveyden nonepoistamaan sen kokonaan, mikä säästää vielä enemmän tilaa (olettaen, että olemme kunnossa vierityspalkin katoamisen jälkeen):

.scrollable-element ( scrollbar-width: none; )
textareakanssa scrollbar-width: none;- ja voit silti vierittää!

Syntaksi

scrollbar-width: auto | thin | none | ;

Arvot

scrollbar-width hyväksyy seuraavat arvot:

  • auto on oletusarvo ja tekee vakio vierityspalkit käyttäjäagentille.
  • thin kehottaa käyttäjäagenttia käyttämään tarvittaessa ohuempia vierityspalkkeja.
  • none piilottaa vierityspalkin kokonaan vaikuttamatta elementin vieritettävyyteen.
  • keskustellaan, mutta (jos lisätty) olisi vierityspalkin enimmäisleveys.

Esimerkki

Selaimen tuki

Tämä on vierityspalkkien yleinen muokattavuus. Saat parhaan vaihtoehdon vierityspalkin ristiselaimen muotoilusta tästä.

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
91 * 87 11 88 * TP *

Matkapuhelin / tabletti

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

Liittyvät

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Resurssit

  • CSSWG-vierityspalkkimoduulin luonnos
  • W3C-kokoelma käyttötapauksia vierityspalkin muokkaamiseen
  • CSS: n tulevaisuus: vierityspalkit dev.to: lle
  • w3c Github-keskustelu vierityspalkin leveyden ohjauksesta