Il CSS” traboccare La proprietà ” viene utilizzata per controllare l'overflow del contenuto per l'elemento HTML selezionato. Il contenuto può essere controllato in una direzione specifica con l'aiuto di ' overflow-y ' E ' overflow-x ' proprietà. La proprietà 'overflow' accetta valori come ' scorrere ”, “ visibile ”, “ nascosto ' E ' auto ” e variano in termini di funzionalità l'uno dall'altro. Tuttavia, questa guida dimostra la differenza tra overflow:scroll e overflow:auto utilizzando esempi pratici.
In che modo overflow:scroll differisce da overflow:auto?
La principale differenza tra “ scorrere ' E ' auto ” valori è che il “ overflow: scorrere ” mostra sempre una barra di scorrimento se è necessaria o meno, il che crea una distrazione visiva. D'altra parte, il “ overflow: automatico ' visualizza la barra di scorrimento solo quando il contenuto è in overflow. In questo modo è possibile creare un design più pulito e snello che catturi facilmente l'attenzione dell'utente.
Esempio 1: utilizzo della proprietà overflow:scroll
Il CSS” overflow: scorrere ” imposta la barra di scorrimento per impostazione predefinita per controllare il contenuto in overflow. Non vede il contenuto di overflow e quindi applica la barra di scorrimento. Al contrario, visualizza una barra di scorrimento orizzontale e verticale dopo la compilazione del codice, ma l'utente può modificare e visualizzare solo una barra di scorrimento laterale in base ai requisiti del progetto.
Visita il codice seguente per utilizzare la proprietà 'overflow:scroll':
< div >
< h3 > Esempio per Overflow: scorrere h3 >
< div classe = 'scrollingBox scroll' >
< P > Questo è solo contenuto fittizio utilizzato per la dimostrazione della differenza tra overflow-y property value scroll e auto.
P >
div >
div >
Nel blocco di codice sopra:
- Innanzitutto, la radice ' div ” l'elemento viene creato e utilizza l'elemento nidificato “ ” tag in esso.
- Successivamente, assegna le classi di ' scrollingBox ' E ' scorrere ” al nidificato già creato “
etichetta '.- Infine, fornire dati fittizi al ' ' E ' ” tag all'interno del “ div ' elementi.
Dopo la creazione della struttura HTML, applica la proprietà CSS overflow:
< stile >
.scrollingBox {
larghezza: 300px;
altezza: 150px;
bordo: 1px solido grigio scuro;
}
.scorrere {
overflow: scorrere;
}
stile >Descrizione del codice CSS sopra:
- Per prima cosa, seleziona ' scrollingBox ” class e fornire i valori di “ 300 pixel ”, “ 150 pixel ' E ' 1px solido grigio scuro ” al CSS “ larghezza ”, “ altezza ', E ' confine ' proprietà. Queste proprietà vengono utilizzate per un migliore processo di visualizzazione.
- Successivamente, il “ scorrere ” la classe è selezionata e il valore di “ scorrere ” viene passato al CSS “ traboccare ' proprietà.
Al termine della fase di compilazione:
L'output sopra mostra che il contenuto non è traboccante ma la barra di scorrimento è stata aggiunta su entrambi gli assi X e Y.
Esempio 2: utilizzo della proprietà overflow:auto
La proprietà overflow:auto è come overflow:scroll perché entrambi possono visualizzare la barra di scorrimento. L'unica differenza è che il ' overflow: automatico ' aggiunge una barra di scorrimento quando il contenuto è in overflow e se il contenuto non è in overflow, la barra di scorrimento non viene aggiunta. Viene utilizzato principalmente durante la creazione di web design reattivo a causa della sua natura che cambia dinamicamente.
Ad esempio, visita il codice seguente:
< div classe = 'esempio automatico' >
< h3 > Esempio per Overflow: automatico h3 >
< div classe = 'casella scorrevole' stile = 'overflow: automatico' >
< P > Questo è solo contenuto fittizio utilizzato per la dimostrazione della differenza tra overflow-y property value scroll e auto.
P >
div >
div >Nel blocco di codice sopra:
- Innanzitutto, viene utilizzata la stessa struttura HTML e i dati fittizi forniti al ' h3 ', E ' P ” gli elementi sono cambiati.
- Successivamente, il “ stile 'l'attributo è utilizzato con l'interno nidificato' div ” e imposta il valore di “ auto ” al CSS “ traboccare ' proprietà.
Dopo l'esecuzione, il “ div L'elemento ” ora appare così:
L'istantanea sopra mostra che la barra di scorrimento non viene aggiunta in base alla lunghezza del contenuto.
Ora, solo per un po' più di chiarimento sul ' overflow: automatico ' proprietà. Prova a fornire una grande quantità di dati al ' div elemento '. Dopo aver aggiornato il codice, la pagina web si presenta così:
L'output conferma che la barra di scorrimento è ora aggiunta a causa della presenza di contenuto in eccesso.
Conclusione
IL ' overflow: scorrere ' E ' overflow: automatico ” le proprietà differiscono nella situazione in cui aggiungono la barra di scorrimento. Il 'overflow:scroll' mostra sempre una barra di scorrimento se il contenuto è in overflow o meno. Mentre 'overflow:auto' mostra solo una barra di scorrimento quando il contenuto dell'elemento HTML selezionato è in overflow. Il valore del CSS” trabocco La proprietà dipende dal design specifico e dai requisiti di esperienza dell'utente. Questo articolo ha dimostrato la differenza tra le proprietà 'overflow:scroll' e 'overflow:auto'.
- Successivamente, assegna le classi di ' scrollingBox ' E ' scorrere ” al nidificato già creato “