Menú ampliado

The CSS Podcast - 034: Overflow

Cuando el contenido se extiende más allá de su elemento superior, hay muchas opciones para controlarlo. Puedes desplazarte para agregar espacio adicional, recortar los bordes que desbordan, indicar el corte con puntos suspensivos y mucho más. El desbordamiento es especialmente importante cuando se desarrolla para aplicaciones de teléfonos y varios tamaños de pantalla.

En CSS, existen dos opciones de recorte diferentes: text-overflow te ayudará con las líneas de texto individuales, y las propiedades overflow te ayudarán a controlar el desbordamiento en el modelo de caja.

Desbordamiento de una sola línea con text-overflow

Usa la propiedad text-overflow en cualquier elemento que contenga nodos de texto, por ejemplo, un párrafo, <p>. Especifica cómo aparece el texto cuando no cabe en el espacio disponible del elemento. Todo el texto HTML visible en una página se encuentra en nodos de texto. Para usar text-overflow, necesitas una sola línea de texto sin ajustar, por lo que también debes establecer overflow en hidden y tener un valor de white-space que impida el ajuste.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Uso de propiedades de desbordamiento

Las propiedades de desbordamiento se establecen en un elemento para controlar lo que sucede cuando sus elementos secundarios necesitan más espacio del que tiene disponible. Esto puede ser intencional, como en un mapa interactivo como Google Maps, en el que un usuario se desplaza lateralmente por una imagen grande recortada a un tamaño específico. También puede ser involuntario, como en una aplicación de chat en la que el usuario escribe un mensaje extenso que no cabe en la burbuja de texto.

Puedes pensar en el desbordamiento en dos partes. El elemento principal tiene un espacio firmemente restringido que no cambiará. Puedes pensar en esto como una ventana. Los elementos secundarios son contenido que necesita más espacio del elemento principal. Puedes pensar en esto como lo que ves a través de la ventana. Administrar el desbordamiento ayudará a guiar cómo la ventana enmarca este contenido.

Desplazamiento en el eje vertical y horizontal

La propiedad overflow-y controla el desbordamiento físico a lo largo del eje vertical del viewport del dispositivo, por lo que se desplaza hacia arriba y hacia abajo.

La propiedad overflow-x controla el desbordamiento a lo largo del eje horizontal de la ventana gráfica del dispositivo, por lo que se desplaza hacia la izquierda y la derecha.

Propiedades lógicas para la dirección de desplazamiento

Las propiedades overflow-inline y overflow-block establecen el desbordamiento según la dirección del documento y el modo de escritura.

La abreviatura overflow

La abreviatura overflow establece los estilos overflow-x y overflow-y en una sola línea:

overflow: hidden scroll;

Si se especifican dos palabras clave, la primera se aplica a overflow-x y la segunda a overflow-y. De lo contrario, tanto overflow-x como overflow-y usan el mismo valor.

Valores

Analiza con más detalle los valores y las palabras clave disponibles para las propiedades de overflow.

overflow: visible (predeterminada)

Sin configurar la propiedad, overflow: visible es el valor predeterminado para la Web. Esto garantiza que el contenido nunca se oculte de forma involuntaria y sigue los principios fundamentales de "nunca ocultar contenido" o "diseños seguros de diseños precisos".

overflow: hidden

Con overflow: hidden, el contenido se recorta en la dirección especificada y no se proporcionan barras de desplazamiento para mostrarlo.

overflow: scroll

overflow: scroll habilita las barras de desplazamiento para permitir que los usuarios se desplacen por el contenido. Incluso si el contenido no se desborda, aparecerán barras de desplazamiento. Esta es una excelente manera de reducir el cambio de diseño futuro si un contenedor puede desplazarse en el futuro, por ejemplo, en función del cambio de tamaño, y preparar visualmente al usuario para las áreas desplazables.

overflow: clip

Al igual que overflow: hidden, el contenido con overflow: clip se recorta en el cuadro de relleno del elemento. La diferencia entre clip y hidden es que la palabra clave clip también prohíbe todo el desplazamiento, incluido el desplazamiento programático.

overflow: auto

Por último, el valor que se usa con mayor frecuencia, overflow: auto. Esto respeta las preferencias del usuario y muestra las barras de desplazamiento si es necesario, pero las oculta de forma predeterminada y le otorga la responsabilidad del desplazamiento al usuario y al navegador.

Desplazamiento y desbordamiento

Muchos de estos comportamientos de overflow introducen una barra de desplazamiento, pero hay algunos comportamientos y propiedades de desplazamiento específicos que pueden ayudarte a controlar el desplazamiento en tu contenedor de desbordamiento.

Desplazamiento y accesibilidad

Es importante asegurarse de que el área desplazable pueda aceptar el enfoque para que un usuario del teclado pueda presionar la tecla Tab hasta el cuadro y, luego, usar las teclas de flecha para desplazarse.

Para permitir que un cuadro de desplazamiento acepte el enfoque, agrega tabindex="0", un nombre con el atributo aria-labelledby y un atributo role adecuado. Por ejemplo:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

Luego, se puede usar CSS para indicar que la caja tiene el enfoque, con la propiedad outline para dar una pista visual de que ahora se podrá desplazar.

