Proprietatea CSS overflow-y: ghid complete, values ​​and trucos

Acasă » Piton » Proprietatea CSS overflow-y: ghid complete, values ​​and trucos

Controlar cum se comporta el conținut atunci când se vinde conținutul este cheie pentru un design web limpio și utilizabil; în ese teren, overflow-y en CSS manda sobre el desbordamiento vertical, decidendo si recortar, show barras de desplazamiento o dejar que el contenido se asome fuera del cuadro.

Más allá de lo básico, hay matices, care schimbă complet rezultatul: ciertas valori activan un nou context de format, unele permit deplasarea cu JavaScript și altele se blochează, și până există efecte colaterale care pot provoca ca un conținut să paseze a fi „scrollable” în ambele ejes și nu se configurează bine.

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

Proprietatea revărsare indica al browser-ului ce face cu conținutul că rebasa elementul por su marginea superioară și inferioară. Cuando un bloc tiene más contenido del que cabe en su altura definida (o máxima), este ajuster decide si el conținut se recorta, se hace desplazable sau se deja vizibil fuera del recuadro.

Vă recomandăm să vă amintiți relația cu „hermana” orizontală: overflow-x controla los laterales izquierdo y derecho, mientras que overflow-y se centra en arriba y abajo. Y, por supuesto, la proprietate abreviada revărsare permite stabilirea ambelor eje la o dată cu unul sau două valori.

Sintaxie și valori admise

În forma sa cea mai directă, preaplin și acceptă valorile ascuns, scroll, auto y vizibil; desde specificaciones modernas también existe clip. Puteți declara așa:

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

Dacă folosiți abrevierea revărsare, poți trece una sau două valori. Con un valor, se aplica a ambilor ejes; cu dos valori, el primero corespund a overflow-x (orizontal) și al doilea revărsare (vertical):

/* 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, pero cada palabra clave encierra un comportament specific, și unele includ reguli de accesibilitate și performanță importante.

• vizibil (valoare prin defect): el conținut nu se recorta și poate sobresalir mai mult allá del área de padding del element. Elementul no se convierte en contenedor de desplazamiento; útil și nu quieres limitar el conținut, pero poate provoca solapamientos cu alte componente.

• ascuns: el contenido se recorta en el borde del padding; no se muestran barras de desplazamiento. El conținut sigue existente în fluxul interior, dar nu este vizibil în afara zonei. Deși utilizatorul nu poate face manualul de defilare, sí poate desplazarse de forma programatică (de exemplu, cu scrollTop sau desplazando el foco), de modo că el element se consideră conținut de deplasare.

• agrafă de birou: scurtează conținutul din marginea clipului de preaplin, definit de overflow-clip-marginO diferență de ascuns, nu permite desplazamiento, ni manual ni programático. Nu creează un nou context de formate 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”.

• derulaţiconținutul este scurtat și siempre se muestran barras de desplazamiento en el eje al que aplique, haya o no desbordamiento real. Esta constancia evita que las barras aparezcan si desaparezcan cand el contenido fluctúa; ten en cuenta que, aun así, al imprima poate că el conținut desbordado se include según el motor de impresión.

• Autosimilar unui sul, dar solo añade barras cuando son necesarias. Dacă el conținut poate, rezultatul vizual se aproximează la vizibil, dar elementul acționează ca conținut de deplasare și în plus un nou context de formateo pentru motive de performanță și reflux cu elemente flotante.

Maticele esențiale că schimbă rezultatul

Hay cinco detalles que nu conviene trece por alto și que, în practica, marcan la diferență: las dimensions, el context de formateo, la interacción între ejes, la imprimare și el suport de desplazamiento programático.

Para que el desbordamiento vertical are efect real, el bloc trebuie să aibă înălțime (înălțime) sau înălțime maximă (înălțime maximă) definite; si trabajas en términos lógicos, USA dimensiune-bloc sau dimensiune-max-bloc. Para escenarios dinámicos, aprende a obtener la altura de un elemento. En el eje horizontal se produce lo propio con lățime/lățime maximă o dimensiune-inline/dimensiune-inline-max; otra opțiune pentru a forța desbordarea în linia es spațiu alb: nowrap.

Al elegir cualquier valor distincto de vizibil şi agrafă de birou pentru overflow/overflow-y, el elemento crea un nou context de formateo de bloc. Este evita că, de exemplu, un float vecino reempaquete el conținut în fiecare pas de scroll, algo care degradaría randamentul la deplasare.

Există și reguli de interacțiune între ei, care surprind la prima dată: și stabilește vizibil pe un ochi y en el otro usas un valor que no sea visible ni clip, ese acționează vizibil ca mașinaAsimism, dacă puneți clip într-un ochi y en el otro no es visible ni clip, el clipul se comportă ca ascuns; conviene conocerlo para evitar rezultate inesperados.

În practica diaria, mucha gente observa que al aplica derulați automat într-un ochi, elementul trece la a fi unul container de rulare și ciertas acțiuni (como pseudo-elementos que sobresalen) pot activar también el desplazamiento en el otro eje si nu se controla bine. Este un comportament coerent cu specificația și motoarele de redare actuale.

Exemplu rapid: fixați înălțimea și activați scroll vertical

O demonstrație tipică constă în atingerea înălțimii unui bloc de text și permite ca el exces să se deplaseze vertical. În acest caz, 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 */
}

