Sur les barres de défilement classiques des ordinateurs de bureau, une longue page réserve une gouttière, une page courte non, et la navigation entre elles déplace votre mise en page latéralement. La propriété rend la réservation explicite et stable.
html {
scrollbar-gutter: stable;
}
/* classic overlay scrollbars keep the same rendering;
the declaration is simply neutral there */Pourquoi la mise en page saute aujourd'hui
- Une barre de défilement classique ne recouvre rien ; il occupe des largeurs réelles, donc son apparence redistribue le contenu et décale un en-tête centré.
- Le déclencheur le plus courant est un modal qui masque le débordement de corps et lève la barre de défilement, puis la remet en position fermée : deux tremblements de disposition par boîte de dialogue.
- La conception d'une « zone de contenu » sur toute la largeur sur le bureau ne suppose visuellement aucune gouttière, puis en soustrait une ; l’introduire en une seule pression de défilement est le bug que vous pouvez repérer.
Les paramètres
- stable : réservez toujours la gouttière, que le contenu déborde ou non. Les mises en page centrées restent en place.
- des deux bords stables : réservez également une voie en miroir de l'autre côté, pour un véritable centrage optique des conceptions qui en ont besoin.
- Les plates-formes de barre de défilement superposées (mobiles, paramètres par défaut de macOS modernes) ne réservent pas d'espace et la propriété y est gratuite.
Appliquez-le également au modal de verrouillage du corps : définissez la gouttière sur la cible de verrouillage afin que la page ne mesure pas la barre de défilement, puis rajoutez-la. Trois mots de CSS en échange de tout un site de tranquillité, très gacor par personnage.