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

Ikhaya » Python » Ukuchichima kwe-Propiedad CSS-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 ezisebenzisekayo; en ese terreno, ukuchichima-y en CSS manda sobre el desbordamiento mpo, decidiendo si recortar, mostrar barras de desplazamiento o dejar que el contenido se asome fuera del cuadro.

Iningi le-básico, i-hay matices que cambian kanye nomphumela ophelele: i-ciertos valores activan un nuevo contexto de formateo.

¿Qué eschichima-y para qué sirve?

Impahla ukuchichima-y indica al navegador qué hacer con el contenido que rebasa el elemento por su borde superior futhi inferior. Cuando un bloque tiene más contenido del que cabe en su altura definida (o máxima), este ajuste decide si el contenido se recorta, se hace desplazable o se deja ebonakalayo fuera del recuadro.

Irekhodi le-Conviene su relación con su “hermana” elivundlile: ukuchichima-x controla los laterales izquierdo y derecho, mientras que overflow-y se centra en arriba y abajo. Y, por supuesto, la propiedad abreviada ukuchichima permite establecer ambos ejes a la vez con uno o dos valores.

I-Sintaxis y valores admitidos

En su forma más directa, ukuchichima-y acepta los valores kufihliwe, skrola, okuzenzakalelayo y kubonakale; desde especificaciones modernas también existe isiqeshana. I-Puedes declararla así:

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

Sisebenzisa i-abreviatura ukuchichima, i-puedes pasar uno o dos valores. Con un valor, se aplica a ambos ejes; con dos valores, el primero corresponde a ukuchichima-x (evundlile) y el segundo a ukuchichima-y (ime mpo):

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

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

I-Significado detallado de cada valor

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

