Proprietà CSS overflow: guida completa, valori e trucchi

Casa » Python » Proprietà CSS overflow: guida completa, valori e trucchi

Controllare come si comporta il contenuto quando viene venduto il contenitore è chiave per un design web pulito e utilizzabile; in questo terreno, overflow-y en CSS manda sobre el desbordamiento vertical, decidendo di recortar, mostrar barras de deplazamiento o dejar que el contenido se asome fuera del cuadro.

Di più alla base, ci sono i programmi che cambieranno per completare il risultato: alcuni valori attivano un nuovo contesto formativo, alcuni consentono lo spostamento con JavaScript e altri lo bloccano, e ci sono effetti collaterali che possono far sì che un contenitore diventi “scorribile” in entrambi gli occhi se non è configurato bene.

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

La proprietà traboccante indica al navegador qué hacer con el contenido que rebasa el elemento por su borde superior e inferior. Quando un blocco ha più contenuti di quelli che si trovano nella sua altezza definita (o massima), este ajuste decide se il contenuto è registrato, se hace desplazable o se deja visibile fuori dal raccoglitore.

Con registrar su relación conviene su “hermana” orizzontale: overflow-x controla los laterales izquierdo y derecho, mentre l'overflow si concentra in arrivo e in basso. Sì, por supuesto, la propiedad abreviada traboccare permetti di stabilire ambos ejes a la vez con uno o due valori.

Sintaxis y valores admitidos

En su forma más directa, overflow-y acepta los valores nascosto, scorrimento, automatico e visibile; desde specifiche modernes esiste anche clip. Puoi dichiararla così:

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

Si usas la abreviatura traboccare, puedes pasar uno o dos valores. Con un valore, si applica ad ambos ejes; con dos valores, il primo corrisponde a overflow-x (orizzontale) y el segundo a traboccante (verticale):

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

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

Significativo dettaglio di ogni valore

È facile depositarsi sulla superficie, ma ogni parola chiave indica un comportamento specifico, e alcuni includono norme di accessibilità e prestazioni importanti.

• visibile (valor por defecto): il contenuto non è riportato e può essere spostato più lontano dell'area di imbottitura dell'elemento. L'elemento non convertirsi in un contenitore di spostamento; utile se non vuoi limitare il contenuto, ma puoi provocare conforti con altri componenti.

• nascosto: il contenuto è raccolto nel bordo dell'imbottitura; non si vedono le barre di spostamento. Il contenuto continua ad esistere nel flusso interno, ma non è visibile fuori dall'area. Anche se l'utente non può fare scorrere il manuale, si può spostare dal formato programmatico (ad esempio, con scrollTop o spostando il fuoco), in modo che l'elemento se consideri un contenitore di spostamento.

• clip: recorta el contenido en el bordo della clip di troppo pieno, definito da overflow-clip-margin. A diferencia de hidden, non consentire lo spostamento, né il manuale né il programma. Non creare un nuovo contesto formativo per sé stesso; se è necessario aislar el flujo (come haría auto/scroll/hidden), combinalo con display: flow-root. Usalo quando vuoi un corte tajante sin scroll ni “resquicios”.

• scorrere: el contenido se recorta y siempre se muestran barras de deplazamiento en el eje al que aplique, haya o no desbordamiento real. Questa costanza evita che le barre appaiano e scompaiano quando il contenuto fluttua; Tenete presente che, così, al momento della stampa è possibile che il contenuto scaricato sia incluso secondo il motore di stampa.

• auto: simile a una pergamena, pero solo añade barras cuando son necesarias. Se il contenuto è capo, il risultato visivo è quasi visibile, ma l'elemento è già un contenitore di spostamento e inoltre stabilisce un nuovo contesto formativo per motivi di rendimento e reflusso con elementi galleggianti.

Materie essenziali che modificano il risultato

Ci sono cinque dettagli che non conviene passare in alto e che, in pratica, segnare la differenza: le dimensioni, il contesto del formato, l'interazione tra gli occhi, la stampa e il supporto di spostamento programmatico.

