In un interfaccia, dove bisogna mostrare del testo in uno spazio limitato, le scrollbar sono sia una salvezza che una penitenza.

Sono elementi che l'utente riconosce, vi sa interagire e comprende che se è presente una scrollbar, allora del contenuto è nascosto e sta a lui muovere il cursore. Dall'altro lato, per gli sviluppatori, sono elementi alquanto ostici: se il testo risulta breve il layout rimarrà costante, se invece la lunghezza del testo è nell'intorno del punto di attivazione potremmo avere un effetto di push necessario per l'inserimento della scrollbar.

L'esempio che ci permetterà di mostrare questo effetto è anche il caso d'uso principale: il resize di una pagina contenente molto testo. Nel momento in cui la viewport sarà troppo piccola per contenere tutte le parole, apparirà una scrollbar per permettere all'utente di leggere dalla prima all'ultima riga.

La soluzione è in una sola proprietà

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

La proprietà scrollbar-gutter permette di riservare lo spazio che verrà occupato nel momento in cui la scrollbar apparirà. In questo modo il layout del testo rimarrà costante a qualunque dimensione e a qualunque lunghezza. Il valore both-edges permette di riservare la stessa quantità di spazio anche dal lato opposto della scrollbar, in modo che il testo risulti centrato nel contenitore.