• okubonakalayo (i-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 componentes.

• efihliwe: el contenido se recorta en el borde del padding; no se muestran barras de desplazamiento. I-El contenido sigue existiendo en el flujo interno, i-pero no es ebonakalayo 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.

• isiqeshana: recorta el contenido en el umkhawulo wesiqeshana esichichimayo, definido por overflow-clip-margin. Umehluko ofihliwe, no permite desplazamiento, ni manual ni programático. No crea un nuevo contexto de formateo por sí mismo; sidinga i-aislar el flujo (i-como haría auto/skrola/efihliwe), i-combínalo con display: flow-root. Úsalo cuando quieras un corte tajante sin scroll ngokuthi “resquicios”.

• pheqa: el contenido se recorta y siempre se muestran barras de desplazamiento en el eje al que aplique, haya o no desbordamiento real. I-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.

• imoto: okufanayo nomqulu, pero solo añade barras cuando son necesarias. Si el contenido cabe, el resultado visual se aproxima a ebonakalayo, pero el elemento ye actúa como contenedor de desplazamiento y además establece un nuevo contexto de formateo por motivos de rendimiento y reflujo con elementos flotantes.

I-Matices esenciales que cambian el resultado

I-Hay cinco details 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 i-altura (ubude) noma i-altura máxima (ubude obukhulu) definidas; si trabajas en términos lógicos, usa usayizi webhulokhi o usayizi omkhulu webhulokhi. Para escenarios dinámicos, aprende a obtener la altura de un elemento. En eje evundlile ocurre lo propio con ububanzi/ubukhulu-ububanzi o usayizi-okusemgqeni/ubukhulu-usayizi-okulayini; otra opción para forzar el desbordamiento en linea es indawo emhlophe: nowrap.

Al elegir cualquier valor distinto de ebonakalayo futhi of isiqeshana para ukuchichima/chichima-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.

I-Hay también reglas de interacción entre ejes que sorprenden la primera vez: si-estableces ebonakalayo en un eje y en el otro usas un valor que akukho ulwandle olubonakalayo ni clip, ese ebonakalayo actúa como auto. Asimismo, si pones clip en eje y en el otro no es ebonakalayo ni clip, el isiqeshana se comporta como sifihliwe; conviene conocerlo para evitar resultados inesperados.

En la práctica diaria, mucha gente observa que al aplicar pheqa o auto en un eje, i-elemento pasa a ser un skrola isitsha y ciertas acciones (como pseudo-elementos que sobresalen) pueden activar también el desplazamiento en el otro eje ngeke ngikwazi ukulawula. Es un comportamiento coherente con la especificación y los motores de renderizado actuales.

I-Ejemplo rápido: i-fijar la altura kanye ne-activar El scroll vertical

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

Nawa emininingwaneni: ukuchichima-x: ukugcwaliseka okufihliwe a ukuchichima-y para impedir que vibraciones de layout, sombras o pseudo-elementos provoquen una barra evundlile entshonalanga.

Lawula y desplazamiento ku-JavaScript

I-Cuando el contenedor es desplazable (okuzenzakalelayo, skrola noma kufihlwe), i-puedes mover el contenido por codigo con propiedades y métodos estándar como Element.scrollTop y Element.scrollTo(). I-Esto permite, por ejemplo, llevar el foco visual a un ancla internal or 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' });

I-Hay una excepción ichaza: si usas ukuchichima: isiqeshana, el agente de usuario akukho permite desplazamiento programático; I-el contenido fuera del borde de clip no es accessible in contenido fuera del borde de clip no es accessible in the ratón de de JavaScript.

I-Accesibilidad: i-teclado, i-foco y lectores de pantalla

Indawo edabukisayo ayikho i-siempre es i-focuseable por teclado, así que el usuario que navega sin ratón puede quedarse sin forma de desplazarla. Ku-Firefox naku-Chrome 132 noma ngaphezulu, kunezinto ezihambisana nokuskrola se hacen focuseables noma defecto; en otros navegadores, añade tabindex="0" al contenedor.

Ahora bien, si introduce ese ithebhu stop a ciegas, un lector de pantalla puede llegar a la región sin contexto. Para mitigarlo, asigna un i-ARIA adecuado (ngokwesibonelo, role="region") y proporciona un i-nombre iyafinyeleleka con aria-label o aria-labelledby. Un etiquetado claro mejora la navegación asistida sin sacrificar usabilidad.

Ukuchichima-x y kuchichima-y: cómo se combinan

La propiedad abreviada ukuchichima permite establecer ambos ejes a la vez con uno o dos valores; cuando especificas dos, el primero es para ukuchichima-x kanti eyesibili ye ukuchichima-y. I-Esto facilita casos como evitar la barra evundlile i-la vez que permites ipheqa iqonde.

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

I-Como recordatorio rápido, los valores disponibles para configurar el desbordamiento son: ebonakalayo, efihliwe, isiqeshana, pheqa y imoto. I-nivel de ejes, ukuchichima-x gobierna el flujo evundlile y ukuchichima-y iqondile, y puedes combinarlos según convenga.

“Unqenqema lwesiqeshana” y i-overflow-clip-margin

Uma ukhetha ukuchichima: isiqeshana (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, que acepta una eside para dejar “aire” antes de recortar.

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

Khumbula lokho clip no crea un nuevo contexto de formateo. Sinecesitas ese aislamiento (por ejemplo, para gestionar floats or contener márgenes colapsados), combina clip con isibonisi: i-flow-root y así consigues el mismo efecto de contención que aportan auto/scroll/hidden.

I-Cuándo idinga ukuchazwa kwe-dimensiones

I-Para que el recorte or el scroll aparezcan de verdad, i-elemento edingekayo i-altura establecida (ukuphakama noma ukuphakama okukhulu) en el eje de bloque, o su equivalente lógico usayizi webhulokhi/ubukhulu-usayizi-webhulokhi; si no, el contenedor crecerá con el contenido y el desbordamiento no se activará.

Izakhiwo ze-Horizontales (ngokwesibonelo, ama-carouseles), chaza ububanzi/ubukhulu-ububanzi o usayizi-okusemgqeni/ubukhulu-usayizi-okulayini para forzar el desbordamiento en el eje X; también puedes usar indawo emhlophe: nowrap para impedir los saltos de linea y provocar que el contenido exceda el ancho disponible.

I-Evitar la barra evundlile por pseudo-elementos noma sombras

Un caso real muy habitual: un pseudo-elemento ::ngemva que flota hacia la derecha, o una sombra alargada, sobrepasa el contenedor y activa la barra evundlile en un elemento que ya tiene overflow-y. I-Esto sucede porque, i-al convertirse en contenedor de scroll, i-el motor icabangela i-el área desbordada para el eje opuesto.

Izixazululo ezijwayelekile: ukuchichima kwe-aplica-x: kufihliwe en el contenedor desplazable; controla el tamaño y posición del pseudo-elemento (p. ej., con guqula en lugar de posición absoluta si procede; o acota con isiqeshana/indlela yokunamathisela si buscas un recorte tajante. I-Cualquiera de estas estrategias evita el scroll indeeado enezingqimba isono umhlatshelo el mpo.

I-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 i-misma altura máxima para forzar el desbordamiento mpo:

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

Qaphela lokho skrola siempre muestra la barra mpo, i-mientras que auto solo lo hace cuando el texto idlula i-altura. En kufihliwe, el contenido sobrante no se ve pero sigue estando ahí; en clip, directamente no existe una vía de desplazamiento, ni si quiera con codigo.

I-Impresión y contenido desbordado

Un detalle menos conocido: con ukuchichima: skrola, i-algunos motors de impresión pueden acabar imprimiendo el contenido desbordado awunque no quepa en pantalla. Uma ucabanga ngokuthumela ngaphandle i-PDF noma i-papel, ucabangele futhi unqume ukuthi yini eyandulelayo efihliwe noma ngisho isiqeshana para evitar salidas inesperadas.

Compatibilidad entre navegadores

Izakhiwo ukuchichima, ukuchichima-x y kuchichima-y gozan de soporte sólido en los navegadores modernos desde hace muchas izinguqulo. Iqhawe isiqeshana y su compañera overflow-clip-margin pertenecen a especificaciones más recientes, pero su i-adopción real es amlia 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: I-Firefox ne-Chrome 132+ i-los hacen focuseables por defecto; para el resto, añade tabindex=”0″ i-manualmente y un rol/nombre iyafinyeleleka ukuze ube nesipiliyoni esivumelanayo.

I-Buenas prácticas de maquetación

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

• Chaza ubukhulu: ubude besono/ubude obukhulu obukhulu bebhulokhi, i-el contenedor crecerá y no verás el efecto de overflow-y.

• Ukuchichima kwe-Añade-x: kufihliwe I-cuando isebenzisa ukuchichima-y, i-salvo que idinga amabhande nama-braces horizontales. I-Evitas barras laterales provocadas por sombras, bordes noma pseudo-elementos.

• Prefiere auto frente a scroll si quieres que la barra aparezca solo cuando haga falta, y skrola si buscas dimensiones estables de layout sin “saltos” por aparición/desaparición de scrollbars.

• Sebenzisa isiqeshana se-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

Ku-JavaScript, kanye ne-DOM expone kuyachichimaY i-como propiedad de estilo, y puedes inspeccionar/ajuster el estado del elemento: element.style.overflowY y getComputedStyle(element).overflowY. Además, para desplazar contenidos usa scrollTop y skrolaKu(), 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 i-dentro de un contenedor efihliwe/i-auto puede hacer que el navegador skrola ngokuzenzakalelayo i-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

Izici eziyinhloko ze-vistazo: ebonakalayo deja que todo sobresalga; efihliwe recorta y permite scroll programático; isiqeshana recorta y no permite scroll; pheqa recorta pero siempre muestra barras; y imoto solo muestra barras cuando procede. Ngiyaphinda futhi akukho okubonakalayo/okunamathiselwe okudale umongo wefomethi, kubalulekile para rendimiento con ukuntanta.

I-Ejemplos de combinación por ejes

I-Dos patrones que verás constantemente: permitir pheqa mpo sin barra evundlile, 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 */
}

Izethulo eziyishumi las reglas de interacción: si un eje usa un valor distinto de ebonakalayo/clip y el otro pone ebonakalayo, ese ebonakalayo phezulu kwe-auto. Isiqeshana se-sucede algo parecido: si el otro eje akukho okubonakalayo kwesiqeshana, el isiqeshana actúa como sifihliwe.

Amacala okusetshenziswa okuvamile

I-En interfaces yesimanjemanje, ukuchichima-y es impressible para chatboxes, panels de filtros, menús largos, logs o listados con altura acotada. Se complementa con cabeceras pegajosas y footers dentro del contenedor, y suele acompañarse de ukuchichima-x: kufihliwe para evitar barras laterales.

Ama-diseños con tarjetas noma ama-modales, ama-puedes alternar entre imoto (para no mostrar la barra si no hace falta) y pheqa (para estabilizar el ancho cuando aparecería la barra durante la carga). Njenge-modal debe recortar partes decorativas, isiqeshana evita interacciones y ahorra cálculos.

Amaphutha ajwayelekile nokuthi ungawagwema kanjani

El fallo más repetido es declarar ukuchichima-y sin altura y esperar una barra que nunca llega; chaza ukuphakama o ubude obukhulu/usayizi webhulokhi. I-El segundo es olvidarse del eje evundlile: i-siempre valora ichichima-x en paralelo, sobre todo si usas sombras o pseudo-elementos.

Un tercero ayicatshangelwa ukufinyeleleka: contenedores desplazables sin foco de teclado o sin nombre okufinyelelekayo okufinyelelekayo la vida a usuarios con lector de pantalla. I-Añade tabindex, indima y aria-ilebula cuando no sea focuseable por defecto.

I-Recursos relacionados

Njengoba ngibuza i-ampliar, revisa el tutorial general de desbordamiento ku-CSS y la referencia del I-DOM ngokuchichimaY en elementos. Estas páginas cubren desde fundamentos hasta peculiaridades finas de implementación y compatibilidad.

I-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.