Propiedad CSS overflow-y: guía completa, valores y trucos

Hem » Python » Propiedad CSS overflow-y: guía completa, valores y trucos

Controlar cómo se comporta el contenido cuando se sale del contenedor es clave para un diseño web limpio y användbar; en ese terreno, overflow-y en CSS manda sobre el desbordamiento vertical, decidiendo si recortar, mostrar barras de desplazamiento o dejar que el contenido se asome fuera del cuadro.

Más allá de lo básico, hay matices que cambian por completo el resultado: ciertos valores aktiveras un nuevo contexto de formateo, algunos permiten desplazamiento con JavaScript y otros lo bloquean, y hasta hay efectos colaterales que pueden provocar que un contenedor pase a ser "scrollable" and ambos ejes si no se configura bien.

¿Qué es overflow-y y para qué sirve?

Egendomen överflöds-y indica al navegador qué hacer con el contenido que rebasa el elemento por su överlägsen och underlägsen. Cuando un bloque tiene más contenido del que cabe en su altura definida (o máxima), este ajuste besluta si el contenido se recorta, se hace desplazable o se deja synliga fuera del recuadro.

Conviene recordar su relación con su "hermana" horisontell: overflow-x controla los laterales izquierdo y derecho, mientras que overflow-y se centra en arriba y abajo. Y, por supuesto, la propiedad abreviada svämma över permite establecer ambos ejes a la vez con uno o dos valores.

Syntaxis och erkända värden

I sin mer direkta form, överflödig accepterar värdena dold, rulla, auto y synlig; desde especificaciones modernas también existe klipp. Puedes declararla así:

/* CSS */
selector {
  overflow-y: hidden | scroll | auto | visible | clip;
}

Om förkortningen används svämma över, kan gå ett eller två värden. Con un valor, se aplica a ambos ejes; con dos valores, el primero corresponde a överflödes-x (horisontellt) och den andra överflöds-y (vertikal):

/* Un solo valor, aplica a X e Y */
.container { overflow: auto; }

/* Dos valores: overflow-x overflow-y */
.panel { overflow: hidden auto; }

Significado detallado de cada valor

Es fácil quedarse en la superficie, men cada palabra clave encierra un comportamiento específico, y algunos incluyen reglas de accesibilidad y rendimiento importantes.

• synlig (värde per defekt): el contenido no se recorta y puede sobresalir más allá del área de padding del elemento. El elemento no se convierte en contenedor de desplazamiento; util si no quieres limitar el contenido, men puede provocar solapamientos con otros componentes.

• dolda: el contenido se recorta en el borde del padding; no se muestran barras de desplazamiento. El contenido sigue existiendo en el flujo interno, men ingen är synlig fuera del área. Aunque el usuario no pueda hacer scroll manual, sí puede desplazarse de forma programática (por ejemplo, con scrollTop o desplazando el foco), de modo que el elemento se considera contenedor de desplazamiento.

• klämma: registrera innehållet i överfyllningsklämmans kant, definitivt av overflow-clip-marginEn skillnad mellan dolda saker, no permite desplazamiento, ni manual ni programático. No crea un nuevo contexto de formateo por sí mismo; si necesitas aislar el flujo (como haría auto/scroll/hidden), combínalo con display: flow-root. Úsalo cuando quieras un corte tajante sin scroll ni "resquicios".

• rullainnehållet registreras och siempre se muestran barras de desplazamiento en el eje al que aplique, haya o no desbordamiento real. Esta constancia evita que las barras aparezcan y desaparezcan cuando el contenido fluctúa; ten en cuenta que, aun así, al imprimir puede que el contenido desbordado se incluya según el motor de impresión.

• billiknande en skriftrulle, men solo añade barras cuando son necesarias. Si el contenido cabe, el resultado visual se aproxima a synlig, pero el elemento ya actúa como contenedor de desplazamiento y además establece un nuevo contexto de formateo por motivos de rendimiento y reflujo con elementos flotantes.

Matices esenciales que cambian el resultado

Hay cinco detalles que no conviene pasar por alto y que, en la práctica, marcan la diferencia: las dimensioner, el contexto de formateo, la interacción entre ejes, la impresión y el soporte de desplazamiento programático.

