Proprietà CSS overflow-y
Scopri come CSS overflow-y controlla il ritaglio verticale del contenuto e le barre di scorrimento. Valori, interazione con overflow-x, esempi pratici.
La proprietà overflow-y controlla cosa succede quando il contenuto di un elemento è più alto del suo contenitore. Puoi lasciare che il contenuto fuoriesca, ritagliarlo invisibilmente, o aggiungere una barra di scorrimento — sempre o solo quando necessario.
overflow-y è una delle due metà della shorthand overflow su due assi. La sua controparte overflow-x gestisce la direzione orizzontale. Insieme offrono un controllo preciso su come un box ritaglia e scorre.
Riferimento della proprietà
| Valore iniziale | visible |
| Si applica a | Contenitori block, contenitori flex e contenitori grid |
| Ereditata | No |
| Animabile | No |
| Versione | CSS3 |
| Sintassi DOM | element.style.overflowY = "scroll" |
Sintassi
overflow-y: visible | hidden | scroll | auto | clip | initial | inherit;Valori
| Valore | Descrizione |
|---|---|
visible | Il contenuto non viene ritagliato e può essere visualizzato oltre i bordi superiore e inferiore del padding. Questo è il valore predefinito. |
hidden | Il contenuto viene ritagliato al padding box. Non viene fornita alcuna barra di scorrimento; il contenuto ritagliato non è accessibile. |
scroll | Il contenuto viene ritagliato e viene sempre mostrata una barra di scorrimento, anche se il contenuto ci sta. |
auto | Il contenuto viene ritagliato solo quando va in overflow. Il browser aggiunge automaticamente una barra di scorrimento quando necessario. |
clip | Il contenuto viene ritagliato come con hidden, ma disabilita anche lo scorrimento programmatico (scrollTop). Più restrittivo di hidden. |
initial | Reimposta la proprietà al suo valore predefinito (visible). |
inherit | Eredita il valore calcolato dall'elemento genitore. |
Quando overflow-y viene impostato su scroll, auto o hidden, il browser cambia automaticamente qualsiasi valore visible su overflow-x in auto. Questo perché un box non può essere ritagliato su un asse pur rimanendo veramente senza vincoli sull'altro — la specifica non consente quella combinazione.
Quando usare ciascun valore
visible— il valore predefinito; utile quando si vuole intenzionalmente che un elemento (come un tooltip o un menu a discesa) fuoriesca dai suoi limiti senza essere tagliato.hidden— usalo per ritagliare overflow decorativo (es. una grande immagine di sfondo che non dovrebbe causare barre di scorrimento nella pagina) o per creare un nuovo contesto di formattazione block.scroll— usalo quando vuoi sempre lo spazio riservato alla barra di scorrimento, così il layout non si sposta quando il contenuto cresce. Utile nelle barre laterali o nei pannelli dove la stabilità del layout è importante.auto— la scelta più comune per le regioni scorrevoli. La barra di scorrimento appare solo quando il contenuto va effettivamente in overflow, evitando lo spazio permanente creato dascroll.clip— usalo quando devi impedire tutto lo scorrimento (inclusa la manipolazione JavaScript conscrollTop) all'interno di una regione contenuta, senza mostrare alcuna barra di scorrimento.
Esempi
overflow-y: scroll
La barra di scorrimento viene sempre visualizzata, anche se tutto il testo ci sta. Il contenitore ritaglia verticalmente e permette all'utente di scorrere.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.scroll {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: scroll</h3>
<div class="scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>overflow-y: visible
Il contenuto viene visualizzato oltre il bordo inferiore del contenitore. Si nota che il testo fuoriesce dalla casella verde — non avviene alcun ritaglio.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.visible {
background-color: #8ebf42;
color: #666;
height: 40px;
width: 200px;
overflow-y: visible;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: visible</h3>
<div class="visible">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>overflow-y: hidden
Il contenuto viene ritagliato al bordo inferiore del contenitore. Non appare alcuna barra di scorrimento e il contenuto ritagliato non è raggiungibile scorrendo.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.hidden {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: hidden;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: hidden</h3>
<div class="hidden">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>overflow-y: auto
Una barra di scorrimento appare solo quando il testo supera l'altezza fissa. Se il contenuto fosse più corto di 60 px, non verrebbe mostrata alcuna barra di scorrimento.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.auto {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: auto</h3>
<div class="auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>Tutti i valori a confronto
Questo esempio posiziona tutti e quattro i valori principali uno accanto all'altro così da poterne confrontare il comportamento visivo a colpo d'occhio.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.scroll {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: scroll;
}
div.hidden {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: hidden;
}
div.auto {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: auto;
}
div.visible {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: visible;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>overflow-y: scroll</h3>
<div class="scroll">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
</div>
<h3>overflow-y: hidden</h3>
<div class="hidden">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<h3>overflow-y: auto</h3>
<div class="auto">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<h3>overflow-y: visible</h3>
<div class="visible">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Problemi comuni
overflow-y: visible viene silenziosamente modificato dal browser. Se imposti overflow-x su qualsiasi valore diverso da visible sullo stesso elemento, overflow-y: visible viene trattato come auto. La specifica richiede che entrambi gli assi siano visible affinché uno rimanga veramente senza vincoli.
overflow-y: hidden crea un contenitore di scorrimento senza barra di scorrimento. Gli utenti non possono scorrere con la rotellina del mouse o con un gesto touch, ma JavaScript può ancora spostare la posizione di scorrimento tramite scrollTop. Usa overflow-y: clip se vuoi impedire anche quello.
Un height fisso è necessario affinché scroll e auto abbiano effetto. Senza un'altezza vincolata, l'elemento cresce semplicemente per adattarsi al suo contenuto, quindi non si verifica mai alcun overflow e non appare alcuna barra di scorrimento.
Scorrimento touch su mobile. Per abilitare lo scorrimento con inerzia in un contenitore overflow-y: auto o overflow-y: scroll su iOS Safari, potrebbe essere necessario aggiungere -webkit-overflow-scrolling: touch in basi di codice più vecchie (questo non è più richiesto nelle versioni moderne di iOS dove è abilitato per impostazione predefinita).
Contesti di sovrapposizione. Impostare overflow-y su qualsiasi valore diverso da visible crea un nuovo contesto di sovrapposizione su quell'elemento. Questo può influenzare il comportamento di z-index sugli elementi figlio che tentano di fuoriuscire dal contenitore.
Proprietà correlate
overflow— shorthand per entrambi gli assioverflow-x— comportamento dell'overflow orizzontaleoverflow-wrap— controlla l'a capo automatico per le parole lunghetext-overflow— come viene segnalato il testo inline ritagliato (es. ellipsis)scroll-behavior— se lo scorrimento anima in modo fluido o saltaresize— permette agli utenti di ridimensionare un contenitore scorrevoleheight— il vincolo di altezza che attiva l'overflow