Fixați în detaliu: overflow-x: complement ascuns al overflow-y pentru a împiedica vibrațiile de layout, umbrele sau pseudo-elementele provoacă o bară orizontală indeseada.

Control și deplasare cu JavaScript

Cuando el contenedor es desplazable (auto, scroll sau inclusiv hidden), poți muta conținutul prin cod cu proprietăți și metode standard ca Element.scrollTop y Element.scrollTo(). Esto permite, de exemplu, să conducă focul vizual într-un ancla interior sau simularea unui salt al finalului listei.

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

Există o excepție explicită: dacă usa overflow: clipagentul de utilizator nu permite desplazamiento programático; el conținut fuera del borde de clip nu este accesibil ni cu el ratón ni desde JavaScript.

Accesibilitatea: teclado, foco și lectores de pantalla

Un área desplazable no siempre es focalizabil de pe tastatură, așa că el utilizatorul care navighează fără ratón poate rămâne fără forma de desplazarla. În Firefox și în Chrome 132 sau superior, conținutul de scroll se hacen focuseables por defecto; en otros navegadores, añade tabindex="0" la recipient.

Acum bine, introduce ese tabulator a ciegas, un lector de pantalla poate ajunge la regiune sin context. Para mitigarlo, asigna un rol ARIA adecvat (de exemplu, role="region") și oferă un nume accesibil cu aria-label o aria-labelledby. Un etichetat clar a îmbunătățit navigația asistată fără a sacrifica utilizabilitatea.

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

Proprietatea abreviată revărsare permite stabilirea ambelor eje a la o dată cu unul sau două valori; când specificas dos, el primero es para overflow-x iar al doilea pentru revărsare. Acest lucru facilitează cazurile pentru a evita bara orizontală când permite derularea verticală.

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

Cum înregistrarea rapidă, valorile disponibile pentru a configura desfășurarea fiului: vizibil, ascuns, agrafă de birou, derulaţi y AutoLa nivelul ochilor, overflow-x gobierna el flux horizontal y revărsare el vertical, și poți combina în funcție de convenție.

„Clip edge” și overflow-clip-margin

Dacă alegeți preaplin: clip (o solo en el eje Y), el recorte se realiza en el denominado borde de clip de desbordamiento. Este marginea poate extinde mai mult allá del padding, merci a overflow-clip-margin, care acceptă una lungime para dejar “aire” antes de recortar.

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

amintiți-vă că clip nu crea un nou context de formateo. Si necesitas ese aislamiento (de exemplu, pentru a gestiona floats sau contener márgenes colapsados), combina clip cu afișare: rădăcină de flux y así obține el același efect de contención care aduce auto/scroll/hidden.

Cuándo necesitas dimensions explícitas

Pentru că el recorte sau el scroll apare de fapt, el element necesita una înălțime stabilită (height o max-height) en el eje de bloc, o su equivalente lógico dimensiune-bloc/dimensiune-max-bloc; si no, el contenedor crecerá cu el conținut și el desbordamiento no se activará.

În layouts horizontales (de exemplu, caruseles), definește lățime/lățime maximă o dimensiune-inline/dimensiune-inline-max para forzar el desbordamiento en el eje X; poti folosi de asemenea spațiu alb: nowrap pentru a împiedica los salturi de linie și a provoca că el conținut exceda el ancho available.

Evitar la barra horizontal por pseudo-elementos o sombras

Un caso real muy habitual: un pseudo-elemento ::după que flota hacia la derecha, o una sombra alargada, sobrepasa el contenedor y bara orizontală activă en un element que ya tiene overflow-y. Se întâmplă pentru că, al convertise în conținutul de scroll, motorul ia în considerare zona desbordată pentru eje opuesto.

Soluții tipice: aplicație overflow-x: ascuns en el contenedor desplazable; controla el dimensiunea și poziția pseudo-elementului (p. ej., con transforma în loc de poziție absoluta și procede); o acota con clip/traseu de clipping si cauta o reducere tajante. Cualquiera de estas strategii evita el scroll orizontal indeseado fără a sacrifica verticala.

Demostración de rezultate cu fiecare valoare

El următor bloc arată cum se schimbă vizibilitatea și barele cu diferite valori de overflow-y, toate cu aceeași înălțime maximă pentru a forța desbordarea 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 asta scroll siempre muestra la bară verticală, în timp ce auto solo lo face când el texto excede la altura. En hidden, el contenido sobrante nu se ve pero sigue estando ahí; en clip, direct no existe una vía de desplazamiento, ni si quiera con code.

Impresión și conținut desbordat

