CSS overflow-y
La proprietà CSS overflow-y controlla il traboccamento verticale (CSS3)
La proprietà overflow-y serve a gestire il comportamento del contenuto che eccede in altezza. È utile per sezioni scrollabili, come pannelli di testo, liste, o contenitori dinamici. Può essere combinata con overflow-x per un controllo preciso sull’overflow in entrambe le direzioni.
Sintassi
Significato dei valori principali:
visible: il contenuto traboccante in verticale sarà visibile (comportamento predefinito).
hidden: il contenuto che eccede in altezza viene nascosto.
scroll: forza sempre la presenza di una barra di scorrimento verticale, anche se non necessaria.
auto: mostra la barra verticale solo se necessaria.
clip: tronca il contenuto verticale senza aggiungere una barra di scorrimento (CSS3+).
Esempio proprietà: overflow-y
Codice Esempio: overflow-y
.overflow-y-example {
width: 300px;
height: 100px;
border: 2px solid #ff9800;
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
background-color: #fff3e0;
font-size: 16px;
color: #000;
}
Contenuto Esempio: overflow-y
Esempio di utilizzo di overflow-y
In questo esempio, viene mostrata una barra di scorrimento verticale solo quando necessaria grazie a overflow-y: auto:
Riga 1
Riga 2
Riga 3
Riga 4
Riga 5
Riga 6
Riga 7
Riga 8
Riga 9
Riga 10
CSS e HTML per il contenuto con scorrimento verticale:
<style>
.overflow-y-example {
width: 300px;
height: 100px;
border: 2px solid #ff9800;
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
background-color: #fff3e0;
font-size: 16px;
color: #000;
}
</style>
<div class="overflow-y-example">
Questo è un contenuto verticale molto lungo. <br>
Riga 1<br>
Riga 2<br>
Riga 3<br>
Riga 4<br>
Riga 5<br>
Riga 6<br>
Riga 7<br>
Riga 8<br>
Riga 9<br>
Riga 10
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
