Durante la navigazione nelle pagine web, lo scorrimento di un elemento mantiene l'utente concentrato catturando la sua attenzione per un lungo periodo. Questa funzionalità può essere applicata quando un utente deve scorrere con un solo clic o, nel caso di test di automazione, per controllare istantaneamente il contenuto aggiunto in fondo alla pagina. In tali scenari, lo scorrimento di un elemento in JavaScript aggiunge funzionalità da applicare con un solo clic senza molta interazione da parte dell'utente e consente di risparmiare tempo.
Questo manuale ti guiderà a scorrere fino a un elemento usando JavaScript.
Come scorrere fino a un elemento usando JavaScript?
Per scorrere fino a un elemento utilizzando JavaScript, puoi utilizzare:
-
- “ scrollIntoView() ' metodo
- “ scorrere() ' metodo
- “ scorrere verso () ' metodo
Gli approcci menzionati verranno illustrati uno per uno!
Metodo 1: scorrere fino a un elemento in JavaScript utilizzando il metodo scrollIntoView()
Il ' scrollIntoView() ” scorre un elemento nell'area visibile del Document Object Model (DOM). Questo metodo può essere applicato per ottenere l'HTML specificato e applicarvi il metodo particolare con l'aiuto dell'evento onclick.
Sintassi
elemento.scrollIntoView ( allineare )
Nella sintassi data, ' allineare ” indica il tipo di allineamento.
Esempio
Nell'esempio seguente, aggiungi la seguente intestazione usando ' ” tag:
< h2 > Fare clic sul pulsante per scorrere fino all'elemento. h2 >
Ora, crea un pulsante con un ' al clic ” evento che richiama la funzione “ scrollElement() :
< fr >
Successivamente, specifica l'origine dell'immagine e il suo ID per poterlo scorrere:
Infine, definisci una funzione denominata “ scrollElement() ' che recupererà l'elemento richiesto utilizzando ' document.getElementById() ” e applicare il metodo scrollIntoView() su di esso per far scorrere l'immagine:
elemento var = document.getElementById ( 'div' ) ;
elemento.scrollIntoView ( ) ;
}
Codice CSS
Nel codice CSS, applica le seguenti dimensioni per regolare la dimensione dell'immagine facendo riferimento all'id dell'immagine ' div ”:
#div{altezza: 800px;
larghezza: 1200px;
troppopieno: automatico;
}
L'output corrispondente sarà:
Metodo 2: scorrere fino a un elemento in JavaScript utilizzando il metodo window.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, impostarne le coordinate utilizzando una funzione e scorrere l'immagine specificata.
Sintassi
scorrimento.finestra ( coordinata x, coordinata y )
Nella sintassi sopra, ' x-coord ” si riferisce alle coordinate X e “ y-coord ” indica le coordinate Y.
L'esempio seguente spiega il concetto affermato.
Esempio
Ripetere gli stessi passaggi per aggiungere l'intestazione, creare un pulsante, applicare l'evento onclick e specificare l'origine dell'immagine con il suo ID:
< h2 > Fare clic sul pulsante per scorrere fino all'elemento. h2 >< pulsante al clic = 'scrollElement()' > Elemento di scorrimento pulsante >
< fr >
< Immagine src = 'immagine.PNG' id = 'div' >
Quindi, definisci una funzione denominata ' scrollElement() ”. Qui, regoleremo le coordinate usando il ' finestra.scorrere() ” accedendo alla funzione denominata “ Posizione() ” e applicandolo sull'elemento dell'immagine recuperato:
scorrimento.finestra ( 0 , Posizione ( document.getElementById ( 'div' ) ) ) ;
}
Successivamente, definisci una funzione denominata ' Posizione() ” prendendo una variabile obj come argomento. Inoltre, applica il ' offsetParent ” proprietà, che accederà all'antenato più vicino che non ha una posizione statica e lo restituirà. Quindi, incrementa il valore massimo corrente inizializzato con l'aiuto di ' offsetTop ” proprietà che restituirà la prima posizione rispetto al genitore(offsetParent) e restituirà il valore di “ cima attuale ” quando la condizione aggiunta viene valutata come vera:
dove top corrente = 0 ;
Se ( obj.offsetParent ) {
fare {
currenttop += obj.offsetTop;
} mentre ( ( obj = obj.offsetParent ) ) ;
Restituzione [ corrente superiore ] ;
}
}
Infine, modella il contenitore creato secondo le tue esigenze:
altezza: 1000px;
larghezza: 1000px;
troppopieno: automatico;
}
Produzione
Metodo 3: scorrere fino a un elemento in JavaScript utilizzando il metodo scrollTo()
Il ' scorrere verso () Il metodo ” scorre il documento specificato alle coordinate assegnate. Questo metodo può essere implementato in modo simile per ottenere l'elemento utilizzando il suo id ed eseguendo la funzionalità richiesta per scorrere l'immagine particolare sul DOM.
Sintassi
finestra.scorri verso ( x e y )
Qui, ' X ' e ' Y ” punta alle coordinate xey.
Dai un'occhiata al seguente esempio.
Esempio
Innanzitutto, ripeti i passaggi discussi sopra per aggiungere un'intestazione, un pulsante con un evento onclick e un'immagine come segue:
< h2 > Fare clic sul pulsante per scorrere fino all'elemento. h2 >< pulsante al clic = 'scrollElement()' > Elemento di scorrimento pulsante >
< fr >
< img src = 'immagine.JPG' id = 'div' >
Quindi, definisci una funzione denominata ' scrollElement() ” e imposta lo scroll invocando il metodo Position() nel metodo scrollTo():
finestra.scorri verso ( 0 , Posizione ( document.getElementById ( 'div' ) ) ) ;
}
Infine, definisci una funzione denominata Position() e applica in modo simile i passaggi sopra discussi per impostare le coordinate dell'immagine specificata:
dove top corrente = 0 ;
Se ( obj.offsetParent ) {
fare {
currenttop += obj.offsetTop;
} mentre ( ( obj = obj.offsetParent ) ) ;
Restituzione [ corrente superiore ] ;
}
}
Produzione
Abbiamo discusso tutti i metodi convenienti per scorrere fino a un elemento usando JavaScript.
Conclusione
Per scorrere fino a un elemento in JavaScript, utilizza ' scrollIntoView() ” per accedere all'elemento e applicare la funzionalità specificata, il “ finestra.scorrere() ” per recuperare l'elemento, impostarne le coordinate utilizzando una funzione e scorrere l'immagine, oppure utilizzare il “ scorrere verso () ” per recuperare l'elemento e scorrerlo di conseguenza. Questo blog ha dimostrato il concetto per scorrere fino a un elemento utilizzando JavaScript.