Cómo implementar el desplazamiento automático en JavaScript
Este blog explicará los métodos para implementar el desplazamiento automático en JavaScript.
Cómo implementar el desplazamiento automático en JavaScript?
Para implementar el desplazamiento automático en JavaScript, se pueden aplicar los siguientes métodos:
- "ventana.scrollto ()" Método
- "ventana.Scrollby ()" Método
- Usando "jQuery"
Los siguientes enfoques demostrarán el concepto establecido uno por uno!
Método 1: Implementar desplazamiento automático en JavaScript usando Window.método scrollto ()
El "scrollto ()El método "desplaza el modelo de objeto de documento (DOM) de acuerdo con los valores de coordenadas especificados. Este método se puede implementar para desplazarse automáticamente cualquier elemento HTML de acuerdo con los valores de coordenadas dados.
Sintaxis
ventana.Scrollto (x, y)En la sintaxis dada, x e y se refieren al "X" y "Y"Coordenadas, respectivamente.
Vamos a ver el ejemplo dado a continuación para comprender el concepto establecido.
Ejemplo
En este ejemplo, crearemos un botón con un "al hacer clic"Evento invocar la función AutoScroll ()::
Ahora, incluya un encabezado en el " Las siguientes imágenes se desplazarán automáticamente Después de eso, agregaremos dos imágenes con sus rutas y estableceremos sus dimensiones utilizando las propiedades de altura y ancho: Por último, defina una función llamada "desplazamiento automático()". En su definición de función, aplique el "ventana.scrollto ()"Método y configure las coordenadas de acuerdo con sus requisitos. En nuestro caso, hemos establecido "0"Como la X coordina y"200"Como las coordenadas y: La salida correspondiente será: En la salida anterior, se puede observar que la barra de desplazamiento se desplaza a una determinada ubicación de acuerdo con los valores establecidos en el método scrollTO (). Método 2: Implementar desplazamiento automático en JavaScript usando Window.método scrollby () El "Scrollby ()El método "desplaza el documento de acuerdo con el número dado de píxeles en el argumento. Más específicamente, utilizaremos este método para desplazar automáticamente el DOM a la parte inferior al hacer clic en el botón. Sintaxis En la sintaxis anterior, "X" y "Y"Se refiere a los valores de píxeles horizontales y verticales utilizados para el desplazamiento. Ejemplo En primer lugar, cree un botón con un "al hacer clic"Redirección de eventos a la función"desplazamiento automático()": A continuación, incluya el siguiente encabezado como se discute en el método anterior: Las siguientes imágenes se desplazarán automáticamente Del mismo modo, use el "SRC"Atributo para agregar la ruta de las imágenes y establecer sus dimensiones: Ahora, incluiremos dos párrafos en el " Las imágenes especificadas representan los diferentes escenarios de casos Los literales de plantilla usan los caracteres Backtick (') y se utilizan principalmente para la interpolación de cadenas. Esta técnica se puede utilizar para mostrar el valor de la cadena especificado con la plantilla correspondiente literal utilizada para él. Se colocará en la definición de función original junto con el valor de la función de devolución de llamada. Finalmente, defina la función llamada "desplazamiento automático()". Aquí, aplique el "ventana.Scrollby ()"Método y establece el número de píxeles de modo que se desplazan automáticamente a la ubicación requerida del DOM: En nuestro caso, Auto Scroll se desplazará hacia abajo hacia la parte inferior de la página: En la salida anterior, se puede ver que el DOM se desplaza automáticamente hasta que la parte inferior del botón hace clic. Método 3: Implementar desplazamiento automático en JavaScript usando jQuery Esta técnica se puede implementar para desplazarse automáticamente la imagen especificada al incluir el "jQuery"Biblioteca y sus métodos, como ScrollTop () y Height (). Más específicamente, utilizaremos el método scrollTop () para establecer la posición vertical de barra de desplazamiento para los elementos seleccionados. Sintaxis Aquí el "selector"Indica el"documento"En el ejemplo discutido a continuación. El siguiente ejemplo ilustra el concepto declarado. Ejemplo Primero, especifique la fuente del "jQueryBiblioteca en la etiqueta de script:
ventana.Scrollto (0, 200);
ventana.Scrollby (0, 500);