Rullepanelbredde - CSS-tricks

Anonim

Den scrollbar-widthejendom i CSS styrer bredden eller ”tykkelse” af et rullepanel. scrollbar-widther en del af CSS-arbejdsgruppens Scrollbars Module Level 1-udkast, som stadig er i gang. Konsensus på tidspunktet for skrivningen af ​​denne artikel er, at scrollbar-widthdet sandsynligvis vil blive inkluderet i fremtidige versioner af CSS, men der er debat om, hvorvidt et variabelt argument vil være tilladt, eller om mulighederne vil være begrænset til forudindstillede værdier (mere om dem senere) .

Det er især vigtigt at justere bredden på rullebjælken på sider eller brugergrænseflader med begrænset plads, hvor beskæring af få pixels fra rullebjælken (eller helt fjernes) kan give indholdet plads nok til at trække vejret uden at fjerne muligheden for at rulle.

Forestil dig et eksempel et tekstredigeringsgrænseflade, hvor behovene skal passe i en kort, smal beholder. I en sådan situation kan rullepanelet tage meget af den ledige plads:

med scrollbar-width: auto;

Med scrollbar-widthkan vi indstille bredden til thinat spare plads:

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

Eller vi kan indstille bredden til noneat fjerne den helt og spare endnu mere plads (forudsat at vi er i orden med rullepanelet forsvinder):

.scrollable-element ( scrollbar-width: none; )
textareamed scrollbar-width: none;- og du kan stadig rulle!

Syntaks

scrollbar-width: auto | thin | none | ;

Værdier

scrollbar-width accepterer følgende værdier:

  • auto er standardværdien og gengiver standardrullepaneler til brugeragenten.
  • thin vil bede brugeragenten om at bruge tyndere rullepaneler, når det er relevant.
  • none vil skjule rullepanelet helt uden at påvirke elementets rulleevne.
  • diskuteres, men (hvis tilføjet) ville være en maksimal bredde på rullepanelet.

Eksempel

Browsersupport

Dette er for generel tilpasning af rullebjælker. Se her for at få din bedste mulighed for at style en rullepanel på tværs af browseren.

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

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

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 * Ingen 81 * 14,0-14,4 *

Relaterede

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Ressourcer

  • CSSWG rullebjælker Moduludkast
  • W3C samling af brugssager til rullebjælkeændring
  • Fremtiden for CSS: Rullepaneler på dev.to
  • w3c Github diskussion om rullepanel bredde kontrol