Para que el desbordamiento vertical tenga efecto real, el bloque debe tener altura (höjd) eller altura máxima (max-höjd) definidas; si trabajas en términos lógicos, usa blockstorlek o maxblockstorlek. Para escenarios dinámicos, aprende en obtener la altura de un elemento. En el eje horisontell ocurre lo propio con bredd/maxbredd o inline-storlek/max-inline-storlek; otra opción para forzar el desbordamiento en línea es blanksteg: nowrap.

Al elegir cualquier valor distinto de synlig och klämma para overflow/overflow-y, el elemento skapa ett nytt sammanhang för formateo de bloque. Esto evita que, por ejemplo, un float vecino reempaquete el contenido en cada paso de scroll, algo que degradaría el rendimiento al desplazarse.

Hay también reglas de interacción entre ejes que sorprenden la primera vez: si estableces synlig i ett utkast y en el otro usas un valor que no sea synlig ni klipp, ese synlig aktiv autoAsimismo, si pones klipp i ett utkast y en el otro no es synlig ni klipp, el klipp se comporta como hidden; conviene conocerlo för evitar resultados inesperados.

En la práctica diaria, mucha gente observa que al aplicar scrolla automatiskt och utkasta, elementet blir ett rullningsbehållare y ciertas acciones (como pseudo-elementos que sobresalen) pueden activar también el desplazamiento en el otro eje si no se controla bien. Es un comportamiento coherente con la especificación y los motores de renderizado actuales.

Exempel rápido: fijar la altura y activar el scroll vertikalt

Una demostración típica består en acotar la altura de un bloque de texto y permitir que el exceso se desplace verticalmente. En este caso, overflow-y: auto añade la barra solo cuando haga falta.

<div class="caja">
  <p>Texto largo...</p>
  <p>Más texto...</p>
</div>

.caja {
  max-height: 220px;
  padding: 12px;
  border: 1px solid #ccc;
  overflow-y: auto;   /* barra vertical solo si es necesaria */
  overflow-x: hidden; /* evitamos scroll horizontal accidental */
}

Ta reda på detaljerna: overflow-x: dolda komplement till overflow-y para impedir que vibraciones de layout, sombras o pseudo-elementos provoquen una barra horizontal indeseada.

Kontrollera och desplazamiento med JavaScript

Cuando el contenedor es desplazable (auto, scroll eller incluso dod), puedes mover el contenido por código con propiedades y métodos estándar como Element.scrollTop y Element.scrollTo(). Esto permite, por ejemplo, llevar el foco visual a un ancla interior o simular un salto al final de la lista.

// Desplazar 200px hacia abajo
const panel = document.querySelector('.panel');
panel.scrollTop = 200;

// O ir con precisión a una posición
panel.scrollTo({ top: 0, behavior: 'smooth' });

Hay una exepción explícita: si usas overflow: klipp, användaragenten ingen permite desplazamiento programático; el contenido fuera del borde de klipp är inte tillgängligt ni con el ratón ni desde JavaScript.

Tillgänglighet: teclado, foco y lectores de pantalla

Un area desplazable no siempre es fokuserbar genom teclado, así que el usuario que navega sin ratón puede quedarse sin forma de desplazarla. En Firefox och en Chrome 132 eller överlägsen, alla användare av scroll se hacen focuseables por defecto; en otros navegadores, añade tabindex="0" till behållaren.

Nu är det bra, om vi introducerar ese tabbstopp a ciegas, un lector de pantalla puede llegar a la región sin contexto. Para mitigarlo, asigna un roll ARIA adecuado (till exempel, role="region") och proportionerar en antal tillgängliga med aria-label o aria-labelledby. Un etiquetado claro mejora la navegación asistida sin sacrificar usabilidad.

Overflow-x y overflow-y: cómo se combinan

Förkortad egendom svämma över permite establecer ambos ejes a la vez con uno o dos valores; cuando especificas dos, el primero es para överflödes-x och den andra för överflöds-y. Esto facilita casos como evitar la barra horisontell a la vez que tillåter rullning vertikalt.

/* Evita barra horizontal, permite scroll vertical si hace falta */
.contenedor { overflow: hidden auto; }

Como recordatorio rápido, los valores disponibles para configurar el desbordamiento son: synlig, dolda, klämma, rulla y bil. Ögonnivån, överflödes-x gobierna el flujo horisontell y överflöds-y el vertikal, y puedes combinarlos según convenga.

"Klippkant" y överfyllnad-klippmarginal