Un detalle menos conocido: con depășire: derulare, unele motoare de imprimare pueden terminar imprimiendo el contenido desbordado aunque no quepa en pantalla. În cazul în care utilizați, puteți exporta un PDF sau un document, verificați și decideți dacă preferați ascuns sau incluse în agrafă de birou pentru a evita plecările neașteptate.

Compatibilitate între navigatori

Proprietățile revărsare, revărsare-x y revărsare-y beneficiază de suport solid în navigatorii moderni din multe versiuni. El valor agrafă de birou și tovarășa ta overflow-clip-margin pertenecen a specificaciones más recientes, pero su adopția actuală este amplă y crece con cada lanzamiento; comprueba las matrices de compatibilidad si se apropie de entornos antiguos.

En cuanto al foco de contenedores desplazables, recuerda la particularidad: Firefox și Chrome 132+ los hacen focuseables por defecto; para el resto, añade tabindex=”0″ manualmente și un rol/nombre accesibil pentru o experiență consistentă.

Buenas prácticas de maquetación

Nu tot este pus o bară și listo: combina proprietăți para a preveni desplazamientos indeseados y ganar en estabilidad visual. Aquí van unas pautas, care funcționează foarte bine în producție.

• Definiți dimensiunile: sin height/max-height o block-size, el contenedor crecerá și nu verás el efect de overflow-y.

• Adăugați overflow-x: ascuns cuando folosește overflow-y, salvo que necesites belt-and-braces horizontales. Evitas barras laterales provocadas por sombras, bordes o pseudo-elementos.

• Prefer derularea automată în față si quieres que la barra aparezca solo cuando haga falta, y scroll si cauta dimensiuni stabile de layout sin “saltos” por aparitie/desaparición de scrollbars.

• Usa clip cuando quieras reduce duro (sin rutas de desplazamiento), y combínalo cu display: flow-root și necesitas contención del flujo.

Relația cu DOM și API-urile utile

În JavaScript, expunerile DOM revărsare ca proprietate de stil, și puteți inspecciona/ajustar starea elementului: element.style.overflowY y getComputedStyle(element).overflowY. În plus, pentru a deplasa conținutul SUA scrollTop y deruleazăLa(), salvo cu clip unde no hay scroll de niciun tip.

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

Si lucrează cu linkurile interne, recuerda que tabular hacia un elemento oculto dentro de un contenedor hidden/auto puede hacer que el navegador derulează automat para ponerlo en vista; este o formă legală de deplasare programatică, utilă pentru îmbunătățirea navigării cu tastatura.

Tabla mentală rapidă de opțiuni

Pentru a avea o vedere clar: vizibil lasă totul peste cap; ascuns recorda și permite scroll programático; agrafă de birou înregistrare și nu permite derularea; derulaţi recorda pero siempre muestra barras; y Auto solo muestra barras cuando procede. Y recuerda que no visible/clip create context de formateo, vital pentru randamentul cu floats.

Exemple de combinație cu ei

Doi patroni care vor fi constant: permite derularea verticală sin barra horizontal, y recortar en un eje con clip while el otro se deplasa automat.

/* 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 visible/clip y el otro pone visible, ese visible se ridică o mașină. Con clip success algo parecido: si el otro eje nu este vizibil ni clip, el clipul acționează ca ascuns.

Cazuri comune de utilizare

În interfețe moderne, revărsare este obligatoriu pentru chatbox-uri, panouri de filtre, meniuri lungi, jurnalele sau listados cu înălțimea acoperită. Se complementa cu cabeceras pegajosas și footers dentro del contenedor, și suele acompañarse de overflow-x: ascuns pentru a evita barele laterale.

În design-uri cu carduri sau modale, puteți alterna între Auto (para nu arata la barra si nu face falta) y derulaţi (para estabilizar el ancho cuando aparecería la barra durante la carga). Si el modal trebuie să încorporeze părți decorative, agrafă de birou evitați interacțiuni și economisi calcule.

Greșeli frecvente și cum să le evitați

El fallo más repetido es declarar preaplin fără înălțime y esperar una barra que nunca llega; definiți înălțimea o înălțime maximă/dimensiunea blocului. El segundo este olvidarse del eje horizontal: mereu valorează overflow-x en paralelo, sobre todo si usas sombras sau pseudo-elementos.

Un al treilea nu este luat în considerare accesibilitate: contenedores desplazables sin foco de teclado sau sin nombre accesibil complicat la viata a utilizatorilor cu lector de ecran. Añade tabindex, rol și aria-label când nu sea focuseable por defecto.

Resurse corelate

Si quieres ampliar, revizuiți tutorialul general de desbordare în CSS și referința la DOM pentru overflowY în elemente. Estas páginas cubren desde fundamentos hasta particularidades fines de implementación și compatibilidad.

Dominar overflow-y implica înțelegere qué recorta, cuándo se desplaza, cómo interactúa cu el eje opuesto și ce efect are în contextul de formateo; cu las pautas de dimensiuni, accesibilitate și combinație cu overflow-x, este simplu să realizeze paneles fluidos, sin bars imprevistas și cu un desplazamiento suave atât pentru utilizatori ca pentru scripts.