Come creare una scrollbar/barra scorrevole con il linguaggio HTML.
Per creare la scrollbar il codice è il seguente:
<div style=”overflow: auto; width: 250px; height: 100px;”> QUI VA IL VOSTRO TESTO O LE IMMAGINI.
IN QUESTO CASO LA BARRA POTRÀ ESSERE SIA ORIZZONTALE CHE VERTICALE A SECONDA DEL CONTENUTO INSERITO. SI ADATTERÀ AUTOMATICAMENTE GRAZIE ALL’ATTRIBUTO overflow: auto
</div>
IN QUESTO CASO LA BARRA POTRÀ ESSERE SIA ORIZZONTALE CHE VERTICALE A SECONDA DEL CONTENUTO INSERITO. SI ADATTERÀ AUTOMATICAMENTE GRAZIE ALL’ATTRIBUTO overflow: auto
width: 300x; è la larghezza del riquadro e height: 100px è l’altezza. Per modificare le dimensioni del riquadro scorrevole basta cambiare il numero di pixel
Per impostare una barra a scorrimento verticale utilizzare:
– overflow-y: scroll ➡️ scrollbar verticale
Codice:
<div style=”overflow-y: scroll; width: 300px; height: 100px;”> TESTO O IMMAGINI
</div>
Per impostare una barra a scorrimento orizzontale utilizzare:
– overflow-x: scroll ➡️ scrollbar orizzontale
Codice:
<div style=”overflow-x: scroll; width: 300px; height: 200px;”> TESTO O IMMAGINI
</div>
Se la barra orizzontale non compare perchè le foto o il testo vanno a capo provare con l’attributo “white-space: nowrap” che forza il testo e le immagini a non andare a capo, in modo che testo e immagini continuino tutte su una riga, forzando la scrollbar orizzontale.
overflow-y: hidden
overflow-x: hidden
L’attributo “overflow-y: hidden” serve a nascondere la barra verticale, cioè non fa comparire la scrollbar verticale.
L’attributo “overflow-x: hidden” al contrario non fa comparire la scrollbar orizzontale.
NOTA: Ad esempio per creare una scrollbar nella firma di un forum che utilizza il BBcode, il codice HTML della scrollbar va inserito tra [HTML][/HTML]
Per andare a capo all’interno del codice HTML mettere un tag <br/>