Sincronizzazione la barra di scorrimento in JavaScript

April 5

Se si dispone di due aree di testo su una pagina Web e necessario sincronizzare le barre di scorrimento, è possibile farlo utilizzando la libreria jQuery JavaScript e la funzione "scrollTop". La funzione "scrollTop" restituisce il numero di pixel che sono nascosti alla vista, in una zona di testo a scorrimento. Ottenendo il valore "scrollTop" per un area di testo e l'impostazione come il valore "scorrimento" per entrambe le aree di testo, è possibile collegare gli stati barra di scorrimento. Ciò consente di scorrere verso l'alto o verso il basso in una zona di testo e la seconda area di testo sarà scorrere verso l'alto o verso il basso per lo stesso numero di pixel.

istruzione

1 Aprire il documento di una pagina Web in un editor HTML o testo. Per aprire il documento in un editor di testo di Windows nativo, fare clic destro sul file, quindi fare clic su "Apri con". Fare clic per selezionare "Blocco note" o "WordPad", quindi fare clic su "OK".

2 Fare clic per posizionare il cursore tra le "<head>" e "<head>" tag vicino alla parte superiore del documento. Premere il tasto "Enter" per creare una riga vuota.

3 Digitare "<script src = 'http: //code.jquery.com/jquery-latest.js" type = "text / javascript'> </ script>" e premere per collegare il documento pagina Web al jQuery "Enter" libreria JavaScript.

4 Digitare "<tipo di script = 'text / javascript'>" per aprire un tag script. Premere Invio."

5 Tipo "$ (function () {" e premere "Invio". Questa riga di codice apre la dichiarazione funzione di script principale.

6 Digitare "$ ( 'textarea [id $ = textarea1]'). Scorrimento (function () {" e premere "Invio". Questa riga di codice restituisce il "id" e "scorrere" valore per l'elemento di testo "textarea1" .

7 Digitare "$ ( 'textarea [id = $ textarea2]')" e premere "Invio". Questa riga di codice restituisce il valore "id" per la seconda area di testo.

8 Tipo ".scrollTop ($ ( 'textarea [id = $ textarea1]') scrollTop ().);" e premere "Invio". Questa riga di codice richiama la funzione "scrollTop" per sincronizzare i valori "scorrimento" di entrambe le aree di testo.

9 Digitare "});" e premere "Invio" per chiudere fuori dalla "scorrere" il codice definizione variabile. Digitare "});" di nuovo e premere "Invio" per chiudere fuori dalla funzione di script principale.

10 Tipo "</ script>" per chiudere i tag script.

11 Fare clic per posizionare il cursore tra il "<body>" e "</ body>" tag e premere "Invio" per creare una riga vuota.

12 Tipo "<textarea id = cols 'textarea1' = '20 'rows =' 5 '>" e premere "Invio" per creare il tag della prima area di testo di apertura.

13 Digita il contenuto che si desidera visualizzare nella prima area di testo.

14 Tipo "</ textarea>" per chiudere il primo tag dell'area di testo.

15 Tipo "<textarea id = cols 'textarea2' = '20 'rows =' 5 '>" e premere "Invio" per creare il tag della seconda area di testo di apertura.

16 Digita il contenuto che si desidera visualizzare nella seconda area di testo.

17 Tipo "</ textarea>" per chiudere il secondo tag dell'area di testo.

18 Fare clic sul menu "File", quindi fare clic su "Salva".