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

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

Kontroller som er en del av innholdet som kan selges for konkurransedyktige enheter for en diseño web limpio y brukbar; 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.

Det er allá de lo básico, hay matices que cambian por completo el resultado: ciertos valores aktiverer en ny kontekst for 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?

Eiendommen overløp indica al navegador qué hacer con el contenido que rebasa el elemento por su border superior og inferior. Cuando un bloque tiene más contenido del que cabe en su altura definida (o máxima), este ajuste bestemme si el contenido se recorta, se hace desplazable of se deja visible fuera del recuadro.

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

Syntaks og innrømmede verdier

I sin mer direkte form, overløp-y aksepterer verdiene skjult, rull, auto y synlig; desde especificaciones modernas también existe klipp. Puedes declararla así:

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

Hvis du bruker forkortelsen overløp, kan gå en eller to verdier. Con un valor, se aplica a ambos ejes; con dos valores, el primero corresponde a overflow-x (horisontal) og den andre siden overløp (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 inkluderer reglas de accesibilidad y rendimiento importantes.

• synlig (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 desplazamiento; util si no quieres limitar el contenido, men puede provokar solapamientos con otros componentes.

• skjult: el contenido se recorta en el borde del polstring; no se muestran barras de desplazamiento. El contenido sigue existiendo en el flujo interno, men ingen er synlig fuera del área. Aunque el usuario no pueda hacer rullemanual, sí puede desplazarse de forma programática (for eksempel, med scrollTop eller desplazando el foco), de modo que el elemento se considera contenedor desplazamiento.

• klipp: registrer innholdet i overløpsklipskant, definert av overflow-clip-marginEn skjult forskjell, ingen tillatelse desplazamiento, ingen manuell er programático. No crea un new contexto de formateo por sí mismo; si necesitas aislar el flujo (como haría auto/scroll/skjult), combínalo con display: flow-root. Úsalo cuando quieras un corte tajante sin scroll ni "resquicios".

• blainnholdet er registrert og 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 inntrykk.

• autolik en skriftrull, men solo añade barras cuando son necesarias. Si el contenido cabe, el resultado visual se aproxima a visible, pero el elemento ya actúa como contenedor de desplazamiento y además etablere en ny kontekst for 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 dimensjoner, el contexto de formateo, la interacción entre ejes, la impresión y el soporte desplazamiento programático.

Para que el desbordamiento vertical tenga efecto real, el bloque debe tener altura (høyde) eller altura máxima (maks-høyde) definidas; si trabajas en términos lógicos, usa blokkstørrelse eller maks blokkstørrelse. Para escenarios dinámicos, aprende en obtener la altura de un elemento. En el eje horisontal ocurre lo propio con bredde/maks. bredde o innebygd størrelse/maks. innebygd størrelse; otra opción para forzar el desbordamiento en línea es mellomrom: nowrap.

Al elegir cualquier valor distinto de synlig og klipp para overløp/overløp-y, el elemento skape en ny kontekst for 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 et utkast y en el otro usas un valor que no sea synlig ni klipp, ese synlig faktisk som autoAsimismo, si pones klipp ut et eje y en el otro no es synlig ni klipp, el klippet blir skjult; conviene conocerlo for evitar resultados inesperados.

En la práctica diaria, mucha gente observa que al aplicar bla eller automatisk og utkast, elementet blir en rullebeholder 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.

Eksempel rápido: fijar la altura y activar el bla vertikalt

Una demostración típica består av en acotar la altura de un bloque de texto y permitir que el exceso se deplace 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 */
}

Finn ut detaljene: overflow-x: skjult komplementært ... para impedir que vibraciones de layout, sombras o pseudo-elementos provoquen una barra horizontal indeseada.

Kontroller og desplazamiento med JavaScript

Cuando el contenedor es desplazable (automatisk, rull eller inkludert skjult), 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 interiør 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 excepción explícita: si usas overflow: klipp, brukeragenten ingen permite desplazamiento programático; El contenido fuera del borde de klipp er ikke tilgjengelig med ratón ikke desde JavaScript.

Tilgjengelighet: teclado, foco y lectores de pantalla

Un area desplazable no siempre es fokuserbar av teclado, así que el usuario que navega sin ratón puede quedarse sin forma de desplazarla. En Firefox og en Chrome 132 eller overlegen, brukere av scroll se hacen focuseables por defecto; en otros navegadores, añade tabindex="0" til containeren.

Nå, bra, si introduserer ese tabulatorstopp a ciegas, un lector de pantalla puede llegar a la región sin contexto. Para mitigarlo, asigna un rol ARIA adecuado (for eksempel role="region") og proporsjonere en antall tilgjengelige med aria-label o aria-labelledby. Un etiquetado claro mejora la navegación asistida sin sacrificar usabilidad.

Overløp-x y overløp-y: cómo se combinan

Forkortet eiendom overløp permite establecer ambos ejes a la vez con uno o dos valores; cuando especificas dos, el primero es para overflow-x og den andre for overløp. Esto facilita casos como evitar la barra horisontal a la vez que tillater bla vertikal.

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

Como recordatorio rápido, los valores disponibles for configurar el desbordamiento son: synlig, skjult, klipp, bla y autoØyenivået, overflow-x gobierna el flujo horisontal y overløp el vertikal, y puedes combinarlos según convenga.

«Klippkant» y overløp-klipp-margin

Hvis du velger overløp: klipp (o solo en el eje Y), el recorte se realiza en el denominado borde de klipp desbordamiento. Ese borde puede extenderse más allá del padding gracias a overflow-clip-margin, som godtar 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 */
}

