como llamar a una funcion javascript al hacer scroll

azaz · #1 (**permalink**) 23/03/2015, 09:53

Necesito llamar a una funcion javascript cuando el usuario hacer scroll vertical desplazando 200 pixeles, solo con javascript sin jquery, saludos.

MaNuX0218 · #2 (**permalink**) 23/03/2015, 10:16

Código Javascript:

Ver originalfunction MiFuncion(){
.......
}

Código HTML:

Ver original<body OnScroll="MiFuncion()">

Espero te sirva.

Saludos.

Alexis88 · #3 (**permalink**) 23/03/2015, 10:17

Utiliza el evento scroll y con la propiedad scrollY (o pageYOffset si buscas compatibilidad con navegadores antiguos), obtén la cantidad de píxeles desplazados.

Código Javascript:

Ver originalwindow.addEventListener("scroll", function(){
    if (this.scrollY >= 200){
        tuFuncion();
    }
}, false);

Saludos

azaz · #4 (**permalink**) 23/03/2015, 10:49

Muchas gracias eso es lo que queria, pero como lo podria hacer para llamar a la funcion cada vez que se desplacen 200px no a partir de 200 pixeles llamarla constantemente mientra se hace scroll.

saludos

Alexis88 · #5 (**permalink**) 23/03/2015, 10:59

La condición tendría que determinar que la cantidad de píxeles desplazados sea divisible por 200.

Saludos

azaz · #6 (**permalink**) 23/03/2015, 11:15

Gracias nuevamente por tu ayuda, volviendo al tema no hay manera de que me funcione profe este condicional sin exito.

Código Javascript:

Ver originalif((this.scrolly/200)>=1)

Alexis88 · #7 (**permalink**) 23/03/2015, 11:19

Cuando un número es divisible por otro, el residuo siempre es igual a cero. En JavaScript, así como en otros lenguajes de programación, puedes obtener el residuo de una división haciendo uso del operador %.

Código Javascript:

Ver originalif (this.scrollY % 200 == 0){
    //...
}

Por otra parte, la propiedad offsetTop no puede ser aplicada de esa manera. Recuerda que estás obteniendo la cantidad de píxeles desplazados.

Saludos

azaz · #8 (**permalink**) 23/03/2015, 11:42

Me vas a matar pero bueno ahora esta el problema que solo deberia llamar a la funcion cuando se hace scroll para abajo no para arriba, si me das una pista intento solucionarlo yo solo.
saludos.

Alexis88 · #9 (**permalink**) 23/03/2015, 11:52

Cada vez que te desplaces, guarda la cantidad de píxeles desplazados en una variable, luego, cuando te vuelvas a desplazar, comparas la nueva cantidad de píxeles desplazados con la que guardaste previamente; si la cantidad actual es mayor a la anterior, quiere decir que te desplazaste hacia abajo, caso contrario, hacia arriba.

Esto ya no es problema de programación sino de lógica.

azaz · #10 (**permalink**) 23/03/2015, 12:20

Uno ultima cosa, realmente esto lo quiero para evitar un paginador osea ir cargando contenido pero veo que el condicional no me funciona porque aveces no me carga contenido, que podria hacer?
saludos.

Alexis88 · #11 (**permalink**) 23/03/2015, 12:37

¿Estás intentando hacer un cargador de contenido al bajar con la barra de desplazamiento? Si es así, en lugar de cargar contenido nuevo cada 200 píxeles, hazlo cuando llegues al final.

Código Javascript:

Ver original//Si la cantidad de píxeles desplazados más la altura interna de la ventana (el contenido de la página y el espacio que ocupan las barras de desplazamiento) es igual a la altura total del documento HTML (incluyendo bordes, márgenes, las barras)
if (this.scrollY + this.innerHeight == document.documentElement.offsetHeight){
    //...
}

Saludos

azaz · #12 (**permalink**) 23/03/2015, 13:14

Exactamente eso era lo que necesitaba, muchas gracias nuevamente.
Saludos.