Per far sì che lo spostamento verticale abbia un effetto reale, il blocco deve essere tenuto altura (altezza) o altura máxima (altezza massima) definite; si lavora in termini logici, USA dimensione-blocco o dimensione-massima-del-blocco. Per scenari dinamici, impara a ottenere l'altezza di un elemento. En el eje orizzontale ocurre lo propio con larghezza/larghezza massima o dimensione in linea/dimensione massima in linea; un'altra opzione per forzare lo sbordamento in linea è spazio bianco: nowrap.

Al elegir cualquier valor distinto de visibile e clip para overflow/overflow-y, el elemento crea un nuovo contesto di formato di blocco. Ciò evita che, ad esempio, un galleggiante accanto ricompatti il ​​contenuto in ogni passaggio di scorrimento, poiché potrebbe degradare le prestazioni allo spostamento.

Ci sono anche regole di interazione tra gli occhi che sorprendono la prima volta: se stabili visible en un eje y en el otro usas un valor que no sea visibilità ni clip, ese visible actúa como auto. Asimismo, si pones clip en un eje y en el altro non è visibile ni clip, el clip se comporta como hidden; conviene conoscerlo per evitare risultati insperati.

Nella pratica quotidiana, molte persone osservano cosa applicare scroll o auto en un eje, el elemento pasa a ser un contenitore scorrevole y ciertas acciones (come pseudo-elementos que sobresalen) pueden attivare anche lo spostamento nell'altro eje si no se controla bien. È un comportamento coerente con le specifiche e i motori di resa attuali.

Esempio rapido: impostare l'altezza e attivare lo scorrimento verticale

Una dimostrazione tipica consiste nell'avvicinare l'altezza di un blocco di testo e consentire che l'eccesso si sposti verticalmente. In questo caso, overflow-y: automatico 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 */
}

Fíjate en el detalle: overflow-x: complemento nascosto a overflow-y per evitare che vibrazioni del layout, ombre o pseudo-elementi provochino una barra orizzontale indeseada.

Controllo e spostamento con JavaScript

Quando il contenitore è spostabile (auto, scorrimento o anche nascosto), puoi spostare il contenuto del codice con proprietà e metodi standard come Element.scrollTop y Element.scrollTo(). Ciò consente, ad esempio, di sollevare il fuoco visivo in un'ancla interna o simulare un salto alla fine della 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' });

C'è un'eccezione spiegata: si usas overflow: clip, el agente de usuario non è consentito lo spostamento programmatico; il contenuto fuori dal bordo della clip non è accessibile né con il ratón né da JavaScript.

Accessibilità: teclado, fuoco e lettori dello schermo

Un'area sprecabile non è sempre focuseable por teclado, quindi l'utente che naviga senza motivo può perdersi senza forma. In Firefox e Chrome 132 o superiore, i contenitori di scorrimento se diventa focalizzabile per difetto; in altri navigatori, añade tabindex="0" al contenitore.

Ahora bien, si introduces ese tabulazione a ciegas, un lector de pantalla puede llegar a la región sin contexto. Per mitigarlo, assegnane uno rol ARIA adecuado (per esempio, role="region") y proporciona un nome accessibile con aria-label o aria-labelledby. Un'etichetta chiara migliora la navigazione assistita senza sacrificare l'usabilità.

Overflow-x e overflow-y: come combinarli

La propiedad abreviada traboccare permite stabilicer ambos ejes a la vez con uno o dos valores; quando ne sono specificate due, il primo è para overflow-x e il secondo per traboccante. Questo facilita i casi in cui si evita la barra orizzontale quando si consente lo scorrimento verticale.

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

Come registrazione rapida, i valori disponibili per configurare lo spostamento sono: visibile, nascosto, clip, scorrere y auto. A nivel de ejes, overflow-x gobierna el flujo orizzontale y traboccante el vertical, y puedes combinarlos según convenga.

