Il modo più semplice per creare una casella di scorrimento orizzontale consiste nell'utilizzare un elemento DIV..--un blocco totalmente personalizzabile di contenuti sulla tua pagina. Con l'elemento DIV, si può impostare la larghezza e l'altezza della scatola, posizionarlo sulla tua pagina e impostare l'overflow in modo che invece di tua casella statico scorrendo verticalmente, scorre lateralmente. Tuttavia, è necessario strutturare il contenuto specificamente in modo che si presta per lo scorrimento orizzontale.

Creando il tuo Box

Determinare quanto grande avrai bisogno tua casella in larghezza e altezza per ospitare il contenuto; includere nella tua stima l'altezza della barra di scorrimento inferiore, come si riempirà una piccola porzione della parte inferiore della scatola. Per impostarlo come scorrimento orizzontalmente, potrai impostare la proprietà overflow-x per scorrere, mentre se si disattiva l'overflow-y..--praticamente sta dicendo l'elemento DIV che stiamo andando a ignorare qualsiasi contenuto che supera l'altezza della scatola, ma seguire qualsiasi contenuto che supera la larghezza. Il codice per una casella di base, alta 250 pixel x 600 pixel lungo, insieme a scorrimento laterale sarà simile a questo:

< div style = "width: 600; Altezza: 250; overflow-y: nascosto; overflow-x: scorrimento; " > contenuto. < / div >

Se si dispone di un foglio di stile per la tua pagina Web, è possibile assegnare il vostro DIV un ID e impostare queste proprietà nel foglio di stile, piuttosto che nel tag DIV.

Strutturare i contenuti

Scorrimento laterale con contenuto di solo testo è imbarazzante e illeggibile; siete improbabili da tenere molti lettori quando scoprono che hanno bisogno di scorrere 250 pixel per leggere la prima riga. Tuttavia, è possibile utilizzare una tabella per creare celle, progettando una sorta di layout modulare di scorrimento laterale. Per esempio, se si volevano quattro celle all'interno della vostra casella, ogni 200 pixel di altezza per 250 pixel di larghezza, a scorrimento laterale codice HTML sarebbe simile a questa:

< div style = "width: 600; Altezza: 250; overflow-y: nascosto; overflow-x: scorrimento; " >
< larghezza tavola = "1000" height = "200" border = "1" cellpadding = "0" cellspacing = "0" >
< tr >
< altezza td = "200" width = "250" > cella 1 < /td >
< altezza td = "200" width = "250" > Cell 2 < /td >
< altezza td = "200" width = "250" > Cell 3 < /td >
< altezza td = "200" width = "250" > Cell 4 < /td >
< /tr >
< / tabella >
< / div >

Tua casella di stile

È possibile lo stile tua casella di scorrimento orizzontale nel CSS, allo stesso modo che hai cambiato gli attributi di scorrimento e indicato le dimensioni. Nel CSS, si può scegliere i colori, i font e gli allineamenti e aggiungere bordi e sfondi..--qualsiasi cosa. Nell'esempio HTML seguente, si creerà un box orizzontale con una priorità bassa rossa, bordo nero e bianche senza bordi celle con cinque pixel di spazio tra di loro:

< div style = "width: 600; Altezza: 250; overflow-y: nascosto; overflow-x: lo scorrimento; background: #CC0000; border: 3px solid #000000;" >
< larghezza tavola = "1000" height = "200" border = "0" cellpadding = "0" cellspacing = "5" >
< tr >
< altezza td = "200" width = "250" bgcolor = "#FFFFFF" > cella 1 < /td >
< altezza td = "200" width = "250" bgcolor = "#FFFFFF" > Cell 2 < /td >
< altezza td = "200" width = "250" bgcolor = "#FFFFFF" > Cell 3 < /td >
< altezza td = "200" width = "250" bgcolor = "#FFFFFF" > Cell 4 < /td >
< /tr >
< / tabella >
< / div >

Usi per lo scorrimento orizzontale

Lo scorrimento orizzontale è una scelta di design che è più estetica ma meno utilitaristica..--come tale, la presentazione strano e un po' limitata natura di esso non si presta a testo o layout basati su documento. Arte e immagini, tuttavia, sono occasionalmente più facile presentare in un formato a scorrimento laterale, soprattutto quando si cerca di creare qualcosa di sorprendente e insolito.