El desplazamiento permite a los usuarios ver las páginas web/documentos largos de izquierda a derecha o de arriba a abajo. Se puede realizar mediante la adición de barras de desplazamiento horizontales y verticales según el contenido. Las dimensiones de la barra de desplazamiento, como la altura y el ancho, se establecen de forma predeterminada. Sin embargo, estos se pueden personalizar con la ayuda de sus métodos de JavaScript asociados. Una vez que se pueden agregar o configurar en el documento, el usuario puede identificarlos fácilmente utilizando el ' desplazamientoSuperior() ', y el ' desplazarse hacia la izquierda () ' métodos.
Esta publicación explica el propósito y la funcionalidad del método 'scrollLeft()' en jQuery.
¿Qué es el método 'scrollLeft ()' en jQuery?
El ' desplazarse hacia la izquierda () El método está diseñado específicamente para que la barra de desplazamiento horizontal establezca y recupere su posición en píxeles. Calcula la posición de la barra de desplazamiento del elemento HTML seleccionado. Se aplica principalmente a los elementos div, contenedor y sección.
Sintaxis (Establecer la posición de la barra de desplazamiento horizontal)
$ ( selector ) .scrollLeft ( posición )
La sintaxis anterior toma el valor entero como su ' posición ” argumento para establecer la posición de la barra de desplazamiento horizontal del selector de destino.
Sintaxis (Obtener la posición de la barra de desplazamiento horizontal)
$ ( selector ) .scrollLeft ( )
Esta sintaxis devuelve el valor del argumento de 'posición' del selector en píxeles.
Usemos el método definido de forma práctica.
código HTML
Primero, eche un vistazo al código HTML indicado:
< sección estilo = 'alto: 150 px; ancho: 200 px; margen: automático; borde: 2 px negro sólido; desbordamiento: automático;espacio en blanco: nowrap;' >
< h2 > Bienvenido a LinuxHint ! h2 >
sección >
< botón > Posición de ajuste botón >
En las líneas de código anteriores:
- El '
La etiqueta ” contiene una sección dentro del documento HTML personalizada con la ayuda del atributo “estilo”. - Dentro de la sección creada, el “ La etiqueta ” define el subtítulo.
- Por último, el “
La etiqueta ” agrega un botón.
Nota: Siga el código HTML dado en todos los ejemplos de esta publicación.
Ejemplo 1: Aplicar el método “scrollLeft()” para establecer la posición de la barra de desplazamiento (horizontal)
Este ejemplo utiliza el método 'scrollLeft()' para establecer la barra de desplazamiento (horizontal) en la posición especificada.
Código jQuery
Siga el código jQuery dado:
< guion origen = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > guion >< guion >
$ ( documento ) .listo ( función ( ) {
$ ( 'botón' ) .hacer clic ( función ( ) {
$ ( 'sección' ) .scrollLeft ( 50 ) ;
} ) ;
} ) ;
guion >
En este fragmento de código:
- Primero, especifique la ruta CDN de la biblioteca jQuery en el '