Questo articolo illustra il metodo per impedire l'overflow del contenuto e abilitare lo scorrimento tramite CSS.
Come fermare l'overflow del contenuto e abilitare lo scorrimento?
Lo scopo di impedire l'overflow del contenuto è che il contenuto si adatti al suo contenitore e non influisca negativamente sulle prestazioni del sito web. Può facilmente comprendere il contesto e può migliorare l'accessibilità alla fine degli utenti. Per una spiegazione dettagliata discutiamo attraverso un esempio:
Passaggio 1: abilita lo scorrimento con l'overflow del contenuto
Inizialmente, inizia con la creazione di una tabella all'interno del file HTML su cui verrà applicato l'effetto di scorrimento. Supponiamo che la tabella sia già stata creata e consta di sei righe e sette colonne e che alla tabella vengano forniti alcuni dati fittizi:
< tavolo >
< tr >
< th > Capo 1 < / th >
< th > Capo 2 < / th >
< th > Capo 3 < / th >
< th > Capo 4 < / th >
< th > Capo 5 < / th >
< th > Capo 6 < / th >
< th > Capo 7 < / th >
< / tr >
< tr >
< td > Riga 1 < / td >
< td > Riga 1 < / td >
< td > Riga 1 < / td >
< td > Riga 1 < / td >
< td > Riga 1 < / td >
< td > Riga 1 < / td >
< td > Riga 1 < / td >
< / tr >
< tr >
< td > Riga 2 < / td >
< td > Riga 2 < / td >
< td > Riga 2 < / td >
< td > Riga 2 < / td >
< td > Riga 2 < / td >
< td > Riga 2 < / td >
< td > Riga 2 < / td >
< / tr >
< tr >
< td > Riga 3 < / td >
< td > Riga 3 < / td >
< td > Riga 3 < / td >
< td > Riga 3 < / td >
< td > Riga 3 < / td >
< td > Riga 3 < / td >
< td > Riga 3 < / td >
< / tr >
< tr >
< td > Riga 4 < / td >
< td > Riga 4 < / td >
< td > Riga 4 < / td >
< td > Riga 4 < / td >
< td > Riga 4 < / td >
< td > Riga 4 < / td >
< td > Riga 4 < / td >
< / tr >< tr >
< td > Riga 5 < / td >
< td > Riga 5 < / td >
< td > Riga 5 < / td >
< td > Riga 5 < / td >
< td > Riga 5 < / td >
< td > Riga 5 < / td >
< td > Riga 5 < / td >
< / tr >
< tr >
< td > Riga 6 < / td >
< td > Riga 6 < / td >
< td > Riga 6 < / td >
< td > Riga 6 < / td >
< td > Riga 6 < / td >
< td > Riga 6 < / td >
< td > Riga 6 < / td >
< / tr >
< / tavolo >
Dopo l'esecuzione dello snippet di codice sopra, la pagina web appare così:
L'output mostra che i dati della tabella sono in un formato meno leggibile e che la tabella acquisisce molto spazio.
Passaggio 2: impostazione dell'overflow e dell'effetto di scorrimento Nello snippet di codice sopra: Dopo l'esecuzione dello snippet di codice sopra, la pagina web appare così: La pagina Web illustra che la tabella ora consuma meno spazio e impedisce l'overflow del contenuto. Inoltre, è stato abilitato l'effetto di scorrimento. Nota : IMPOSTANDO ' trabocco: automatico ' O ' overflow: scorrere ”, gli utenti possono abilitare lo scorrimento per il contenuto in eccesso. Inoltre il “ trabocco: nascosto ” può essere utilizzato per impedire del tutto l'overflow. Le proprietà 'overflow-x' e 'overflow-y' vengono utilizzate per controllare l'overflow e abilitare lo scorrimento sull'asse orizzontale e verticale. Impedisce l'overflow del contenuto e consente lo scorrimento per creare un design reattivo interattivo per tutti i dispositivi. Questo articolo ha dimostrato come impedire l'overflow del contenuto e abilitare lo scorrimento utilizzando i CSS.
Dopodiché, avvolgi la tabella con un genitore '
.overflow {
larghezza : 200 pixel ;
altezza : 200 pixel ;
overflow-x : auto ;
overflow-y : auto ;
comportamento di scorrimento : liscio ;
}
Conclusione