CSS Academy · Lezione

Overflow: scroll, clip e auto

Controllate cosa accade quando il contenuto supera il contenitore utilizzando le proprietà overflow.

Overflow: scroll, clip e auto è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Che cos'è l'overflow

Si verifica un overflow quando il contenuto di un elemento è più grande delle dimensioni definite. La proprietà overflow controlla cosa accade a questo contenuto in eccesso.

overflow: visible (Predefinito)

Per impostazione predefinita, il contenuto fuoriesce ed è visibile all'esterno del riquadro dell'elemento. Questo può causare la sovrapposizione del contenuto agli elementi fratelli o la sua fuoriuscita dall'area visibile.

<div class="box">This text is long enough to spill outside the box edges visibly.</div>

overflow: hidden

overflow: hidden ritaglia qualsiasi contenuto che si estende oltre i limiti dell'elemento. Il contenuto ritagliato non è accessibile né scorrevole.

<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>

overflow: scroll

overflow: scroll mostra sempre le barre di scorrimento, anche quando il contenuto rientra nello spazio disponibile. Lo utilizzi quando desidera un'interfaccia coerente indipendentemente dalle dimensioni del contenuto.

<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>

overflow: auto

overflow: auto mostra le barre di scorrimento solo quando il contenuto fuoriesce effettivamente dai limiti. Di solito è preferibile a scroll per evitare spazi riservati alle barre non necessari.

<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>

overflow: clip

overflow: clip è simile a hidden, ma più restrittivo: non crea un contesto di formattazione dei blocchi e non può essere fatto scorrere tramite JavaScript. È ideale per ritagliare i contenuti senza rischi per le prestazioni.

<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>

overflow-x e overflow-y

Controlli ciascun asse in modo indipendente. Uno schema comune consente lo scorrimento orizzontale per contenuti larghi, come codice o tabelle:

<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>

Schema di un contenitore scorrevole

Per creare un contenitore scorrevole, sono necessari sia un'altezza fissa sia overflow: auto o scroll:

<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>

Contesto di formattazione a blocchi creato da overflow

Impostare overflow su un valore diverso da visible crea un contesto di formattazione a blocchi (BFC). Questo contiene i float interni e impedisce che il collasso dei margini si propaghi al di fuori del contenitore.

Propagazione dello scorrimento

Quando un contenitore scorrevole raggiunge il limite dello scorrimento, gli eventi di scorrimento possono propagarsi al genitore. Utilizzi overscroll-behavior: contain per impedirlo.

<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>

text-overflow rispetto a overflow

text-overflow: ellipsis riguarda il testo all'interno di un elemento e richiede overflow: hidden + white-space: nowrap per funzionare. overflow controlla il comportamento dell'overflow dell'elemento stesso.

Verifica rapida

Quale valore di overflow mostra le barre di scorrimento solo quando il contenuto effettua effettivamente l'overflow?

Riepilogo

overflow: hidden ritaglia il contenuto. overflow: auto aggiunge le barre di scorrimento solo quando necessario (ed è preferibile). overflow: scroll mostra sempre le barre di scorrimento. overflow: clip ritaglia il contenuto senza creare un nuovo contesto di formattazione. Utilizzi overflow-x/y per controllare ciascun asse.

Domande Frequenti

La lezione «Overflow: scroll, clip e auto» è gratuita?

Sì — il testo completo di «Overflow: scroll, clip e auto» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Overflow: scroll, clip e auto»?

Controllate cosa accade quando il contenuto supera il contenitore utilizzando le proprietà overflow. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Overflow: scroll, clip e auto»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy