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

Domov » Pytón » Propiedad CSS overflow-y: guía completa, valores y trucos

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

Má všetko základné, hay matices que cambian por completo el el resultado: ciertos valores activan un nuevo contexto de formateo, algunos povolenie desplazamiento con JavaScript a ďalšie bloquean, y hasta seno efectos colaterales que pueden provokatér que un contenedor pase a ser “srollable” en ambos ejes si no se configura bien.

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

Vlastníctvo pretekať-y indica al navegador qué hacer con el contenido que rebasa el elemento por su horná a dolná hranica. Cuando un bloque tiene más contenido del que cabe en su altura definida (o maxima), este ajuste decision si el contenido se recorta, se hace desplazable o se deja viditeľné fuera del recuadro.

Použite záznamník so vzťahom s „hermanom“ horizontálne: overflow-x controla los laterales izquierdo y derecho, mientras que overflow-y se centra en arriba y abajo. Y, por supuesto, la propiedad abreviada pretekať permite establecer ambos ejes a la vez con uno o dos valores.

Syntaxis a prijaté hodnoty

V tvojom najpriamejšom tvare, preplnenie a prijatie hodnôt skryté, rolovanie, automatické y viditeľné; desde especificaciones modernas también existujú klip. Puedes deklararla así:

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

Ak používate skratky pretekať, môžeš ísť jedna alebo dve hodnoty. Con un valor, sa aplica a ambos ejes; con dos valores, el primero corporation a pretečenie-x (horizontálne) a druhý a pretekať-y (vertikálne):

/* 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

Nie je to nič zlé, ale cada palabra clave encierra un comportamiento específico, y algunos incluyen reglas de accesibilidad y rendimiento importantes.

• viditeľný (statočný stav pre nedostatok): 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; útil si no quieres limitar el contenido, pero puede provocar solapamientos con otros components.

• skrytý: el contenido se recorta en el borde del padding; no se muestran barras de desplazamiento. El contenido sigue existiendo en el flujo interno, no nie je viditeľné 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 sa zohľadňuje contenedor de desplazamiento.

• klipzaznamenať obsah v okraj pretečeného klipu, definované overflow-clip-marginSkrytý rozdiel, no permite desplazamiento, ani manual ani programático. No crea un nuevo contexto de formateo por sí mismo; si necesitas aislar el flujo (como haría auto/scroll/hidden), combinalo con display: flow-root. Úsalo cuando quieras un corte tajante sin scroll ni „resquicios“.

• zvitokobsah sa zaznamenáva a siempre se muestran barras de desplazamiento en el eje al que aplique, haya alebo no desbordamiento skutočné. 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 sa incluya según el motor de impresión.

• autopodobné zvitku, ale sólo añade barras cuando son necesarias. Si el contenido cabe, el resultado visual with aproxima a viditeľné, pero el elemento ya actúa como contenedor de desplazamiento y además etablece 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, markant la diferencia: las dimensions, 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 (výška) alebo altura maxima (maximálna výška) definidas; si trabajas en términos lógicos, USA veľkosť bloku alebo maximálna veľkosť bloku. Para escenarios dinámicos, aprende a obtener la altura de un elemento. En el eje horizontal ocurre lo propio con šírka/maximálna šírka o veľkosť v riadku/maximálna veľkosť v riadku; otra opción para forzar el desbordamiento en línea es biely priestor: nowrap.

Al elegir cualquier valor distinto de viditeľný a klip para prepad/prepad-y, el elemento crea un nuevo contexto de 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 viditeľné v batohu y en el otro usas un valor que no more viditeľné ni klip, ese viditeľné v skutočnosti ako autoAsimismo, ak pones klip v babe y en el otro nie je viditeľný ni klip, el klip sa správa ako skrytý; conviene conocerlo para evitar resultados inesperados.

En la práctica diaria, mucha gente observa que al aplicar prejdite na auto v okne, element prechádza cez kontajner na posúvanie y ciertas acciones (como pseudo-elementos que sobresalen) pueden activar también el desplazamiento en el otro eje si no se controla bien. Súvisí to so špecifikáciami a aktuálnymi motormi.

Ejemplo rápido: fijar la altura y activar el scroll vertical

Una demostración typica haste en acotar la altura de un bloque de texto y permitir que el exceso se desplace verticalmente. En este caso, pretečenie-y: automatické 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 */
}

Zapichnite detail: overflow-x: skrytý doplnok a overflow-y para impedir que vibraciones de layout, sombras o pseudo-elementos provoquen una barra horizontal indeseada.

Ovládanie a používanie JavaScriptu

Cuando el contenedor es desplazable (automatické, rolovanie alebo skryté), puedes mover el contenido por código con propiedades y métodos estándar ako 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' });

Výnimky sú vyjadrené: ak USA pretečie: klip, užívateľský agent no permite desplazamiento programático; el contenido fuera del borde de clip nie je prístupný ani con el ratón ani desde JavaScript.

Dostupnosť: teclado, foco y lectores de pantalla

Un área desplazable no siempre es zaostriteľné klávesnicou, así que el usuario que navega sin ratón puede quedarse sin forma de desplazarla. V prehliadači Firefox a v prehliadači Chrome 132 alebo lepší, bez contenedores de scroll sa zameriavajú na defekty; en otros navegadores, añade tabindex="0" do kontajnera.

Teraz dobre, ak to predstavujete zarážka tabulátora a ciegas, un lector de pantalla puede llegar a la región sin contexto. Para mitigarlo, priraďte un rol ARIA adecuado (napríklad role="region") a pomer prístupné číslo s 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

Skrátená nehnuteľnosť pretekať permite establecer ambos ejes a la vez con uno o dos valores; cuando especificas dos, el primero es para pretečenie-x a druhá pre pretekať-y. Esto facilita casos como evitar la barra horizontal a la vez que dovoluje scrolling vertical.

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

Como recordatorio rápido, los valores disponibles para configurar el desbordamiento syn: viditeľný, skrytý, klip, zvitok y autoÚroveň očí. pretečenie-x gobierna el flujo horizontálna y pretekať-y el vertikálne, y puedes combinarlos según convenga.

„Orezať okraj“ a pretečený okraj orezania

Ak sa rozhodnete pretečenie: klip (o solo en el eje Y), el recorte sa realiza en el denominado borde de clip de desbordamiento. Ese borde puede extenderse más allá del padding gracias a overflow-clip-margin, ktorý prijímam Longitude para dejar „air“ antes de recortar.

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

Pamätať klip no crea un nuevo contexto de formateo. Si necesitas ese aislamiento (por ejemplo, para gestionar floats or contener márgenes colapsados), combina clip con zobrazenie: tok-koreň y así consigues el mismo efecto de contención que aportan auto/scroll/hidden.

Cuándo necesitas dimensions explícitas

Para que el recorte o el scroll aparezcan de verdad, el elemento necesita una stanovená výška (height o max-height) en el eje de bloque, o su ekvivalente lógico veľkosť bloku/maximálna veľkosť bloku; si nie, el contenedor crecerá con el contenido y el desbordamiento no se activará.

Vodorovné rozloženia (napríklad kolotoče), definujte šírka/maximálna šírka o veľkosť v riadku/maximálna veľkosť v riadku para forzar el desbordamiento en el eje X; también puedes usar biely priestor: nowrap para impedir los saltos de línea y provocar que el contenido exceda el ancho disponible.

Evitar la barra horizontal por pseudo-elementos alebo sombras

Un caso real muy habitual: un pseudo-elemento ::po que flota hacia la derecha, o una sombra alargada, sobrepasa el contenedor y aktívna horizontálna tyč en un elemento que ya tiene overflow-y. Esto sucede porque, al convertirse en contenedor de scroll, el motor uvažuje el área desbordada para el eje opuesto.

Typické riešenia: aplika overflow-x: skryté en el contenedor desplazable; controla el tamaño y posición del pseudo-elemento (p. ej., con premeniť en lugar de posición absoluta si procede); o akota kon klip/cesta klipu si buscas un recorte tajante. Cualquiera de estas estrategias evita el scroll horizontal indeseado bez obete vertikály.

Demostración de resultados con cada valor

El siguiente bloque muestra cómo cambian la visibilidad y las barras con los distintos valores de overflow-y, todos con la moja maximálna výška pred vertikálou:

<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; }

Všimni si zvitok siempre muestra la barra vertikálny, mientras que auto solo lo hace cuando el texto excede la altura. En skrytý, el contenido sobrante no se ve pero sigue estando ahí; en clip, directamente no existe una vía de desplazamiento, ni si quiera con código.

Impresion y contenido desbordado

Un detalle menos conocido: con pretečenie: rolovanie, algunos motores de impresión pueden acabar imprimiendo el contenido desbordado aunque no quepa en pantalla. Si tu caso de uso contempla export a PDF of paper, pruébalo y decision si preferes skrytý alebo dokonca klip aby sa predišlo neočakávaným odchodom.

Kompatibilné medzi navegadores

Vlastnosti pretečenie, pretečenie-x-y pretečenie-y gozan de soporte sólido en los navegadores modernos desde hace muchas versiones. El odvaha klip a tvoja spoločníčka overflow-clip-margin pertenecen a especificaciones más reccientes, ale su Skutočné osvojenie je rozsiahle y crece con cada lanzamiento; comprueba las matrices de compatibilidad si apuntas and entornos antiguos.

S ohľadom na ohrozené osoby, ktoré sa môžu zbaviť: Firefox a Chrome 132+ stratené zameranie; para el resto, añade tabindex=”0″ manualmente y un rol/nombre accesible para una experiencia konzistentne.

Buenas prácicas de maquetación

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

• Definovať dimenzie: sin height/max-height o block-size, el contenedor crecerá y no verás el efecto de overflow-y.

• Pridať overflow-x: skryté cuando používa overflow-y, salvo que necesites belt-and-steles horizontales. Evitas barras laterales provocadas por sombras, bordes o pseudo-elementos.

• Preferované automatické predné rolovanie si quieres que la barra aparezca solo cuando haga falta, y scroll si buscas dimensions etables de layout sin “saltos” por aparición/desaparición de scrollbars.

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

Vzťah s DOM a nástrojmi API

V JavaScripte, DOM exponuje pretečenie ako propiedad de estilo, y puedes inspeccionar/austar el estado del elemento: element.style.overflowY y getComputedStyle(element).overflowY. Además, paradesplazar 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 tabuľkový hacia un elemento oculto dentro de un contenedor hidden/auto puede hacer que el navegador automaticky rolovať para ponerlo a výhľad; es una forma legítima de desplazamiento programático, útil para mejorar la navegación con teclado.

Tabla mental rápida de opciones

Pre jasný pohľad: viditeľný už som všetko videl/a; skrytý recorta y permite scroll programático; klip záznam a nepovolený zvitok; zvitok recorta pero siempre muestra barras; r auto sólo muestra barras cuando postupovať. Y recuerda que žiadny viditeľný/klip vytvára kontexto de formateo, životne dôležité para rendimiento con floats.

Ejemplos de combinación por ejes

Dos patrones que verás Constantemente: povoliť vertikálne posúvanie sin barra horizontal, 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 */
}

Desať predstavení las reglas de interacción: si un eje usa un valor distinto de viditeľný/clip y el otro pone viditeľný, ese viditeľný sa výťah auto. Con clip sucede algo parecido: siel otro eje no es viditelný ani klip, el klip skutočný ako skrytý.

Bežné prípady použitia

V moderných rozhraniach, pretekať-y sú neprehliadnuteľné pre chatboxy, panely de filtros, menus largos, logs a listados con altura acotada. Doplniť cabeceras pegajosas y footers dentro del contenedor, y suele acompañarse de pretečenie-x: skryté aby sa predišlo bočným tyčiam.

En diseños con tarjetas o modales, puedes alternar entre auto (para no mostrar la barra si no hace falta) y zvitok (para estabilizar el ancho cuando aparecería la barra durante la carga). Si el modal debe recortar partes decorativas, klip evita interacciones y ahorra calculos.

Časté chyby a ako sa im vyhnúť

Toto sa opakuje a je deklarované pretečenie a bez výšky y esperar una barra que nunca llega; definujte výšku o maximálnu výšku/veľkosť bloku. Segundo es olvidarse del eje horizontálne: siempre valora overflow-x en paralelo, sobre todo si usas sombras alebo pseudo-elementos.

Tretie sa neberie do úvahy prístupnosť: contenedores desplazables sin foco de teclado o sin nombre accesible complican la vida a usuarios con lector de pantalla. Añade tabindex, rola a aria-label cuando no sea focuseable por defekto.

Recursos relacionados

Si quieres ampliar, revisa el tutorial general de oddeliť sa od CSS a referenciu DOM pre overflowY en elementos. Estas paginas cubren desde fundamentos 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 dimensions, 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.