Come implementare la pergamena automatica in JavaScript
Questo blog spiegherà i metodi per implementare lo scorrimento automatico in JavaScript.
Come implementare la pergamena automatica in JavaScript?
Per implementare lo scorrimento automatico in JavaScript, è possibile applicare i seguenti metodi:
- "finestra.scrollto ()" Metodo
- "finestra.SCROLLBY ()" Metodo
- Usando "jQuery"
I seguenti approcci dimostreranno il concetto indicato uno per uno!
Metodo 1: implementare la scorrimento automatico in JavaScript usando la finestra.Metodo Scrollto ()
IL "scrollto ()"Il metodo scorre il modello di oggetto document (DOM) in base ai valori delle coordinate specificate. Questo metodo può essere implementato per scorrere automaticamente qualsiasi elemento HTML in base ai valori delle coordinate indicati.
Sintassi
finestra.Scrollto (x, y)Nella sintassi data, xey si riferiscono a "X" E "Y"Coordina, rispettivamente.
Dai un'occhiata all'esempio di seguito per capire il concetto dichiarato.
Esempio
In questo esempio, creeremo un pulsante con un "al clic"Evento che invoca la funzione AutoSCroll ():
Ora, includi un'intestazione nel " Le seguenti immagini verranno scorrette automaticamente Successivamente, aggiungeremo due immagini con i loro percorsi e imposteremo le loro dimensioni usando le proprietà dell'altezza e della larghezza: Infine, definisci una funzione chiamata "scorrimento automatico()". Nella sua definizione di funzione, applica il "finestra.scrollto ()"Metodo e impostare le coordinate in base alle tue esigenze. Nel nostro caso, abbiamo impostato "0"Come X coordina e"200"Come le coordinate Y: L'output corrispondente sarà: Nell'output di cui sopra, si può osservare che la barra di scorrimento viene scorreta in una determinata posizione secondo i valori impostati nel metodo ScrollTo (). Metodo 2: implementare la scorrimento automatico in JavaScript usando la finestra.Metodo Scrollby () IL "SCROLLBY ()"Il metodo scorre il documento in base al numero dato di pixel nell'argomento. Più specificamente, utilizzeremo questo metodo per scorrere automaticamente il DOM sulla parte inferiore sul clic del pulsante. Sintassi Nella sintassi sopra, "X" E "y"Si riferisce ai valori dei pixel orizzontali e verticali utilizzati per lo scorrimento. Esempio In primo luogo, crea un pulsante con un "al clic"Reindirizzamento dell'evento alla funzione"scorrimento automatico()": Successivamente, includi la seguente intestazione come discusso nel metodo precedente: Le seguenti immagini verranno scorrette automaticamente Allo stesso modo, usa il “src"Attributo per aggiungere il percorso delle immagini e impostare le loro dimensioni: Ora includeremo due paragrafi nel " Le immagini specificate rappresentano i diversi casi scenari I letterali modello usano i caratteri del backtic (') e sono utilizzati principalmente per l'interpolazione delle stringhe. Questa tecnica può essere utilizzata per visualizzare il valore della stringa specificato rispetto al modello corrispondente letterale utilizzato per esso. Verrà inserito nella definizione della funzione originale insieme al valore della funzione di callback. Infine, definisci la funzione denominata "scorrimento automatico()". Qui, applica il "finestra.SCROLLBY ()"Metodo e impostare il numero di pixel in modo tale da fare scorrere automaticamente sulla posizione richiesta del DOM: Nel nostro caso, Auto Scroll scorrere verso il basso verso la parte inferiore della pagina: Nell'output sopra, si può vedere che il DOM viene scorto automatico fino al basso sul pulsante Click. Metodo 3: implementare la scorrimento automatico in JavaScript usando jQuery Questa tecnica può essere implementata per scorrere automaticamente l'immagine specificata includendo "jQuery"Biblioteca e i suoi metodi, come scrolltop () e altezza (). Più specificamente, useremo il metodo ScrollTop () per impostare la posizione di scorrimento verticale per gli elementi selezionati. Sintassi Qui, il "selettore"Indica il"documento"Nell'esempio discusso seguente. Il seguente esempio illustra il concetto dichiarato. Esempio Innanzitutto, specificare la fonte del "jQuery"Libreria nel tag script:
finestra.Scrollto (0, 200);
finestra.SCHROLLBY (0, 500);