Om du väljer överflöd: klipp (o solo en el eje Y), el recorte se realiza en el denominado bord de klipp desbordamiento. Ese borde puede extenderse más allá del padding gracias a overflow-clip-margin, som accepterar en longitud para dejar "aire" antes de recortar.

.tarjeta {
  overflow-y: clip;              /* cortar sin permitir scroll */
  overflow-clip-margin: 8px;     /* recorta 8px por fuera del padding */
}

Kom ihåg att klipp inget skapat ett nytt sammanhang för formateo. Si necesitas ese aislamiento (för ejemplo, para gestionar floats eller contener márgenes colapsados), combina clip con display: flow-root y así consigues el mismo efecto de contención que aportan auto/scroll/hidden.

Cuándo necesitas dimensiones explícitas

Para que el recorte o el scroll aparezcan de verdad, el elemento necesita una höjd fastställd (höjd o max-höjd) en el eje de bloque, o su equivalente lógico blockstorlek/maxblockstorlek; si nej, el contenedor crecerá con el contenido y el desbordamiento no se activará.

En layouts horizontales (por ejemplo, carouseles), definiera bredd/maxbredd o inline-storlek/max-inline-storlek para forzar el desbordamiento en el eje X; también puedes usar blanksteg: nowrap para impedir los saltos de línea y provocar que el contenido exceda el ancho disponible.

Evitar la barra horisontell por pseudo-elementos o sombras

Un caso real muy habitual: un pseudo-elemento ::efter que flota hacia la derecha, o una sombra alargada, sobrepasa el contenedor y aktivera den horisontella barren en un elemento que ya tiene overflow-y. Esto sucede porque, al convertirse en contenedor de scroll, el motor considera el área desbordada para el eje opuesto.

Typiska lösningar: aplica overflow-x: dold en el contenedor desplazable; controla el tamaño y posición del pseudo-elemento (s. ej., con transformera en lugar de posición absoluta si procede); o acota con klipp/klippväg si buscas un recorte tajante. Cualquiera de estas estrategias evita el scroll horisontellt indeseado utan att offra vertikalen.

Demostración de resultados con cada valor

El suuiente bloque muestra cómo cambian la visibilidad y las barras con los distintos valores de overflow-y, todos con la minsta höjd maximal para forzar el desbordamiento vertikal:

<div class="demo visible">Contenido largo...</div>
<div class="demo hidden">Contenido largo...</div>
<div class="demo clip">Contenido largo...</div>
<div class="demo scroll">Contenido largo...</div>
<div class="demo auto">Contenido largo...</div>

.demo {
  max-height: 140px;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #bbb;
}
.visible { overflow-y: visible; }
.hidden  { overflow-y: hidden; }
.clip    { overflow-y: clip; }
.scroll  { overflow-y: scroll; }
.auto    { overflow-y: auto; }

Lägg märke till att rulla siempre muestra la barra vertikal, mientras que auto solo lo hace cuando el texto excede la altura. En gömd, el contenido sobrante no se ve pero sigue estando ahí; en klipp, directamente no existe una vía desplazamiento, ni si quiera con código.

Impresión y contenido desbordado

Un detalj menos conocido: con överflöd: rulla, algunos motores de impresión pueden acabar imprimiendo el contenido desbordado aunque no quepa en pantalla. Si tu caso de uso contempla exportar en PDF o papel, pruébalo y besluta si prefieres dolda eller klämma för att undvika oväntade avgångar.

Kompatibilitet för navegadores

Egenskaperna överflöde, överflöde-x y överflöde-y gozan de soporte sólido en los navegadores modernos desde hace muchas versioner. El tapperhet klämma och din sällskap overflow-clip-margin pertenecen a especificaciones más recientes, pero su faktisk adoption är omfattande y crece con cada lanzamiento; comprueba las matrices de compatibilidad si apuntas en entornos antiguos.

En cuanto al foco de contenedores desplazables, recuerda la peculiaridad: Firefox och Chrome 132+ los hacen focuseables por defecto; para el resto, añade tabindex = "0" manualmente y un roll/nombre accessible para una experiencia consistente.

Buenas prácticas de maquetación

No todo es poner una barra y listo: combina propiedades para prevenir desplazamientos indeseados y ganar och estabilidad visual. Aquí van unas pautas que funcionan muy bien en producción.

