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

Pagrindinis » Pitonas » Propiedad CSS perpildymas-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 usable; en ese terreno, overflow-y en CSS manda sobre el desbordamiento vertikaliai, 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 activan 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" en ambos ejes si no se configura bien.

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

Nuosavybė perpildymo indica al navegador qué hacer con el contenido que rebasa el elemento por su viršutinė ir apatinė riba. Cuando un bloque tiene más contenido del que cabe en su altura definida (o máxima), este ajuste Decision si el contenido se recorta, se hace desplazable o se deja nähtav fuera del recuadro.

Įrašyti įrašą su relación su „hermana“ horizontaliai: overflow-x controla los laterales izquierdo y derecho, mientras que overflow-y se centra en arriba y abajo. Y, por supuesto, la propiedad abreviada išsiliejimas permite establecer ambos ejes a la vez con uno o dos valores.

Sintaksė ir pripažintos vertės

Tiesiogiau savo forma, perpildymas ir vertybių priėmimas paslėptas, slinkimas, automatinis matomas; desde especificaciones modernas también egzistuoja klipas. Puedes declararla así:

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

Jei naudojate santrauką išsiliejimas, puedes pasar viena arba kelios vertės. Con un valor, se aplica a ambos ejes; con dos valores, el primero correcte a perpildymas-x (horizontalus) ir antrasis a perpildymo (vertikaliai):

/* 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, bet cada palabra clave encierra un Comportamiento specífico, y algunos incluyen reglas de accesibilidad y rendimiento importantes.

• matomas (valor por defecto): 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 komponentes.

• paslėptų: el contenido se recorta en el borde del padding; no se muestran barras de desplazamiento. El contenido sigue existiendo en el flujo interno, pero no es matyti fuera del area. 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 regarda contenedor de desplazamiento.

• klipas: įrašyti turinį į perpildymo spaustuko kraštas, tikrai por overflow-clip-marginPaslėptas skirtumas, no permite desplazamiento, ni manual ni programático. No crea un nuevo konteksto 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“.

• pa ¾ ymìkite: el contenido se recorte y 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.

• automatinispanašus į ritinį, bet solo añade barras cuando son necesarias. Si el contenido cabe, el resultado visual se aproxima a matomas, pero el elemento ya actúa como contenedor de desplazamiento y además Establece un nuevo konteksto 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 dimensiones, 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 (aukštis) arba altura máxima (maksimalus ūgis) definidas; si trabajas en términos lógicos, usa bloko dydis o maksimalus bloko dydis. Para escenarios dinámicos, aprende a obtener la altura de un elemento. En el eje horizontaliai ocurre lo propio con plotis/maksimalus plotis o inline-size/max-inline-size; otra opcija para forzar el desbordamiento en línea es balta erdvė: nowrap.

Al elegir cualquier valor distinto de matomas ir klipas para overflow/overflow-y, el elemento crea un nuevo konteksto 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 matomas ejakuliacijoje y en el otro usas un valor que no jūros matomas ni klipas, ese matomas faktas kaip automobilisAsimizmas, si pones apkabinti makštį y en el otro no es matomas ni klipas, el klipas, kuris veda kaip paslėptas; conviene conocerlo para evitar resultados inesperados.

En la práctica diaria, mucha gente observa que al aplicar automatinis slinkimas ir išmetimas, elementas pasa a ser un slinkties konteineris 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 aktuales.

Pavyzdžiui: „Fijar la Altura“ ir „Activar“ el slinkties vertikaliai

Una demostración típica compose en acotar la altura de un bloque de texto y permitir que el exceso se desplace verticalmente. En este caso, perpildymas-y: automatinis 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 */
}

Išsamiai apžiūrėkite: perpildymas-x: paslėptas perpildymo-y papildinys para impedir que vibraciones de layout, sombras o pseudo-elementos provoquen una barra horizontal indeseada.

Valdykite ir pašalinkite „JavaScript“.

