Propietat CSS overflow-y: guia completa, valors i trucs

Inici » Pitó » Propietat CSS overflow-y: guia completa, valors i trucs

Controlar com es comporta el contingut quan es ven del contingut és clau per a un disseny web limpio i usable; en aquest terreny, overflow-y en CSS manda sobre el desbordament vertical, decidint si recortar, mostrar barres de desplaçament o deixar que el contingut se'ls asome fora del quadre.

Més allá del bàsic, hay matices que canviaran per complet el resultat: certs valors activen un nou context de format, alguns permeten el desplaçament amb JavaScript i altres ho bloquejaran, i fins que hi hagi efectes colaterals que poden provocar que un contingut passi a ser “scrollable” en tots dos ejes si no es configura bé.

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

la propietat desbordament indica al navegador què fer amb el contingut que rebasa l'element pel seu vora superior i inferior. Quan un bloc té més contingut del que caben en la seva alçada definida (o màxima), aquest ajuste decideix si el contingut es recorda, es fa desplaçable o deixa visible fora del quadre.

Convé recordar la seva relació amb la seva “hermana” horitzontal: overflow-x controla els laterals dret i dret, mentre que overflow-y se centra en arriba y abajo. Y, por supuesto, la propiedad abreviada desbordar permet establir tots dos ejes a la vegada amb un o dos valors.

Sintaxi i valors admesos

En la seva forma més directa, desbordament i accepta els valors ocult, desplaçament, automàtic i visible; des d'especificacions modernes també existeix clip. Podeu declarar així:

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

Si s'utilitza l'abreviatura desbordar, pots passar un o dos valors. Amb un valor, s'aplica a tots dos ejes; amb dos valors, el primer correspon a desbordament-x (horitzontal) i el segon a desbordament (vertical):

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

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

Significat detallat de cada valor

És fàcil quedarse en la superfície, però cada paraula clau encerra un comportament específic, i algunes inclouen regles d'accessibilitat i rendiment importants.

• visible (valor per defecte): el contingut no es recorda i pot sobresalir més allá de l'àrea de padding de l'element. L'element no es converteix en contenedor de desplaçament; útil si no vol limitar el contingut, però pot provocar solapamientos amb altres components.

• ocult: el contingut es recorta en el borde del padding; no se mostran barres de desplaçament. El contingut sigue existiendo en el flux interior, però no és visible fora de l'àrea. Encara que l'usuari no pugui fer el manual de desplaçament, sí que pot desplaçar-se de forma programàtica (per exemple, amb scrollTop o desplaçant el foc), de manera que l'element es considera contingut de desplaçament.

• presillaretalla el contingut en el vora del clip de desbordament, definit per overflow-clip-marginUna diferència d'amagat, no permet desplaçament, ni manual ni programàtic. No crea un nou context de format per sí mateix; si necessitas aislar el flux (como haría auto/scroll/hidden), combínalo amb display: flow-root. Utilitzeu quan desitgeu un corte tajant sense scroll ni “resquicios”.

• desplaçarel contingut es retalla i siempre se muestran barras de desplazamiento en el eje al que aplique, haya o no desbordament real. Esta constancia evita que les barras aparezcan i desaparezcan quan el contingut fluctúa; ten en compte que, aun així, al imprimir pot que el contingut desbordat s'inclogui segons el motor d'impressió.

• cotxesimilar a un pergamí, però solo añade barras quan son necessàries. Si el contingut cabe, el resultat visual s'aproxima a visible, però l'element ja actua com a contingut de desplaçament i a més. estableix un nou context de format per motius de rendiment i reflux amb elements flotants.

Matices essencials que canvien el resultat

Hi ha cinc detalls que no convé passar per alt i que, en la pràctica, marca la diferència: les dimensions, el context de formateo, la interacció entre ejes, la impressió i el suport de desplaçament programàtic.

Per al desbordament vertical tingui efecte real, el bloc ha de tenir altura (alçada) o altura màxima (alçada màxima) definides; si treballa en termes lògics, EUA mida-de-bloc o mida-màx-de-bloc. Para escenarios dinámicos, aprende a obtenir la altura d'un element. En el eje horitzontal ocorre el propi amb amplada/amplada màxima o mida-en-línia/mida-màxima-en-línia; altra opció per forçar el desbordament en línia es espai en blanc: nowrap.

Al elegir cualquier valor distinto de visible i de presilla per overflow/overflow-y, l'element crea un nou context de format de bloc. Això evita que, per exemple, un float veí reempaquete el contingut en cada pas de scroll, algo que degradaria el rendiment al desplaçar-se.

També hi ha regles d'interacció entre els ulls que sorprenen la primera vegada: si estableix visible en un ull y en el otro usas un valor que no sea visible ni clip, ese visible actua com a cotxeAsimisme, si poses clip en un eix y en el otro no es visible ni clip, el el clip es comporta com si fos amagat; conviene conèixerlo per evitar resultats inesperats.