• Definiera dimensioner: sin höjd/max-höjd o blockstorlek, el contenedor crecerá y no verás el efecto de overflow-y.

• Añade overflow-x: dold cuando använder overflow-y, salvo que necesites belt-and-braces horizontales. Evitas barras laterales provocadas por sombras, bordes o pseudo-elementos.

• Föredra automatiskt framåt för att scrolla si quieres que la barra aparezca solo cuando haga falta, y scroll si buscas dimensiones estables de layout sin "saltos" por aparición/desaparición de scrollbars.

• Usa klipp cuando quieras recorte duro (sin rutas de desplazamiento), y combínalo con display: flow-root si necesitas contención del flujo.

Relación con el DOM och APIs uteles

I JavaScript, DOM-exponeringen överflöd como propiedad de estilo, y puedes inspeccionar/ajustar el estado del elemento: element.style.overflowY y getComputedStyle(element).overflowY. Además, para desplazar contenidos usa scrollTop y scrollTo(), salvo con clip donde no hay scroll de ningún tipo.

const panel = document.querySelector('.panel');
panel.style.overflowY = 'auto';
if (getComputedStyle(panel).overflowY !== 'visible') {
  panel.scrollTo({ top: panel.scrollHeight, behavior: 'smooth' });
}

Si trabajas con enlaces internos, recuerda que tabular hacia un elemento oculto dentro de un contenedor hidden/auto puede hacer que el navegador rulla automatiskt para ponerlo en vista; es una forma legítima de desplazamiento programático, util para mejorar la navegación con teclado.

Tabla mental rápida de alternativ

För tenerlo claro de un vistazo: synlig lämna allt om dig; dolda recorta y permite scroll programático; klämma registrera och tillåt inte att scrolla; rulla recorta pero siempre muestra barras; y bil solo muestra barras cuando procede. Y recuerda que inga synliga/klipp skapade formateosammanhang, vital para rendimiento con floats.

Exempel de combinación por ejes

Dos patrones que verás constantemente: tillåt vertikal rullning sin barra horisontell, y recortar en un eje con clip mientras el otro se desplaza automáticamente.

/* Scroll vertical, sin horizontal */
.lista {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Recorte duro en X, desplazamiento automático en Y */
.panel {
  overflow-x: clip;
  overflow-y: auto;
  display: flow-root; /* contén el flujo si lo necesitas */
}

Tio presenterar las reglas de interacción: si un eje usa un valor distinto de visible/clip y el otro pone synlig, ese synlig se eleva en auto. Con clip sucede algo parecido: si el otro eje no es synlig ni klipp, el klipp som faktiskt fungerar som dolt.

Vanliga användningsfall

Moderna gränssnitt, överflöds-y Det är oöverskådligt för chattboxar, paneler de filtros, menús largos, loggar eller listados med altura acotada. Se komplement till cabeceras pegajosas y footers dentro del contenedor, y suele acompañarse de overflow-x: dold för att undvika sidostänger.

En diseños con tarjetas o modales, puedes alternar entre bil (para no mostrar la barra si no hace falta) y rulla (para estabilizar el ancho cuando aparecería la barra durante la carga). Si el modal debe recortar partes decorativas, klämma evita interacciones y ahorra cálculos.

Vanliga misstag och hur man undviker dem

El fallo más repetido es declarar överflöd utan höjd y esperar una barra que nunca llega; definiera höjd o max-höjd/blockstorlek. El segundo es olvidarse del eje horisontal: alltid värdera overflow-x en paralelo, sobre todo si usas sombras o pseudo-elementos.

En tredje får inte beaktas tillgänglighet: contenedores desplazables sin foco de teclado o sin nombre accesible complican la vida a usuarios con lector de pantalla. Añade tabindex, roll och aria-etikett cuando inget hav fokuseable por defecto.

Recursos relacionados

Si quieres ampliar, revisa el tutorial general de CSS-dekoration och referensen till DOM för overflowY en elementos. Estas páginas cubren desde fundamentalos hasta peculiaridades finas de implementación y compatibilidad.

Dominar overflow-y implica entender qué recorta, cuándo se desplaza, cómo interactúa con el eje opuesto y qué efecto tiene en el contexto de formateo; con las pautas de dimensiones, accesibilidad y combinación con overflow-x, es sencillo lograr paneles fluidos, sin barras imprevistas y con un desplazamiento suave tanto para usuarios como para scripts.