Cuando el contenedor es desplazable (automatinis, slinkimas arba įtrauktas paslėptas), puedes mover el contenido por código con propiedades y metodos 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 list.

// 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 excepción explícita: „Si USAs“ perpildymas: spaustukas, naudos gavėjas no authore desplazamiento programático; el contenido fuera del borde de clip no es accesible ni con el ratón ni desde JavaScript.

Prieiga: teclado, foco y lectores de pantalla

Un area desplazable no siempre es fokusuojamas pagal „Teclado“, así que el usuario que navega sin ratón puede quedarse sin forma de desplazarla. „Firefox“ ir „Chrome 132“ o geresnė versija, los contenedores de scroll se hacen focuseables por defecto; en otros navegadores, añade tabindex="0" al pretendentas.

Dabar gerai, si pristato ese tabuliavimo klavišas a ciegas, un lector de pantalla puede llegar a la región sin konteksto. Para mitigarlo, asigna un dešimties metų ARIA ritinys (pvz., role="region") y proporcingas prieinamas su aria-label o aria-labelledby. Un etiquetado claro mejora la navegación asistida sin sacrificar usabilidad.

Perpildymas-x y perpildymas-y: cómo se combinan

La propiedad santrumpa išsiliejimas permite establecer ambos ejes a la vez con uno o dos valores; cuando especificas dos, el primero es para perpildymas-x o antrasis - perpildymo. Esto facilita casos como evitar la barra horizontal a la vez que atļaujes slinkti vertikaliai.

