`scrollbar-gutter` în CSS

Design Responsiv și Interfață Chrome 94, Firefox 97, Safari 18.2

Rezervă din start locul barei de derulare, ca layout-ul să nu sară lateral când bara apare sau dispare.

Sintaxă CSS

scrollbar-gutter: auto;
scrollbar-gutter: stable;
scrollbar-gutter: stable both-edges;

Ce face `scrollbar-gutter`

Pe Windows și Linux, bara de derulare clasică ocupă aproximativ 15 px din lățime. Când conținutul crește și bara apare, tot conținutul se îngustează și se mută puțin la stânga. scrollbar-gutter: stable păstrează mereu acel spațiu liber, cu sau fără bară.

Varianta stable both-edges rezervă același spațiu și pe partea opusă, ca un conținut centrat să rămână perfect simetric.

Proprietatea are efect doar pe elemente cu overflow hidden, scroll sau auto, și doar la barele clasice. Barele suprapuse (overlay), implicite pe macOS și pe telefoane, nu ocupă loc, deci acolo nu se schimbă nimic.

Valori uzuale

Valoare	Descriere
`auto`	Spațiul apare doar când există bară de derulare (valoarea implicită).
`stable`	Spațiul pentru bară este rezervat mereu.
`stable both-edges`	Spațiul este rezervat pe ambele laturi, pentru simetrie.

Exemple

Exemplul 1: Pagină care nu mai sare la deschiderea unei ferestre modale

La deschiderea modalului, pagina primește overflow: hidden, iar bara dispare.

html {
  scrollbar-gutter: stable;
}
html.modal-deschis {
  overflow: hidden;
}

Efect vizual în browser

Pe Windows, când apare fereastra „Confirmă comanda (349 lei)”, bara de derulare dispare, dar conținutul din spate rămâne exact pe loc, fără salt de 15 px spre dreapta.

Exemplul 2: Listă de notificări cu conținut centrat simetric

both-edges rezervă spațiu în ambele părți.

.panou-notificari {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  text-align: center;
}