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

February 21

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


Normalmente non si vede nulla grande come una parata ticker-tape quando la barra di scorrimento raggiunge il fondo di un documento in una pagina Web, ma è possibile per gli sviluppatori JavaScript per dire quando si scorre lì, e si può avere assistito a questo in azione quando viene chiesto di scorrere fino alla fine di un accordo di "Termini di servizio" prima che si possa continuare. elementi HTML espongono diverse proprietà di scorrimento l'applicazione Web può utilizzare per rilevare quando una barra di scorrimento raggiunge il fondo di un elemento.

istruzione

1 Avviare un editor HTML e aprire un documento HTML.

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

<Textarea id = righe "textarea1" = "4" cols = "55">
dati di test di prova dei dati dati di test dati di test dati di test
dati di test di prova dei dati dati di test dati di test dati di test
dati di test di prova dei dati dati di test dati di test dati di test
dati di test di prova dei dati dati di test dati di test dati di test
dati di test di prova dei dati dati di test dati di test dati di test
dati di test di prova dei dati dati di test dati di test dati di test
dati di test di prova dei dati dati di test dati di test dati di test
</ Textarea>

<Input type = valore "pulsante" = "Verificare posizione di scorrimento" onclick = "return bottomReached ( 'textarea1')" />

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

3 Aggiungere questa funzione JavaScript per sezione head del documento:

<Script>
Funzione bottomReached (objectID) {

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

if (actualLocation> scrollHeight)
bottomReached = true;

alert ( "Bottom raggiunto =" + bottomReached);
}
</ Script>

Questa funzione recupera un riferimento all'oggetto textarea. La funzione poi ottiene posizione attuale della barra di scorrimento, aggiungendo il suo valore scrollTop al suo valore offsetHeight. Se la posizione attuale è maggiore del valore scrollHeight del textarea, la variabile bottomReached variabile diventa vero. In caso contrario, la funzione imposta su false.

4 Salvare il documento e visualizzarlo nel browser. Viene visualizzato il testo textarea che contiene. Fare clic sul pulsante "Verifica posizione di scorrimento". Le piste funzione e una finestra di messaggio "Bottom raggiunto = false." Scorrere fino alla fine della textarea e cliccare nuovamente sul pulsante. Il messaggio dice "Bottom raggiunto = true."

Consigli e avvertenze

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