/* 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: matomas, paslėptų, klipas, pa ¾ ymìkite y automatinisIšmatų lygis perpildymas-x gobierna el flujo horizontali y perpildymo el vertikali, y puedes combinarlos según convenga.

„Apkirpti kraštą“ ir perpildymo-apkirpimo-parašė

Jei pasirinksite perpildymas: spaustukas (o solo en el eje Y), el recorte se realiza en el denominado borde de clip de desbordamiento. Ese borde puede extenderse más allá del padding gracias a overflow-clip-margin, kas priima vieną ilguma para dejar „aire“ antes de recortar.

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

Prisiminti klipas nėra sukurtas ir naujas formato kontekstas. Si necesitas ese aislamiento (por ejemplo, para gestionar floats o contener márgenes colapsados), combina clip con ekranas: srauto šaknis 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 Altura Establecida (aukštis arba didžiausias aukštis) en el eje de bloque, o su ekvivalente lógico bloko dydis / maksimalus bloko dydis; si no, el contenedor crecerá con el contenido y el desbordamiento no se activará.

En maketus horizontales (por ejemplo, carouseles), apibrėžti plotis/maksimalus plotis o inline-size/max-inline-size para forzar el desbordamiento en el eje X; también puedes usar balta erdvė: nowrap para impedir los saltos de línea y provocar que el contenido exceda el ancho disponible.

Evitar la barra horizontal por pseudo-elementos o sombras

Un caso real muy habitual: un pseudo-elemento ::po que flota hacia la derecha, o una sombra alargada, sobrepasa el contenedor y aktyvuokite horizontalią juostą en un elemento que ya tiene overflow-y. Esto sucede porque, al convertirse en contenedor de scroll, el motor mattera el área desbordada para el eje opuesto.

Tipiniai sprendimai: aplica overflow-x: paslėptas en el contenedor desplazable; controla el tamaño y posición del pseudo-elemento (p. ej., con transformuoti en lugar de posición absoluta si procede); o acota con klipas/klipo kelias si buscas un recorte tajante. Cualquiera de estas estrategias evita el slinkti horizontaliai indeseado nuodėmės auka el vertikalus.

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 Misma Altura Máxima para forzar el desbordamiento vertikaliai:

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

Pastebėti, kad slinkties siempre muestra la barra vertical, mientras que auto solo lo hace cuando el texto excede la altura. En paslėptas, el contenido sobrante no se ve pero sigue estando ahí; en klipas, directamente no existe una vía de desplazamiento, ni si quiera con código.

Impresión y contenido desbordado

Un detalle menos conocido: con perpildymas: slinkimas, algunos motores de impresión pueden acabar imprimiendo el contenido desbordado aunque no quepa en pantalla. Situ caso de uso contempla exportar PDF arba papel, pruébalo y Decision si prefieres paslėptų ar netgi klipas kad būtų išvengta netikėtų išvykimų.

Suderinamumas entre navegadores

Savybės perpildymas, perpildymas-x y perpildymas-y gozan de soporte sólido en los navegadores modernos desde hace muchas versijos. El valor klipas ir su draugu overflow-clip-margin pertenecen a especificaciones más recientes, pero su tikrasis priėmimas yra didelis y crece con cada lanzamiento; comprueba las matrices de compatibilidad si apuntas a entornos antiguos.

En cuanto al foco de contenedores desplazables, recuerda la peculiaridad: „Firefox“ ir „Chrome“ 132+ los hacen focuseables por defecto; para el resto, añade skirtuko indeksas = „0“ manualmente y un rol/nombre accesible para una experiencia nuosekli.

Buenas prácticas 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.

• Apibrėžkite matmenis: sin aukštis / maksimalus aukštis arba bloko dydis, el contenedor crecerá y no verás el efecto de overflow-y.

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

• Pageidautina automatinis slinkimas 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.

• JAV klipas 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 y APIs útiles

JavaScript, DOM paaiškinimas perpildymasY 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 slinkties viršuje y slinkti iki(), 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 automatiškai slinkti para ponerlo en vista; es una forma legítima de desplazamiento programático, útil para mejorar la navegación con teclado.

Tabla mental rápida de opciones

Para tenerlo claro de un vistazo: matomas deja que visa tai po skutimosi; paslėptų recorta y permite scroll programático; klipas įrašas ir neleidžiama slinkti; pa ¾ ymìkite recorta pero siempre muestra barras; y automatinis solo muestra barras cuando procede. Y recuerda que nėra matomo / klipo kūrimo konteksto de formateo, vital para rendimiento con floats.

Ejemplos de combinación por ejes

Dos patrones que verás permanentemente: leisti vertikaliai slinkti sin barra horizontal, y recortar en un eje con clip mientras el otro se desplaza automaticamente.

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

Ten presentes las reglas de interacción: si un eje usa un valor distinto de nähtav/klipas y el otro pone matomas, ese matomas se liftas automobilis. Con clip sucede algo parecido: si el otro eje no es matomas ni klipas, el paslėptas klipas.

Dažni naudojimo atvejai

Šiuolaikinėse sąsajose perpildymo yra neįspūdingos pokalbių dėžutės, filtrų skydeliai, didelių meniu, žurnalai arba sąrašai su altura acotada. Se Complementa con cabeceras pegajosas y footers dentro del contenedor, y suele acompañarse de perpildymas-x: paslėptas šoninių strypų ištraukimui.

En diseños con tarjetas o modales, puedes alternar entre automatinis (para no mostrar la barra si no hace falta) y pa ¾ ymìkite (para estabilizar el ancho cuando aparecería la barra durante la carga). Si el modal debe recortar partes decorativas, klipas evita interacciones y ahorra cálculos.

Dažnos klaidos ir kaip jų išvengti

El fallo más repetido es deklarar perpildymo nuodėmė altura y esperar una barra que nunca llega; apibrėžkite aukštį arba maksimalų aukštį / bloko dydį. El segundo es olvidarse del eje horizontaliai: siempre valora perpildymas-x en paralelo, sobre todo si usas sombras o pseudo-elementos.

Un tercero es no considerar prieinamumas: contenedores desplazables sin foco de teclado o sin nombre accesible complican la vida a usuarios con lector de pantalla. Añade tabindex, role y aria-label cuando no seafokusuojamas por defecto.

Recursos relacionados

Si quieres ampliar, revisa el tutorial general de aprašymas CSS sistemoje ir nuoroda DOM perpildymui en elementos. Estas páginas 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 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.