La proprietà overflow in CSS specifica il comportamento di un elemento che ha un contenuto più grande della sua dimensione. Ad esempio, un <div> che ha un'altezza di 100px e il testo all'interno occupa 200px. Ecco un esempio:
<div>. Grazie alla proprietà overflow:auto, in questo caso puoi scorrere questo testo così da vederlo per intero. La barra di scorrimento appare automaticamente quando il contenuto eccede le dimensioni del contenitore (che in questo caso è il <div> con lo sfondo blu), consentendo una navigazione più agevole e garantendo che tutte le informazioni siano accessibili lo stesso all'interno della pagina. Questa soluzione è particolarmente utile per contenuti dinamici o quando si vuole preservare uno stile ordinato e pulito. Potrai scoprire tutti i diversi valori di overflow all'interno di questa lezione. Questa proprietà accetta valori come visibile, hidden e scroll. In generale, la proprietà overflow è molto usata nel CSS.La proprietà overflow accetta i seguenti valori:
visible - Valore di defaulthiddenscrollautoVediamoli in dettaglio.
Il valore visible di overflow è il valore di default. Quindi, se overflow non viene specificato, verrà impostato automaticamente il valore visible. Il contenuto che eccede le dimensioni del contenitore verrà mostrato al di fuori dei suoi bordi. Non viene applicato alcun taglio o scorrimento.
<div> <!-- CONTENUTO --> </div>
<style>
div {
overflow: visible;
padding: 10px;
border: 2px solid grey;
}
</style>In questo caso, è importante notare che il contenuto che esce al di fuori del contenitore non avrà effetto sul resto del contenuto della pagina. Ad esempio, se dopo il <div> che contiene il testo c'è un'immagine, non verrà spostata se il testo esce fuori dal <div>. Semplicemente, il testo sarà sopra l'immagine.
Nel caso di overflow:hidden, il contenuto che eccede le dimensioni del contenitore viene tagliato e nascosto. Non è possibile scorrere per visualizzarlo.
<div> <!-- CONTENUTO --> </div>
<style>
div {
overflow: hidden;
padding: 10px;
border: 2px solid grey;
}
</style>Puoi usare hidden per creare elementi con dimensioni fisse e per prevenire la comparsa di barre di scorrimento indesiderate. Tuttavia, tieni conto che nascondere il contenuto agli utenti può essere molto fastidioso. Ad esempio, può essere che un utente abbia impostato una dimensione del testo più grande del normale, e non può leggere il contenuto.
Utilizzando overflow:scroll, viene sempre mostrata una barra di scorrimento, sia verticale che orizzontale, anche se il contenuto non eccede le dimensioni del contenitore.
<div> <!-- CONTENUTO --> </div>
<style>
div {
overflow: scroll;
padding: 10px;
border: 2px solid grey;
}
</style>Nota: non tutti i browser aggiungono entrambe le barre di scorrimento se non sono necessarie. Il comportamento di overflow:scroll potrebbe essere simile a overflow:auto.
Con la proprietà overflow:auto, viene mostrata una barra di scorrimento solo quando il contenuto eccede le dimensioni del contenitore. È il valore più comunemente usato.
<div> <!-- CONTENUTO --> </div>
<style>
div {
overflow: auto;
padding: 10px;
border: 2px solid grey;
}
</style>Le proprietà overflow-x e overflow-y sono varianti della proprietà overflow che permettono di controllare separatamente il comportamento di scorrimento orizzontale e verticale all'interno di un elemento.
overflow-x controlla il comportamento del contenuto che eccede la larghezza (width) del contenitore, ovvero lungo l'asse orizzontale.overflow-y controlla il comportamento del contenuto che eccede l'altezza (height) del contenitore, ovvero lungo l'asse verticale.Sia overflow-x che overflow-y accettano gli stessi valori di overflow.
Puoi scegliere separatamente l'overflow verticale e orizzontale:
<div> <!-- CONTENUTO --> </div>
<style>
div {
overflow-x: auto;
overflow-y: hidden;
padding: 10px;
border: 2px solid grey;
}
</style>