En las barras de desplazamiento clásicas de escritorio, una página larga reserva un margen interior, una página corta no, y navegar entre ellas desplaza el diseño hacia los lados. La propiedad hace la reserva explícita y estable.
html {
scrollbar-gutter: stable;
}
/* classic overlay scrollbars keep the same rendering;
the declaration is simply neutral there */Por qué el diseño salta hoy
- Una barra de desplazamiento clásica no superpone nada; Ocupa anchos reales, por lo que su apariencia redistribuye el contenido y desplaza un encabezado centrado.
- El desencadenante más común es un modal que oculta el desbordamiento del cuerpo y levanta la barra de desplazamiento, luego la vuelve a cerrar: dos temblores de diseño por diálogo.
- El diseño de un 'área de contenido' de ancho completo en el escritorio supone visualmente que no hay margen, luego resta uno; introducirlo con una sola pulsación de desplazamiento es el error que puedes detectar.
los ajustes
- estable: reserve el canal siempre, independientemente de que el contenido se desborde o no. Los diseños centrados permanecen quietos.
- Ambos bordes estables: reserve un carril reflejado también en el otro lado, para un verdadero centrado óptico de los diseños que lo necesitan.
- Las plataformas de barra de desplazamiento superpuestas (móviles, valores predeterminados de macOS modernos) no reservan espacio y la propiedad es gratuita allí.
Aplíquelo también al modo de bloqueo del cuerpo: establezca el canal en el objetivo de bloqueo para que la página no mida la barra de desplazamiento y luego vuelva a agregarlo. Tres palabras de CSS a cambio de todo un sitio de quietud, muy chulo por carácter.