Nwlapcug.com


Come determinare quando una barra di scorrimento ha raggiunto il fondo utilizzando JavaScript

Come determinare quando una barra di scorrimento ha raggiunto il fondo utilizzando JavaScript


Normalmente non Vedi niente grande come una ticker-tape parade quando la barra di scorrimento raggiunge il fondo di un documento su una pagina Web, ma è possibile che gli sviluppatori di JavaScript a dire quando si scorre lì, e questo può avete visto in azione quando viene chiesto di scorrere verso il basso di un accordo di "Termini di servizio" prima si poteva continuare. Gli elementi HTML espongono diverse proprietà di scorrimento, che l'applicazione Web può utilizzare per rilevare quando una barra di scorrimento raggiunge il fondo di un elemento.

Istruzioni

1

Avviare un editor HTML e aprire un documento HTML.

2

Aggiungere un controllo textarea sezione del corpo di uno dei documenti HTML, come illustrato di seguito:

< textarea id = "textarea1" rows = "4" cols = "55" >
dati prova prova prova dati test dati dati di prova
dati prova prova prova dati test dati dati di prova
dati prova prova prova dati test dati dati di prova
dati prova prova prova dati test dati dati di prova
dati prova prova prova dati test dati dati di prova
dati prova prova prova dati test dati dati di prova
dati prova prova prova dati test dati dati di prova
< / textarea >

< tipo input = "pulsante" value = "Controllare la posizione di scorrimento" onclick = "return bottomReached('textarea1')" / >

Questa textarea contiene dati di esempio sufficienti per causare una barra di scorrimento a comparire sulla pagina Web. Il pulsante chiama una funzione JavaScript che determina se hai raggiunto il fondo della pagina. Il pulsante passa il valore di id di textarea alla funzione.

3

Aggiungere questa funzione JavaScript alla sezione head di un documento:

< script >
Function bottomReached(objectID) () {

oggetto var = document.getElementById(objectID);
var bottomReached = false;
var actualLocation = object.scrollTop + object.offsetHeight;
var scrollHeight = object.scrollHeight;

Se (actualLocation > scrollHeight)
bottomReached = true;

Alert ("fondo raggiunto =" + bottomReached);
}
< / script >

Questa funzione recupera un riferimento all'oggetto textarea. La funzione ottiene quindi il percorso effettivo di scrollbar aggiungendo il valore scrollTop al suo valore di offsetHeight. Se la posizione effettiva è maggiore scrollHeight valore di textarea, la variabile bottomReached variabile diventa true. In caso contrario, la funzione impostata su false.

4

Salvare il documento e visualizzarlo nel browser. Verrà visualizzata la finestra di textarea contenente testo. Fare clic sul pulsante "Verifica posizione di scorrimento". La funzione viene eseguita e viene visualizzata una finestra di messaggio "fondo raggiunto = false." Scorrere fino alla fine del componente textarea e fare clic sul pulsante nuovo. Legge il messaggio di "fondo raggiunto = true."

Consigli & Avvertenze

  • Per utilizzare la funzione di bottomReached, passare l'id del componente textarea che si desidera monitorare. La funzione non funzionerà senza questo id. Controllare il valore della variabile bottomReached per determinare se la barra di scorrimento di un utente ha raggiunto il fondo.