En Using CSS to Enforce Accessibility, Adrian Roselli demuestra cómo CSS puede ayudar a evitar regresiones de accesibilidad. Por ejemplo, para activar el desplazamiento y agregar el indicador de enfoque solo si se usan los atributos correctos. Las siguientes reglas solo harán que la caja se pueda desplazar si tiene un atributo tabindex, aria-labelledby y role.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Posicionamiento de la barra de desplazamiento dentro del modelo de caja

Las barras de desplazamiento ocupan espacio dentro del cuadro de relleno y pueden competir por espacio si inline y no overlaid. El módulo del modelo de caja explica con más detalle esta posible fuente de cambio de diseño.

root-scroller versus implicit-scroller

Es posible que notes que algunos desplazadores tienen un comportamiento de "tirar para actualizar" y otros comportamientos especiales, en especial cuando desarrollas aplicaciones híbridas y para dispositivos móviles. Este comportamiento de desplazamiento se produce en el elemento desplazable raíz. Solo hay un elemento de desplazamiento raíz en una página. De forma predeterminada, documentElement es el elemento de desplazamiento raíz de la página. Sin embargo, si se cambia el elemento que es el elemento de desplazamiento raíz, los comportamientos especiales se pueden aplicar a elementos de desplazamiento que no sean documentElement. A este nuevo elemento de desplazamiento lo llamamos elemento de desplazamiento raíz implícito.

Para crear un elemento desplazable raíz, puedes usar algo llamado promoción del elemento desplazable. Para ello, posiciona un contenedor como fijo, asegúrate de que cubra todo el viewport y que tenga un índice Z en la parte superior con un elemento desplazable. Experimenta un desplazador raíz en comparación con un desplazador implícito anidado aquí.

Cómo aplicar estilo a la barra de desplazamiento

Puedes darle un estilo a la barra de desplazamiento para incorporarla al diseño de tu sitio. scrollbar-color establece el color del pulgar y el canal de la barra de desplazamiento.

Para cambiar el ancho de la barra de desplazamiento, usa scrollbar-width. No puedes establecer una longitud arbitraria, pero puedes especificar que deseas una barra de desplazamiento thin o none.

scroll-behavior

scroll-behavior te permite habilitar el desplazamiento controlado por el navegador hacia los elementos. Esto te permite especificar cómo se controla la navegación en la página, como .scrollTo() o los vínculos.

Esto es especialmente útil cuando se usa con prefers-reduced-motion para especificar el comportamiento de desplazamiento según la preferencia del usuario.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Si alguna vez llegaste al final de una superposición modal, seguiste desplazándote y la página detrás de la superposición se movió, esto es el encadenamiento de desplazamiento o la propagación al contenedor de desplazamiento principal. La propiedad overscroll-behavior te permite evitar que el desplazamiento por desbordamiento se filtre en un contenedor principal (lo que se denomina encadenamiento de desplazamiento).

Ajuste de desplazamiento

Por lo general, el desplazamiento es fluido, lo que te permite colocar el contenido dentro del scrollport donde quieras. En algunos diseños, como galerías de imágenes o contenido que emula páginas o diapositivas, es posible que desees que el contenido se ajuste al viewport de desplazamiento.

Cómo configurar el contenedor de desplazamiento

Para habilitar el ajuste de desplazamiento, agrega scroll-snap-type al contenedor de desplazamiento. Primero, definirás en qué eje se producirá el ajuste de desplazamiento. Puede ser una propiedad lógica (block o inline), una propiedad física (x o y) o both.

También puedes definir qué tan estricto debe ser el ajuste de desplazamiento. El valor predeterminado de la rigidez es proximity, lo que significa que el contenedor de desplazamiento intentará ajustarse si es posible. También puedes establecer la rigidez en mandatory para asegurarte de que el contenedor de desplazamiento siempre se ajuste.

.scroll-container {
    scroll-snap-type: block mandatory;
}

El ajuste de desplazamiento alinea un elemento dentro de los límites completos del contenedor de desplazamiento, pero ¿qué sucede si no se ve parte del contenedor de desplazamiento? Por ejemplo, es posible que tengas un encabezado fijo que se superponga a parte del contenedor de desplazamiento. Para ayudar a alinear los elementos ajustados a la porción visible del contenedor de desplazamiento, puedes establecer scroll-padding.

Cómo controlar los elementos que se pueden ajustar

Para que un elemento se ajuste, establece la propiedad scroll-snap-align en start, end o center. Si la dirección de ajuste de desplazamiento es both, puedes establecer dos valores. Establece si un borde del elemento se alineará con el borde del viewport de desplazamiento o si se centrará.

Puedes ajustar el espaciado alrededor de los bordes del elemento ajustado con scroll-margin:

scroll-margin también se usa para establecer el padding cuando se desplaza a un elemento:

Para que el desplazamiento sea más pegadizo, puedes agregar scroll-snap-stop: always a un elemento de un contenedor de desplazamiento. No te impide desplazarte más allá de varios elementos en un solo desplazamiento. Si finalizas un movimiento de desplazamiento de manera que el desplazamiento continúe con inercia, el desplazamiento finalizará en la siguiente posición de ajuste, en lugar de continuar.

Verifica tus conocimientos

Recursos

Overflow And Data Loss In CSS de Smashing Magazine