Husk klipp ikke opprettet en ny kontekst for formatet. Si necesitas ese aislamiento (for eksempel, para gestionar flyter eller contener márgenes colapsados), kombinert klipp med skjerm: flytrot 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øyde establecida (høyde o maks-høyde) en el eje de bloque, o su equivalente lógico blokkstørrelse/maks. blokkstørrelse; si nei, el contenedor crecerá con el contenido y el desbordamiento no se activará.

En layouts horizontales (for eksempel, karuseller), definere bredde/maks. bredde o innebygd størrelse/maks. innebygd størrelse para forzar el desbordamiento en el eje X; también puedes usar mellomrom: nowrap para impedir los saltos de línea y provokar que el contenido exceda el ancho disponible.

Evitar la barra horisontal por pseudo-elementos o sombras

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

Typiske løsninger: applikasjon overflow-x: skjult en el conteneor desplazable; controla el tamaño y posición del pseudo-elemento (s. ej., con forvandle en lugar de posición absoluta si procede); o acota con klipp/klippebane Si buscas un recorte tajante. Cualquiera de estas estrategias evita el bla horisontalt indeseado uten å ofre 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 maksimal høyde for 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; }

Legg merke til det bla siempre muestra la barra vertikal, mientras que auto solo lo hace cuando el texto excede la altura. En skjult, el contenido sobrante no se ve pero sigue estando ahí; et klipp, directamente no existe una vía desplazamiento, ni si quiera con código.

Impresión y contenido desbordado

Un detalj menos conocido: con overløp: bla, algunos motores de impresión pueden acabar imprimiendo el contenido desbordado aunque no quepa en pantalla. Si tu caso de uso contempla eksporter en PDF eller papel, pruébalo y bestemme si prefieres skjult eller til og med klipp for å unngå uventede avganger.

Kompatibilitet for navegadores

Egenskapene overløp, overløp-x y overløp-y gozan de soporte sólido en los navegadores modernos desde hace muchas versjoner. El tapperhet klipp og din selskap overflow-clip-margin pertenecen a especificaciones más recientes, pero su faktisk adopsjon er omfattende 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 og Chrome 132+ los hacen focuseables por defecto; para el resto, añade tabindeks = "0" manualmente y un roll/nombre accesible for 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 og estabilidad visual. Aquí van unas pautas que funcionan muy bien en producción.

• Definer dimensjoner: sin høyde/maks-høyde o blokk-størrelse, el contenedor crecerá y no verás el efecto de overflow-y.

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

• Foretrekker automatisk rulling 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 og APIs uteles

I JavaScript, DOM-eksponeringen overløpY 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 blaTopp y blaTil(), salvo con klipp 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 tabulær hacia un elemento oculto dentro de un contenedor hidden/auto puede hacer que el navegador bla automatisk para ponerlo en vista; es una forma legítima de desplazamiento programático, util para mejorar la navegación con teclado.

Tabla mentale alternativer

For tenerlo claro de un vistazo: synlig la alt være med å si det; skjult recorta y permite scroll programático; klipp registrer og tillat ikke å bla; bla recorta pero siempre muestra barras; y auto solo muestra barras cuando procede. Y recuerda que ingen synlig/klipp opprettet formatsammenheng, vital para rendimiento con flyter.

Eksempler på kombinasjoner av ejes

Dos patrones que verás constantemente: tillate vertikal rulling sin barra horisontal, 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 */
}

Ti presenter 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 klippet faktisk som skjult.

Vanlige brukstilfeller

Moderne grensesnitt, overløp Det er uovertruffen for chatbokser, filtrepaneler, menyer, logger eller listedoser med altura. Se komplementer med cabeceras pegajosas y footers dentro del contenedor, y suele acompañarse de overflow-x: skjult for å unngå sidesperrer.

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

Vanlige feil og hvordan unngå dem

El fallo más repetido es declarar overløp uten høyde y esperar una barra que nunca llega; definere høyde o maks-høyde/blokk-størrelse. El segundo es olvidarse del eje horisontal: alltid verdi overflow-x en paralelo, sobre todo si usas sombras o pseudo-elementos.

En tredje er ikke å vurdere tilgjengelighet: contenedores desplazables sin foco de teclado o sin nombre accesible complican la vida a usuarios con lector de pantalla. Añade tabindex, rolle og aria-label cuando no sea focuseable por defecto.

Recursos relacionados

Si quieres ampliar, revisa el tutorial general de utskjæring i CSS og referansen til DOM for 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 sentcillo lograr paneles fluidos, sin barras imprevistas y con un desplazamiento suave tanto para usuarios como para scripts.