Como implementar rolagem automática em javascript
Este blog explicará os métodos para implementar a rolagem automática em JavaScript.
Como implementar rolagem automática em javascript?
Para implementar rolagem automática no JavaScript, os seguintes métodos podem ser aplicados:
- ““janela.scrollto ()”Método
- ““janela.scrollby ()”Método
- Usando "jQuery”
As seguintes abordagens demonstrarão o conceito declarado um por um!
Método 1: Implementar rolagem automática em javascript usando janela.Método ScrollTo ()
O "scrollto ()”O método rola o modelo de objeto de documento (DOM) de acordo com os valores de coordenadas especificadas. Este método pode ser implementado para rolar automaticamente qualquer elemento HTML de acordo com os valores de coordenadas fornecidas.
Sintaxe
janela.Scrollto (x, y)Na sintaxe dada, X e Y se referem ao “X" e "Y“Coordenadas, respectivamente.
Vamos verificar o exemplo abaixo para entender o conceito declarado.
Exemplo
Neste exemplo, criaremos um botão com um “ONCLICKEvento Invocando a função AUTOSCROLL ():
Agora, inclua um título no “ As seguintes imagens serão roladas automaticamente Depois disso, adicionaremos duas imagens com seus caminhos e definiremos suas dimensões usando as propriedades de altura e largura: Por fim, defina uma função chamada “auto rolagem()”. Em sua definição de função, aplique o “janela.scrollto ()”Método e defina as coordenadas de acordo com seus requisitos. No nosso caso, definimos “0”Como o X coordena e“200”Como o Y coordena: A saída correspondente será: Na saída acima, pode -se observar que a barra de rolagem é rolada para um determinado local de acordo com os valores definidos no método scrollto (). Método 2: Implementar rolagem automática em javascript usando janela.Método scrollby () O "scrollby ()”O método rola o documento de acordo com o número fornecido de pixels no argumento. Mais especificamente, utilizaremos esse método para rolar automaticamente o DOM até o fundo do botão Clique. Sintaxe Na sintaxe acima, “x" e "y”Refere -se aos valores de pixel horizontal e vertical utilizados para rolagem. Exemplo Em primeiro lugar, crie um botão com um “ONCLICK”Evento redirecionando para a função“auto rolagem()”: Em seguida, inclua o título a seguir, conforme discutido no método anterior: As seguintes imagens serão roladas automaticamente Da mesma forma, use o “src”Atributo para adicionar o caminho das imagens e definir suas dimensões: Agora, incluiremos dois parágrafos no “ As imagens especificadas representam os diferentes casos-cenas Os literais de modelos usam os caracteres de backtick (') e são usados principalmente para interpolação de string. Esta técnica pode ser utilizada para exibir o valor de string especificado em relação ao modelo correspondente literal utilizado para isso. Ele será colocado na definição de função original junto com o valor da função de retorno de chamada. Finalmente, defina a função chamada “auto rolagem()”. Aqui, aplique o “janela.scrollby ()”Método e defina o número de pixels de modo que ele role automaticamente para a localização necessária do DOM: No nosso caso, a rolagem automática rolará para baixo em direção à parte inferior da página: Na saída acima, pode -se observar que o DOM está rolado automaticamente até a parte inferior sobre o botão Clique. Método 3: Implementar rolagem automática em javascript usando jQuery Esta técnica pode ser implementada para rolar automaticamente a imagem especificada, incluindo o “jQueryBiblioteca e seus métodos, como scrolltop () e altura (). Mais especificamente, usaremos o método scrolltop () para definir a posição vertical da barra de rolagem para os elementos selecionados. Sintaxe Aqui o "Seletor”Indica o“documento”No exemplo discutido abaixo. O exemplo a seguir ilustra o conceito declarado. Exemplo Primeiro, especifique a fonte do “jQuery”Biblioteca na tag de script:
janela.Scrollto (0, 200);
janela.scrollby (0, 500);