Firefox, come molti browser, Visualizza barre di scorrimento orizzontale o verticale quando il contenuto della pagina supera la dimensione dell'area di visualizzazione del browser. Come uno sviluppatore o un progettista di siti, avete la possibilità di determinare quando una barra di scorrimento cambiamenti di posizione e anche scorrere la pagina automaticamente senza l'intervento dell'utente. Eseguire questa magia aggiungendo poche righe di codice di script nel vostro documento HTML.

Coordinate dello schermo

Fogli di stile e JavaScript è necessario utilizzare un semplice sistema di coordinate quando tracciamento della posizione dei punti in una finestra del browser. La classe CSS seguente definisce tale punto:

.location1 {posizione: absolute; top: 1000px; sinistra: 900 px}

Questa classe viene descritto un punto che è 1000 pixel dalla parte superiore della finestra del browser e 900 pixel dal bordo sinistro del browser. Quando si utilizza JavaScript per rilevare posizioni di scorrimento in Firefox, si lavora con gli attributi superiore e sinistro. L'esempio seguente determina la posizione di scorrimento corrente del browser in relazione al suo bordo superiore:

var pageElement = document.getElementById('divElement1');
var topPosition = pageElement.scrollTop;

La prima istruzione ottiene la posizione corrente di scorrimento verticale di un elemento di pagina, ad esempio un div con ID è "divElement1" e lo memorizza nella variabile pageElement. La seconda istruzione ottiene valore scrollTop dell'elemento e lo memorizza nella variabile topPosition. Ottenere la posizione di scorrimento orizzontale esaminando la proprietà scrollLeft. Le proprietà scrollTop e scrollLeft sono specifiche per Firefox e non fanno parte della specifica ufficiale del Consorzio World Wide Internet.

Controllo scorrimento

Si possa eseguire interessante browser gesta eseguendo la funzione scrollTo. L'istruzione seguente scorre una pagina Web giù 400 pixel:

var verticalLocation = 400;
window.scrollTo (0, verticalLocation);

La funzione di scrollTo, che funziona in tutti i browser tra cui Firefox, accetta due parametri: la posizione della pagina in orizzontale e la posizione verticale. La posizione orizzontale è pari a zero in questa istanza. Il pageElement può essere il corpo del documento o un altro elemento div che contiene testo o altro contenuto. Scorrere fino alla fine della pagina utilizzando il codice riportato di seguito:

var verticalLocation = document.body.scrollHeight;
window.scrollTo (0, verticalLocation);

Rilevamento di rotella di scorrimento

Spostare lentamente la rotellina del mouse, e si sentirà un click come pagina Web scorre. Il codice può stabilire il numero di righe che della pagina si muove esaminando la proprietà di dettaglio il browser imposta quando si verifica un evento DOMMouseScroll in Firefox. Impostare questo gestore eventi come indicato di seguito:

pageElement.addEventListener ("DOMMouseScroll", function () {scroll(event)
var linesScrolled = event.detail;
}, false);

Questo codice aggiunge il gestore eventi a un elemento di pagina denominato pageElement. La proprietà event.detail, che indica il numero di linee spostato, contiene un valore negativo o un valore positivo se si scorre verso il basso se scorrere verso l'alto. L'evento di DOMMouseScroll funziona in tutti i browser tranne Internet Explorer. Che il browser utilizza invece l'evento onmousewheel.

Usi pratici

Se si conoscono le coordinate superiore e sinistra di un elemento importante sulla tua pagina Web, è possibile utilizzare la funzione di scrollTo a scorrere browser di un utente in tale posizione in qualsiasi momento. Rilevazione della rotella del mouse in Firefox consente inoltre di creare nuovi tipi di navigazione della pagina Web. Anziché fare clic su un pulsante per controllare una presentazione, ad esempio, è possibile consentire agli utenti di passare immagini spostando le rotelline del mouse. Eseguire questa operazione creando un oggetto JavaScript che contiene gli URL delle immagini e in bicicletta attraverso quelle immagini quando viene rilevata una modifica nella posizione della ruota del mouse.