Come scorrere su un elemento usando JavaScript

Ora, crea un pulsante con un "al clic"Evento che invoca la funzione"Scrollelement ():

Elemento di scorrimento

Successivamente, specificare la fonte dell'immagine e il suo ID per essere scorretti:

Infine, definisci una funzione chiamata "Scrollelement ()"Che prenderà l'elemento richiesto usando il"documento.getElementById ()"Metodo e applicare il metodo ScrollIntOVIEW () su di esso per scorrere l'immagine:

funzione scrollelement ()
var element = document.getElementById ("div");
elemento.scrollIntOVIEW ();

Codice CSS

Nel codice CSS, applica le seguenti dimensioni per regolare la dimensione dell'immagine facendo riferimento all'ID immagine "div":

#div
Altezza: 800px;
larghezza: 1200px;
Overflow: auto;

L'output corrispondente sarà:

Metodo 2: scorrere su un elemento in JavaScript usando la finestra.Metodo Scroll ()

IL "finestra.scorrere()"Il metodo scorre la finestra in base ai valori delle coordinate nel documento. Questo metodo può essere implementato per recuperare l'ID immagine, impostare le sue coordinate usando una funzione e scorrere l'immagine specificata.

Sintassi

finestra.Scroll (X-Coord, Y-Coord)

Nella sintassi sopra, "X-coord"Si riferisce alle coordinate X e"Y-coord"Indica le coordinate Y.

Il seguente esempio spiega il concetto dichiarato.

Esempio

Ripeti gli stessi passaggi per aggiungere l'intestazione, crea un pulsante, applica l'evento OnClick e specifica la sorgente dell'immagine con il suo ID:

Fai clic sul pulsante per scorrere sull'elemento.

Elemento di scorrimento

Successivamente, definisci una funzione chiamata "Scrollelement ()". Qui, regoleremo le coordinate usando il "finestra.scorrere()"Metodo accedendo alla funzione denominata"Posizione()"E applicandolo sull'elemento immagine recuperato:

funzione scrollelement ()
finestra.Scroll (0, posizione (documento.getElementById ("div")));

Successivamente, definisci una funzione chiamata "Posizione()"Prendere un OBJ variabile come argomento. Inoltre, applica il "offsetparent"Proprietà, che accederà all'antenato più vicino che non ha una posizione statica e la restituirà. Quindi, incrementa il valore superiore di corrente inizializzato con l'aiuto di "offsettop"Proprietà che restituirà la posizione superiore rispetto al genitore (offsetparent) e restituirà il valore di"Top attuale"Quando la condizione aggiunta viene valutata come vera:

posizione funzione (obj)
var currentTop = 0;
if (obj.offsetparent)
Fare
CurrentTop += obj.offsettop;
while ((obj = obj.offsetParent));
return [correntettop];

Infine, modella il contenitore creato in base alle tue esigenze:

#div
Altezza: 1000px;
larghezza: 1000px;
Overflow: auto;

Produzione

Metodo 3: scorrere su un elemento in JavaScript usando il metodo ScrollTo ()

IL "scrollto ()"Il metodo scorre il documento specificato sulle coordinate assegnate. Allo stesso modo questo metodo può essere implementato per ottenere l'elemento utilizzando il suo ID ed eseguendo la funzionalità richiesta per scorrere l'immagine particolare sul DOM.

Sintassi

finestra.Scrollto (x, y)

Qui, "X" E "y"Indica le coordinate X e Y.

Dai un'occhiata al seguente esempio.

Esempio

Innanzitutto, ripeti i passaggi discussi sopra per l'aggiunta di un pulsante, con un evento OnClick e un'immagine come segue:

Fai clic sul pulsante per scorrere sull'elemento.

Elemento di scorrimento

Successivamente, definisci una funzione chiamata "Scrollelement ()"E impostare il metodo invocando la posizione () nel metodo Scrollto ():

funzione scrollelement ()
finestra.Scrollto (0, posizione (documento.getElementById ("div")));

Infine, definisci una funzione denominata posizione () e applica allo stesso modo i passaggi discussi sopra per l'impostazione delle coordinate dell'immagine specificata:

posizione funzione (obj)
var currentTop = 0;
if (obj.offsetparent)
Fare
CurrentTop += obj.offsettop;
while ((obj = obj.offsetParent));
return [correntettop];

Produzione

Abbiamo discusso di tutti i metodi convenienti per scorrere un elemento usando JavaScript.

Conclusione

Per scorrere un elemento in JavaScript, utilizzare il “ScrollIntOview ()"Metodo per accedere all'elemento e applicare la funzionalità specificata,"finestra.scorrere()"Metodo per recuperare l'elemento, impostare le sue coordinate usando una funzione e scorrere l'immagine o utilizzare il"scrollto ()"Metodo per recuperare l'elemento e scorrerlo di conseguenza. Questo blog ha dimostrato il concetto di scorrere su un elemento usando JavaScript.