En la pràctica diaria, molta gent observa que al aplicar desplaçament automàtic en un eix, l'element passa a ser un contenidor de desplaçament y ciertas acciones (como pseudo-elementos que sobresalen) pueden activar també el desplaçament en l'altre eje si no es controla bé. És un comportament coherent amb l'especificació i els motors de renderitzat actuals.

Exemple ràpid: fixar l'alçada i activar el scroll vertical

Una demostració típica consisteix en acotar l'alçada d'un bloc de text i permetrà que l'excés es desplace verticalment. En aquest cas, desbordament-y: automàtic añade la barra solo quan faci 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 */
}

Fixeu-vos en detall: desbordament-x: complement ocult a desbordament-y per impedir que vibracions de layout, ombres o pseudo-elements provoquen una barra horitzontal indeseada.

Control i desplaçament amb JavaScript

Quan el contenedor és desplaçable (auto, scroll o inclòs hidden), pots moure el contingut del codi amb propietats i mètodes estàndard com Element.scrollTop y Element.scrollTo(). Això permet, per exemple, portar el foc visual a un ancla interior o simular un salt al final de la llista.

// 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' });

No hi ha una excepció explícita: si usa desbordament: clip, l'agent d'usuari no permet desplaçament programàtic; el contingut fora del borde del clip no és accessible ni amb el rató ni des de JavaScript.

Accessibilitat: teclat, foc i lectors de pantalla

Un área desplazable no siempre és enfocable per teclat, així que l'usuari que navega sense raó pot quedar-se sense forma de desplaçarla. En Firefox i en Chrome 132 o superior, els contenidors de scroll se hacen focuseables per defecto; en altres navegadors, añade tabindex="0" al contenidor.

Ara bé, si presenta aquest pestanya a ciegas, un lector de pantalla pot arribar a la regió sense context. Per mitigar-lo, assignatura un rol ARIA adequat (Per exemple, role="region") i proporciona un nombre accessible amb aria-label o aria-labelledby. Un etiquetat clar millora la navegació assistida sense sacrificar la usabilitat.

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

La propietat abreujada desbordar permet establir tots dos ejes a la vegada amb un o dos valors; quan especificas dos, el primer és para desbordament-x i el segon per desbordament. Això facilita els casos com evitar la barra horitzontal a la vegada que permet desplaçar-se verticalment.

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

Com l'enregistrament és ràpid, els valors disponibles per configurar el desbordament son: visible, ocult, presilla, desplaçar y cotxeA nivell d'ulls, desbordament-x gobierna el flux horitzontal y desbordament el vertical, i pots combinar-los segons convenga.

"Retalla la vora" i overflow-clip-margin

si tries desbordament: clip (o solo en el eje Y), el retall es realitza en el denominat borde de clip de desbordament. Ese borde pot extenderse més allá del padding gràcies a overflow-clip-margin, que accepta una longitud per deixar “aire” abans de recortar.

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

Recorda que clip no crea un nou context de format. Si necessitas aquest aïllament (per exemple, per gestionar floats o contener màrgenes col·lapsats), combina clip amb pantalla: arrel de flux i així aconsegueix el mateix efecte de contenció que aporta auto/scroll/hidden.

Cuándo necessitas dimensions explícites

Per a la retallada o el scroll apareixen de veritat, l'element necessita una alçada establerta (height o max-height) en l'eje de bloc, o el seu equivalent lògic mida-de-bloc/mida-màxima-de-bloc; si no, el contenedor creixerà amb el contingut i el desbordament no s'activarà.

En layouts horizontales (per exemple, carouseles), define amplada/amplada màxima o mida-en-línia/mida-màxima-en-línia per forçar el desbordament en el eje X; també pots usar espai en blanc: nowrap per impedir els salts de línia i provocar que el contingut exceda l'ancho disponible.

Evitar la barra horitzontal per pseudo-elementos o sombras

Un cas real molt habitual: un pseudo-element ::after que flota hacia la derecha, o una sombra alargada, sobrepasa el contenedor y activa la barra horitzontal en un element que ja té overflow-y. Això succeeix perquè, al convertir-se en contenidor de scroll, el motor considera l'àrea desbordada per a l'execució.

Solucions típiques: desbordament d'aplicació-x: ocult en el contenedor desplaçable; controla el tamany i la posició del pseudo-element (p. ej., con transformar en lloc de posició absoluta si procede); o acota con retall/traçat de retall si busca un recorte tajante. Cualquiera d'aquestes estratègies evita el scroll horitzontal indeseado sense sacrificar la vertical.

Demostració de resultats amb cada valor

El següent bloc mostra com canvia la visibilitat i les barres amb els diferents valors de desbordament, tots amb la mateixa alçada màxima per forçar el desbordament vertical:

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

observa que scroll siempre mostra la barra vertical, mentre que auto només ho fa quan el text excedeix l'alçada. En hidden, el contingut sobrante no se ve pero sigue estando ahí; en clip, directament no existeix una via de desplaçament, ni si vol amb codi.

Impressió i contingut desbordat