“Clip edge” e overflow-clip-margin

Se si sceglie trabocco: clip (o solo en el eje Y), el recorte se realiza en el denominado bordo della clip di scarico. Questo bordo può estendersi ulteriormente all'imbottitura grazie a overflow-clip-margin, que acepta una lunghezza para dejar “aire” antes de recortar.

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

Ricordare clip non crea un nuovo contesto di formato. Se è necessario questo isolamento (ad esempio, per gestire float o contenitori di dimensioni colapsados), combina clip con visualizzazione: flusso-radice e così si ottiene lo stesso effetto di contenuto che porta auto/scroll/hidden.

Cuándo necesitas dimensioni explícitas

Per far sì che la registrazione o lo scorrimento appaiano veri, l'elemento ne richiede uno altura establecida (altezza o altezza massima) nell'angolo del blocco o nella logica equivalente dimensione-blocco/dimensione-massima-blocco; in caso contrario, il contenitore crescerà con il contenuto e lo scarico non si attiverà.

Nei layout orizzontali (ad esempio, caroselli), definire larghezza/larghezza massima o dimensione in linea/dimensione massima in linea para forzar el desbordamiento en el eje X; puoi anche usarlo spazio bianco: nowrap per impedire i salti di linea e provocare che il contenuto superi l'ancora disponibile.

Evitare la barra orizzontale per pseudo-elementi o ombre

Un caso real muy habitual: un pseudo-elemento ::Dopo que flota hacia la derecha, o una sombra alargada, sobrepasa el contenedor y activa la barra horizontal in un elemento che hai già troppopieno. Esto sucede porque, al convertirse en contenedor de scroll, el motor considera el área desbordada para el eje opuesto.

Soluzioni tipiche: aplica overflow-x: nascosto nel contenitore desplazable; controla el tamaño y posición del pseudo-elemento (p. ej., con trasformare in posizione assoluta (se si procede); o acota con clip/percorso di ritaglio si cercas un recorte tajante. Qualunque cosa di queste strategie evitare lo scorrimento orizzontale indeseado sin sacrificar el vertical.

Dimostrazione dei risultati con ogni valore

Il blocco successivo mostra come cambiare la visibilità e le barre con i diversi valori di overflow, tutto con la misma altura máxima per forzare lo sbandamento verticale:

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

Notare che scroll siempre muestra la barra vertical, mentre auto solo lo fa quando il testo supera l'altezza. En hidden, el contenido sobrante no se ve pero sigue stando ahí; in clip, direttamente non esiste una via di spostamento, né si quiera con codice.

Stampa e contenuto rimossi

Un dettaglio meno conosciuto: con overflow: scorrimento, alcuni motori di stampa pueden acabar imprimiendo el contenido desbordado anche se non ho fame sullo schermo. Se il tuo caso d'uso prevede di esportare un PDF o un foglio di carta, provalo e decidi se preferisci nascosto o anche clip per evitare salite insperate.

Compatibilità tra i navigatori

Le proprietà trabocco, trabocco-x y trabocco-y gozan de soporte sólido en los navegadores modernos desde hace muchas versionis. El valore clip e la sua compagna overflow-clip-margin appartengono alle specifiche più recenti, ma su adopción actual es amplia y crece con cada lanzamiento; comprueba las matrici de compatibilidad si apuntas a entornos antiguos.

En cuanto al foco de contenedores desplazables, recuerda la peculiaridad: Firefox e Chrome 132+ los hacen focuseables por defetto; para el resto, añade indice di tabulazione=”0″ manualmente e un ruolo/nome accessibile per un'esperienza coerente.

Buenas prácticas de maquetación

No todo es poner una barra y listo: combina propiedades para prevenire spostamenti imprevisti e guadagna stabilità visiva. Ecco alcuni passaggi che funzionano molto bene in produzione.

• Definisci le dimensioni: sin Height/Max-Height o Block-Size, il contenitore aumenterà e non vedrà l'effetto di overflow-y.

• Añade overflow-x: hidden cuando usa overflow-y, salvo que necesites belt-and-bretelles orizzontali. Evitas barre laterali provocate da ombre, bordi o pseudo-elementi.

• Prefiere auto frente a scroll si vuole che la barra appaia solo quando haga falta, e scorrere si cerca dimensioni stabili del layout senza “salti” per l'apparizione/scomparsa delle barre di scorrimento.

• Usa clip cuando quieras recorte duro (sin rutas de desplazamiento), e combinato con display: flow-root se necesitas contención del flujo.

Relazione con il DOM e le API utili

In JavaScript, l'esposizione DOM traboccare come proprietà di stile, puoi controllare/regolare lo stato dell'elemento: element.style.overflowY y getComputedStyle(element).overflowY. Inoltre, per spostare i contenuti negli Stati Uniti scrollTop y scrollTo(), salvo con clip dove 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' });
}

