Slinkties juostos plotis - CSS-gudrybės

Anonim

scrollbar-widthCSS nuosavybė kontroliuoja plotį arba "storį" iš slinkties. scrollbar-widthyra CSS darbo grupės 1 lygio slinkties juostų modulio dalis, kuri vis dar vykdoma. Rašant šį straipsnį sutarimas yra tas, kad scrollbar-widthgreičiausiai jis bus įtrauktas į būsimas CSS versijas, tačiau diskutuojama, ar kintamasis argumentas bus leidžiamas, ar galimybės bus apribotos iš anksto nustatytomis reikšmėmis (daugiau apie jas vėliau) .

Slinkties juostos pločio reguliavimas yra ypač svarbus puslapiuose ar vartotojo sąsajose, kuriose yra ribota erdvė, kur apkirpus tik keletą pikselių nuo slinkties juostos (arba visiškai ją pašalinus), turinys gali būti pakankamai kvėpuojamas, nepašalinant galimybės slinkti.

Pavyzdžiui, įsivaizduokite teksto redagavimo sąsają, kurioje poreikiai turi tilpti į trumpą, siaurą konteinerį. Esant tokiai situacijai, slinkties juosta gali užimti daug vietos:

su scrollbar-width: auto;

Jei norite sutaupyti vietos scrollbar-width, galime nustatyti plotį thin:

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

Arba galime nustatyti plotį, nonekad jį visiškai pašalintume, sutaupydami dar daugiau vietos (darant prielaidą, kad mums gerai, kai išnyksta slinkties juosta):

.scrollable-element ( scrollbar-width: none; )
textareasu scrollbar-width: none;- ir jūs vis tiek galite slinkti!

Sintaksė

scrollbar-width: auto | thin | none | ;

Vertybės

scrollbar-width priima šias vertes:

  • auto yra numatytoji vertė ir pateiks standartines vartotojo agento slinkties juostas.
  • thin lieps vartotojo agentui naudoti plonesnes slinkties juostas, kai taikoma.
  • none visiškai paslėps slinkties juostą, nepažeisdamas elemento slinkties.
  • diskutuojama, bet (jei bus pridėta) būtų maksimalus slinkties juostos plotis.

Pavyzdys

Naršyklės palaikymas

Tai skirta visam slinkties juostų pritaikymui. Norėdami geriausiai suformuoti slinkties juostos kryžminę naršyklę, žiūrėkite čia.

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
91 * 87 11 88 * TP *

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 * Ne 81 * 14,0–14,4 *

Susijęs

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Ištekliai

  • CSSWG slinkties juostų modulio projektas
  • W3C naudojimo atvejų, skirtų slinkties juostai modifikuoti, rinkinys
  • CSS ateitis: slinkties juostos „dev.to“
  • w3c „Github“ diskusija apie slinkties juostos pločio valdymą