Scroll en jQuery

Por Julio Giampiere Grados Caballero
Scroll en jQuery

En este tutorial aprenderemos a usar el método scroll de jQuery, además poder manejar a scrollTop, método que también es manipulable con animate.

El evento de desplazamiento o scroll se produce cuando el usuario se desplaza en el elemento especificado por el selector. El evento scroll funciona para todos los elementos de desplazamiento y el objeto window. El método scroll() activa una función a ejecutarse cuando se produce el evento de desplazamiento.

En el siguiente ejemplo veremos cómo se desarrolla el evento scroll sobre un elemento seleccionado y una vez realizado se agregara un contenido html a otro elemento. Veamos


Un evento scroll se envía cada vez que la posición de desplazamiento del elemento cambia, independientemente de la causa. Un clic del ratón o arrastrar la barra de desplazamiento, arrastre dentro del elemento, al presionar las teclas de flecha, o el uso de la rueda de desplazamiento del ratón podría provocar este evento. Recordar que este evento también se puede usar sobre todo la ventana o window. de la siguiente manera.


Hemos visto en este ejemplo como aplicar el scroll sobre toda la ventana o window, de esa manera podemos agregar un contenido después de nuestra aplicación librería donde agregaremos más funcionalidades en adelante. 

Podemos utilizar otro método con scroll, el cual scrollTop(), que nos ayuda a obtener la posición vertical actual de la barra de desplazamiento para el elemento seleccionados o ajustar la posición vertical de la barra de desplazamiento para cada elemento coincidente.


Vemos que indicando la posición donde queremos establecer el scroll a través del método scrollTop(), y de manera rápida podríamos agregar más funcionalidades con diferentes métodos adicionales.


En este ejemplo por medio del método animate, animamos el desplazamiento con ayuda de la propiedad scrollTop, de acuerdo a las teclas up y down, de acuerdo a ciertas condiciones que hemos agregado, con respecto a las posiciones de los elementos HTML que contamos en el documento web.

Bien como objetivo de este tutorial tenemos que podemos manipular el scroll a nuestra conveniencia a través de distintos métodos de jQuery, todos logrando una finalidad en común por medio de distintas lógicas o algoritmos.

Si necesitas conocer más sobre jQuery, recuerda que contamos con un curso de jQuery y también de JavaScript, para que te sumerjas en el mundo de animaciones web.

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Julio Giampiere Grados Caballero

Julio Giampiere Grados Caballero