Se lavori con allacciamenti interni, ricordati che tabulare hacia un elemento nascosto all'interno di un contenitore nascosto/automatico è possibile far sì che il navigatore scorrere automaticamente para metterlo in vista; è una forma legittima di spostamento programmatico, utile per migliorare la navigazione con il teclado.

Tabella rapida delle opzioni mentali

Per averlo chiaro da una vista: visibile deja que todo sobresalga; nascosto registrazione e permesso di scorrimento programmatico; clip recorta y no permitte scroll; scorrere recorta pero siempre muestra barras; sì auto solo muestra barras cuando procede. E lo ricordo nessun visibile/clip crea contesto di formato, vitale per prestazioni con galleggianti.

Esempi di combinazione di ejes

Due patroni che verranno costantemente: consentire lo scorrimento verticale sin barra orizzontale, e registra su un eje con clip mentre l'altro si sposta 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 */
}

Dieci presenti le regole di interazione: se un eje usa un valore distinto di visibile/clip e l'altro pone visibile, questo visibile è eleva a auto. Con clip succede algo parecido: si el otro eje no es Visible ni clip, el clip actúa como hidden.

Casi d'uso comuni

Nelle interfacce moderne, traboccante è imprescindibile per chatbox, pannelli di filtro, menu ampi, registri o elenchi ad alta risoluzione. Se complementa con cabeceras pegajosas y footers inside del contenitore, y suele accompañarse de overflow-x: nascosto para evitar barras laterales.

Nei modelli con schede o modalità è possibile alternare tra loro auto (para no mostrarer la barra si no hace falta) y scorrere (para stabilizar el ancho cuando aparecería la barra durante la carga). Se la modalità deve essere quella di tagliare le parti decorative, clip evitare interazioni e evitare calcoli.

Errori comuni e come evitarli

Il fallimento più ripetuto è stato dichiarato overflow-y sin altura e aspettar una barra che non arriva mai; definire l'altezza o l'altezza massima/dimensione del blocco. Il secondo è oscurato dall'uccello orizzontale: siempre valora overflow-x in parallelo, su tutto se si usano ombre o pseudo-elementi.

Un tercero es no considerar accessibilità: contenedores desplazables sin foco de teclado o sin nombre accesible complican la vida a usuarios con lector de pantalla. Anade tabindex, ruolo y aria-label cuando no sea focuseable por defetto.

Risorse correlate

Se vuoi ampliare, rivedi il tutorial generale de desbordamiento en CSS y la referencia del DOM per overflowY negli elementi. Queste pagine contengono basi con peculiarità di implementazione e compatibilità.

Dominar overflow-y implica entender cosa racconta, quando si sposta, come interagisce con l'oggetto e quale effetto ha nel contesto del formato; con le dimensioni ridotte, l'accessibilità e la combinazione con overflow-x, è possibile registrare pannelli fluidi, senza barre impreviste e con uno spostamento morbido tanto per gli utenti quanto per gli script.