Si probabilmente vedere le barre di scorrimento su pagine Web spesso, ma non sarà possibile visualizzare le barre di scorrimento molti sugli oggetti che appaiono su queste pagine. È possibile per gli sviluppatori di aggiungere barre di scorrimento agli elementi di pagina Web. Elementi div HTML utilizzati come contenitori, ad esempio, possono visualizzare le barre di scorrimento che è possibile controllare tramite un programma. Con la creazione di una semplice funzione JavaScript che altera una proprietà HTML, è possibile rendere più div scorrimento in una sola volta ogni volta che ti piace.

Div contenitori

L'esempio seguente mostra un'immagine e un pulsante inserito in una tipica pagina Web:

< img src="someImage.jpg" / >
< input type = "button" value = "button" / >

Posizionare questi stessi oggetti all'interno di un div come illustrato di seguito a trattarli come un gruppo.

< div id = "divToScrollID" class = "style1" >
< img src="someImage.jpg" / >
< input type = "button" value = "button" / >
< / div >

Il div che racchiude gli oggetti è costituito da un tag di apertura < div > e una chiusura < / div > tag. Applicare uno stile CSS, ad esempio un bordo, al div e il bordo viene visualizzato attorno agli oggetti di div. Per rendere tutti gli oggetti scompaiono al clic di un pulsante, semplicemente chiamata una funzione che rende il div scompaiono impostando l'attributo display di div su "none"..

Barre di scorrimento

Il div nell'esempio precedente ha un attributo id che identifica in modo univoco e un attributo di classe che punta a una classe del foglio di stile CSS. Tale classe definisce proprietà di visualizzazione di div. Rendere un div scorrevole assegnando un valore di "auto" per l'attributo di overflow. Questo valore fa sì che le barre di scorrimento a comparire, se un'immagine o qualsiasi altro oggetto all'interno di un div non rientra all'interno del div. Se si desidera che le barre di scorrimento sempre ad apparire, impostare il valore di "scorrere" invece.

Lo scorrimento dinamico

Potrebbe essere un div che contiene contenuti che richiedono lo scorrimento senza intervento dell'utente. Un documento di accordo a lungo, per esempio, può essere posizionato all'interno di un div che gli utenti non possono leggere senza dover scorrere verso il basso. È possibile effettuare il div scorrere in qualsiasi posizione chiamando una funzione di JavaScript con codice simile a quello riportato di seguito:

var divObject = document.getElementById("divToScrollID");
divObject.scrollTop = 100;

Questo codice trova il div con ID è "divToScrollID" e induce a scorrere fino a un 100 pixel di posizione dal bordo superiore di quel div. Si potrebbe anche fare scorrere verso l'alto automaticamente impostando il valore di scrollTop a zero.

Più lo scorrimento

Una pagina Web può contenere divs come molti come necessario per visualizzare il contenuto. Un div può detenere una galleria di immagini, mentre un altro potrebbe visualizzare un breve racconto. Un modo interessante di presentare due tali div potrebbe essere fare scorrimento testo della storia verso il basso nel momento stesso in cui le immagini scorrere. Creare questo effetto chiamando una funzione che scorre entrambi divs come illustrato di seguito.

divObject1.scrollTop + = increment1;
divObject2.scrollTop + = increment2;

Se i valori di increment1 e increment2 erano 20, ogni pulsante renderebbe entrambi divs scorrere verso il basso 20 pixel. Utilizzando due variabili per contenere i valori di incremento, è possibile effettuare ogni div scorrere in modo indipendente da un importo diverso.