¿Cómo usarías scrollbar-gutter para evitar el desplazamiento de diseño (layout shift) inducido por la barra de desplazamiento?

Pregunta y escenario

La página utiliza overflow: auto: antes de la interacción no hay desbordamiento, luego aparece una barra de desplazamiento clásica. Como esta consume espacio en línea (inline space), el contenido centrado se mueve. Explica el diseño de CSS, sus límites, el comportamiento de fallback y la validación medible.

Qué evalúa el entrevistador

• Si sabes que scrollbar-gutter se aplica a una caja de desplazamiento y no se hereda.
• Si puedes distinguir entre barras de desplazamiento clásicas y superpuestas (overlay) y explicar stable frente a both-edges.
• Si comprendes la diferencia de alcance entre la raíz, body y los scrollers anidados.
• Si el plan cubre el bloqueo de modales, RTL, navegadores más antiguos y el monitoreo de CLS.

Preguntas aclaratorias para hacer primero

Confirma si el salto ocurre en el viewport o en un scroller interno, si el sistema operativo utiliza barras de desplazamiento superpuestas (overlay), si se requiere RTL, cómo bloquea el modal el desplazamiento de la página y qué navegadores y objetivos de accesibilidad importan. Pregunta si el diseño debe permanecer geométricamente centrado o solo evitar un movimiento unilateral cuando comience el desbordamiento.

Un marco de respuesta de 30 segundos

Pondría scrollbar-gutter: stable en la caja de desplazamiento real para que el espacio de la barra de desplazamiento clásica exista antes y después del desbordamiento; usaría stable both-edges cuando el centrado simétrico sea importante. Configura la raíz para el desplazamiento del viewport y cada panel interno para su propio desplazamiento. Las barras de desplazamiento superpuestas (overlay) generalmente no consumen espacio de diseño, por lo que no hay un ancho fijo que reservar. Mantén explícitos el bloqueo de modales, RTL y los fallbacks heredados, y luego valida con instrumentación de cambios de diseño (layout-shift) y una matriz de dispositivos reales.

Análisis detallado paso a paso

1. Identifica la caja de desplazamiento. La raíz controla el desplazamiento del viewport; una declaración body no sustituye el comportamiento de la raíz. Un panel que se desplaza de forma independiente necesita su propia declaración.
2. Elige el valor. stable reserva espacio en línea para una barra de desplazamiento clásica; both-edges agrega un margen equivalente en el borde opuesto para preservar el centrado geométrico.
3. Entiende las barras superpuestas (overlays). Una barra de desplazamiento superpuesta se sitúa sobre el contenido y normalmente no consume espacio de diseño. El agente de usuario y el sistema operativo eligen el modo; CSS no puede forzar una barra de desplazamiento clásica.
4. Coordina el modal. Utiliza una máquina de estados para bloquear y restaurar el desplazamiento de la página. Evita agregar padding-right incondicional sobre un margen ya reservado por el navegador. Configura el scroller interno de un modal por separado.
5. Cubre la compatibilidad y RTL. Usa bordes en línea lógicos en navegadores modernos, mantén un fallback mínimo para entornos más antiguos y prueba la dirección, el lado de la barra de desplazamiento y las áreas seguras.
6. Mide el resultado. Registra entradas de rendimiento layout-shift, distingue los cambios antes y después de la interacción del usuario y combina pruebas de laboratorio para listas largas, modales y redes lentas con datos de campo p75. Un buen objetivo de CLS es p75 igual o inferior a 0.1.

Respuesta de muestra de alta calidad

Lo declararía en las cajas que realmente se desplazan:

html {
  scrollbar-gutter: stable both-edges;
}

.results-pane {
  overflow: auto;
  scrollbar-gutter: stable;
}

stable mantiene presente el espacio de la barra de desplazamiento clásica sin desbordamiento; both-edges mantiene simétrico un diseño centrado en el viewport. Si el sistema utiliza barras de desplazamiento superpuestas, estas ya no consumen espacio de diseño, por lo que no prometería una reserva fija de píxeles. Al abrir un modal, no agregaría incondicionalmente otra compensación de ancho de barra de desplazamiento; la máquina de estados de bloqueo y la política de margen deben coincidir, mientras que el scroller interno del modal se configura de forma independiente.

Verificaría la raíz frente a body, scrollers anidados, RTL, restauración después de cerrar, fallback para navegadores más antiguos y preferencias de movimiento reducido. Recopilaría entradas layout-shift y CLS de campo en p75, apuntando a un CLS p75 igual o inferior a 0.1. MDN y la especificación de W3C definen la semántica de la propiedad; web.dev proporciona el modelo de medición de CLS.

Errores comunes

• Colocar scrollbar-gutter en un contenedor padre común sin verificar qué elemento realmente se desplaza.
• Asumir que una declaración body controla necesariamente el viewport e ignorar el comportamiento de la raíz.
• Prometer una reserva fija de píxeles para una barra de desplazamiento superpuesta.
• Habilitar stable al mismo tiempo que se agrega padding-right incondicional, creando un espacio doble cuando se abre un modal.
• Probar solo un sistema operativo y una captura de pantalla sin RTL, sin medir CLS ni paneles internos.

Preguntas de seguimiento y respuestas

¿Por qué usar both-edges?

stable unilateral reserva el borde en línea donde puede aparecer la barra de desplazamiento clásica. Si el contenido está centrado en el viewport, un margen igual en el borde opuesto preserva la simetría geométrica; aún así, se debe probar RTL y diferentes ubicaciones de la barra de desplazamiento.

¿Resuelve scrollbar-gutter todos los problemas de bloqueo de desplazamiento de modales?

No. Reserva espacio de diseño en la caja de desplazamiento; no implementa captura de foco (focus trapping), inertness de fondo, restauración de la posición de desplazamiento ni orden de apilamiento. Esas siguen siendo responsabilidades separadas, y el bloqueo no debe duplicar la compensación de ancho.

¿Cómo pruebas barras de desplazamiento superpuestas y clásicas?

Usa al menos un entorno con barra de desplazamiento clásica y un entorno con barra de desplazamiento superpuesta. Prueba sin desbordamiento, inicio de desbordamiento, apertura y cierre de modales, desplazamiento de paneles internos, RTL y zoom. Registra la geometría de los elementos clave y las entradas layout-shift en lugar de confiar únicamente en capturas de pantalla.