Una casella di scorrimento HTML è una casella che aggiunge barre di scorrimento sul lato destro e inferiore quando il contenuto della casella è più grande delle dimensioni del riquadro. In altre parole, se si dispone di una casella che può contenere circa 50 parole e si dispone di un testo di 200 parole, una casella di scorrimento HTML posizionerà le barre di scorrimento per consentire di visualizzare le ulteriori 150 parole. Nell'HTML standard che semplicemente spingere il testo extra all'esterno della casella.
Fare lo scroll HTML è abbastanza facile. È sufficiente impostare la larghezza e l'altezza dell'elemento che si desidera scorrere e quindi utilizzare la proprietà di overflow CSS per impostare il modo in cui si desidera lo scorrimento.
Cosa fare con il testo extra?
Quando hai più testo di quello che si adatta allo spazio del tuo layout, hai alcune opzioni:
- Riscrivi il testo in modo che sia più corto e adatto.
- Consentire al testo di fluire oltre i limiti e sperare che il layout possa flettersi per supportarlo.
- Taglia il testo da dove trabocca.
- Aggiungi le barre di scorrimento (di solito verticali per il testo) in modo che lo spazio scorra per mostrare il testo in più.
L'opzione migliore è in genere l'ultima opzione: creare una casella di testo scorrevole. Quindi il testo extra può ancora essere letto, ma il tuo design non è compromesso.
HTML e CSS per questo sarebbero:
Il
overflow: auto;
dice al browser di aggiungere barre di scorrimento se sono necessarie per impedire che il testo trabocchi dai limiti del div. Ma per fare in modo che funzioni, è necessario anche le proprietà di stile width e height impostate su div, in modo tale che ci siano dei limiti per l'overflow.
Puoi anche tagliare il testo cambiando l'overflow: auto; overflow: nascosto ;. Se si omette la proprietà di overflow, il testo si riverserà oltre i limiti del div.
È possibile aggiungere barre di scorrimento a più di un semplice testo
Se hai un'immagine grande che desideri visualizzare in uno spazio più piccolo, puoi aggiungere barre di scorrimento attorno allo stesso modo in cui faresti con il testo.
In questo esempio, l'immagine 400x509 si trova all'interno di un paragrafo 300x300. Lunghe tabelle di informazioni possono essere molto difficili da leggere molto rapidamente, ma inserendole in un div di dimensioni limitate e aggiungendo la proprietà di overflow, è possibile generare tabelle con molti dati che non occupano uno spazio estremo nella pagina . Il modo più semplice è proprio come con immagini e testo, basta aggiungere un div intorno al tavolo, impostare la larghezza e l'altezza di quel div e aggiungere la proprietà di overflow: Una cosa che accade quando lo fai è una barra di scorrimento orizzontale che di solito appare perché il browser presuppone che il cromo delle barre di scorrimento si sovrapponga al tavolo. Esistono molti modi per risolvere questo problema modificando la larghezza della tabella e altri. Ma il mio preferito è semplicemente disattivare lo scorrimento orizzontale con la proprietà CSS 3 troppopieno-x . Basta aggiungere overflow-x: hidden; al div e questo rimuoverà la barra di scorrimento orizzontale. Assicurati di testare questo, in quanto potrebbero esserci dei contenuti che spariscono.
Le tabelle possono trarre vantaggio dalle barre di scorrimento
Nome Telefono Jennifer 502-5366
