Reflujo de la barra de desplazamiento | Programar Plus

Este es un pequeño consejo para desarrolladores en Mac que he escuchado varias veces, y lo repetiré: entra en Preferencias del sistema > General > Mostrar barras de desplazamiento y puesto a siempre. Esto no se trata de ti, se trata de la web. Mira, el problema es que sin esta configuración activada, nunca experimentarás cambios de diseño activados por la barra de desplazamiento, pero todos los demás con esta configuración lo harán. Dado que desea diseñar para no causar este tipo de bloqueo, debe usar esta configuración usted mismo.

Aquí está Stefan Judis demostrando que el uso de unidades de ventana gráfica puede ser una de las causas:

Hoy aprendí un pequeño hecho de CSS que no conocía. Las unidades de ventana gráfica no tienen en cuenta las barras de desplazamiento y pueden desencadenar desbordamientos fácilmente.

Encontrado en el @polypane blog: https://t.co/RpTnwzrYcA

Video alt: ejemplo que muestra que 100vw puede desencadenar desbordamientos. pic.twitter.com/JXakqV3Vna

— Stefan Judis (@stefanjudis) 22 de agosto de 2021

Ahí, 100vw provoca un desbordamiento horizontal, porque la barra de desplazamiento vertical ya estaba en juego, ocupando parte de ese espacio. Se siente increíblemente mal para mí de alguna manera, pero aquí estamos.

Stefan señala el artículo de Kilian Valkhof sobre cómo lidiar con esto. Las correcciones clásicas:

La solución fácil es usar width: 100% en lugar de. Los porcentajes no incluyen el ancho de la barra de desplazamiento, por lo que se ajustarán automáticamente.

Si no puede hacer eso, o está configurando el ancho en otro elemento, agregue overflow-x: hidden o overflow: hidden al elemento circundante para evitar la barra de desplazamiento.

Kilian Valkhof, “Cómo encontrar la causa de las barras de desplazamiento horizontales”

Esos son trucos, diría yo, ya que son cosas que no coinciden exactamente con lo que querías hacer.

Afortunadamente, hay una solución entrante basada en especificaciones. Bramus tiene la primicia:

Un efecto secundario al mostrar barras de desplazamiento en la web es que el diseño del contenido puede cambiar según el tipo de barra de desplazamiento. El scrollbar-gutter La propiedad CSS, que pronto se enviará con Chromium, tiene como objetivo darnos a los desarrolladores más control sobre eso.

Bramus Van Damme, “Evite los cambios de diseño no deseados causados ​​por las barras de desplazamiento con el scrollbar-gutter propiedad CSS”

Suena como el truco, y no me sorprendería si esto se convierte en una línea muy común en las hojas de estilo de reinicio:

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

Aunque eso me hace preguntarme… es el <body> cuando se trata de esto a nivel de página completa, ¿verdad? No la <html>? Eso ha sido extraño en el pasado con cosas relacionadas con el desplazamiento.

¿Realmente vamos a conseguirlo en todos los navegadores? Quién sabe. Parece algo probable, pero incluso si se acerca y el comportamiento está especificado, lo haría. Se siente amigable con la mejora progresiva.