Un detall menys conegut: amb desbordament: desplaçament, alguns motors d'impressió poden acabar imprimint el contingut desbordat encara que no quepa en pantalla. Si el teu cas d'ús contempla exportar un PDF o paper, provar i decidir si prefereixes ocult o fins i tot presilla per evitar sortides inesperades.

Compatibilitat entre navegadors

les propietats desbordament, desbordament-x y desbordament-y gaudeix de suport sòlid en els navegadors moderns des de fa moltes versions. El valor presilla i la seva companya overflow-clip-margin pertanyen a especificacions més recents, però el seu l'adopció actual és àmplia i crec amb cada llançament; comprueba les matrius de compatibilitat si apunta a entorns antics.

En quant al foc de contenedors desplaçables, recordeu la peculiaritat: Firefox i Chrome 132+ los hacen focuseables per defecto; para el resto, añade tabindex="0" manualment i un rol/nombre accessible per a una experiència consistent.

Buenas prácticas de maquetación

No tot és posar una barra i llista: combina propietats per prevenir desplaçaments indeseados i guanyar en estabilitat visual. Aquí van unas pautas que funcionan molt bé en producció.

• Definir dimensions: sin height/max-height o block-size, el contingut creixerà i no veurà l'efecte de desbordament-y.

• Afegeix desbordament-x: ocult quan uses overflow-y, salvo que necesites belt-and-braces horizontales. Evitas barres laterals provocades per sombras, bordes o pseudo-elementos.

• Prefereixo desplaçar-me automàticament davant si quieres que la barra aparezca solo cuando haga falta, y scroll si busca dimensions estables de layout sin “saltos” per aparició/desaparició de scrollbars.

• Usa clip quan vols retallar dur (sin rutas de desplaçament), i combínalo amb display: flow-root si necesitas contención del flujo.

Relació amb el DOM i les API útils

En JavaScript, l'exposició del DOM desbordamentY com a propietat d'estil, i podeu inspeccionar/ajustar l'estat de l'element: element.style.overflowY y getComputedStyle(element).overflowY. A més, per desplaçar continguts usa desplaçar-se a la part superior y desplaçar-se a(), salva amb clip on no hay scroll de cap tipus.

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

Si treballa amb enllaços interns, recordeu-ho tabular hacia un element oculto dins d'un contingut ocult/auto pot fer que el navegador desplaceu automàticament per posar-lo en vista; és una forma legítima de desplaçament programàtic, útil per millorar la navegació amb el teclat.

Taula mental ràpida d'opcions

Per tenir clar d'un vistazo: visible deixa que tot sobresalga; ocult recorta i permet scroll programático; presilla retall i no permet desplaçament; desplaçar recorda pero siempre muestra barras; y cotxe solo mostra barras cuando procede. Y recorda que no visible/clip crea context de formateo, vital per al rendiment amb floats.

Exemples de combinació per ejes

Dos patrons que veuran constantment: permetre el desplaçament vertical sense barra horitzontal, i recortar en un eje amb clip mentre l'altre es desplaça automàticament.

/* 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 les regles d'interacció: si un eje usa un valor distint de visible/clip i l'altre pone visible, aquest visible se elevació de cotxe. Amb el clip succeeix algo parit: si l'altre no és visible ni el clip, el el clip actua com a ocult.

Casos dús habituals

En interfícies modernes, desbordament és imprescindible per a xatboxes, panells de filtres, menús llargs, logs o listados amb altura acotada. Se complementa amb capçaleres pegajosas i peus de pàgina dins del contenedor, i acompanyar-se de desbordament-x: ocult per evitar barres laterals.

En dissenys amb targetes o modals, podeu alternar entre cotxe (per a no mostrar la barra si no fa falta) y desplaçar (per estabilizar l'ancho quan apareixeria la barra durant la càrrega). Si el modal ha de registrar parts decoratives, presilla evita interaccions i estalvis càlculs.

Errors comuns i com evitar-los

El fallo més repetit és declarar desbordament sense alçada y esperar una barra que nunca llega; definir alçada o alçada màxima/mida del bloc. El segon és olvidar-se del eje horitzontal: sempre valora overflow-x en paral·lel, sobre tot si usas sombras o pseudo-elements.

Un tercer no es considera accessibilitat: contenedors desplaçables sense foc de teclat o sense nombre accessible complica la vida dels usuaris amb el lector de pantalla. Añade tabindex, rol i aria-label quan no sea focuseable per defecto.

Recursos relacionats

Si vols ampliar, revisa el tutorial general de desbordament en CSS i la referència del DOM per a desbordament en elements. Aquestes pàgines cubren des de fonaments fins a peculiaritats, fins d'implementació i compatibilitat.

Dominar overflow-i implica entendre què recorta, cuándo se desplaça, com interactúa amb l'oposició i quin efecte té en el context de format; amb les pautes de dimensions, accessibilitat i combinació amb overflow-x, és senzill aconseguir panells fluids, sense barres imprevistes i amb un desplaçament suau tant per als usuaris com per als scripts.