saber los pixeles que recorre usuario al hacer scroll

[azaz]

Estoy intentando usar los eventos de toques de javascript pero estoy teniendo problemas, no consigo saber los pixeles que recorre el usuario con touchmove, con el evento scroll antes lo hacia con scrollY pero si uso touchmove no se como seria, alguien me puede ayudar?

[superweb360]

si usases jquery podrias usar la funcion scroll()

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_scroll

[azaz]

vale ahora si que me funciona pero ahora no me hace exactamente lo que necestito y es pararse detener el scroll justo en una cantidad de pixeles este es el javascript:

Código Javascript:

window.addEventListener("touchmove", function(event){
     if (this.scrollY >= 3000){
          event.preventDefault();
     }  
}, false);
 

es decir el usuario al hacer scroll en el dispositivo tactil quiero detenerlo justo en los 3000pixeles pero no se detiene es decir al hacer scoll y soltar el dedo la pantalla se desliza muy rapido y hasta que no para no se desactiva el evento, sobrepasandose la cantidad de 3000px, como podria conseguir que se detubiera justo ahi la pantalla del dispositivo?

saludos

[azaz]

Hola gracias por contestar, pero no quiero usar jquery solo para esto, saludos

[superweb360]

y poniendo this.scrollY = 3000;?

Código Javascript:

window.addEventListener("touchmove", function(event){
         if (this.scrollY >= 3000){
              event.preventDefault();
              this.scrollY = 3000;
         } 
    }, false);
 

[Alexis88]

Puedes usar el método scrollTo. Y si quieres añadirle un efecto de deslizamiento suave, puedes usar un temporizador y, por cada iteración, solo tienes que sumar una pequeña cantidad de píxeles para el desplazamiento. Cuando se haya desplazado la cantidad indicada, cortas el ciclo.

Saludos

[azaz]

Hola, gracias a los dos por las respuestas.
Ya probé scrollTo, pero no me funciona bien porque mientras se esté haciendo scroll una vez se suelta el táctil no funciona scrollTo hasta que no para el scroll, entonces el problema está en que hago una llamada ajax al recorrer unos pixeles para cargar contenido pero el contenido final no quiero que se vea solo el contenido que cargo, es decir tengo tres div y el segundo div cargo contenido con ajax bastante contenido, sI solo tuviera un div para cargar no habría problema llamo ajax al final pero como no es asin no me hace el efecto que quiero.No se si se entiende mi problema. Quizás con el temporizador que dices se soluciona el problema, me puedes poner un ejemplo que no lo entendí bien.
Saludos

[Alexis88]

Deberías tener cuidado con esas peticiones asíncronas al hacer scroll, porque puedes llegar a saturar al servidor y generar una experiencia nada agradable para el usuario. En ese caso, es mejor que tengas los contenidos ya cargados y si no quieres que se muestren desde un inicio, solamente los tendrías que ocultar/mostrar según lo que el usuario se haya desplazado con la barra.

Ya que estás intentando mostrar contenido por secciones, pienso que sería más sencillo que tengas un menú estático en la parte superior con la misma cantidad de opciones que secciones tengas, luego, al darle clic —por ejemplo— a la cuarta opción del menú, utilizas el método que te dije y desplazas la barra hasta donde empieza la cuarta sección, para lo cual tienes que hacer un pequeño cálculo. Como el menú sería estático, entonces, no importará en qué sección se encuentre el usuario pues siempre tendrá las opciones a la mano y así no tendrá que utilizar la barra para desplazarse y dirigirse hacia otra sección.

Un pequeño ejemplo:

Código HTML:

<nav>
    <li data-seccion = "#sec1">Opción 1</li>
    <li data-seccion = "#sec2">Opción 2</li>
    <li data-seccion = "#sec3">Opción 3</li>
</nav>
 
<div id = "sec1"></div>
<div id = "sec2"></div>
<div id = "sec3"></div>
 

Código Javascript:

var menu = document.querySelector("nav"), 
    objetivo, desplazar, temporizador, permitido = true,
    contador = 0, velocidad = 5, subida, bajada;
 
[].forEach.call(menu.querySelectorAll("li"), function(li){
    li.addEventListener("click", function(){
        if (permitido){
            permitido = false;
            objetivo = document.querySelector(this.dataset.seccion);
            desplazar = objetivo.offsetTop - menu.offsetTop - menu.offsetHeight;
            temporizador = setInterval(function(){
                contador = desplazar > contador ? contador + velocidad : contador - velocidad;
                window.scrollTo(0, contador);
            }, 1);
        }
    }, false);
});
 
window.addEventListener("scroll", function(){           
    subida = desplazar - this.scrollY;
    bajada = this.scrollY - desplazar;
    contador = this.scrollY;
    
    //Si alcanza el punto exacto
    if (this.scrollY == desplazar){
        clearInterval(temporizador);
        permitido = true;
    }
    
    if ((subida > 0 && subida < velocidad) || (bajada > 0 && bajada < velocidad)){
        clearInterval(temporizador);
        
        //Subida
        if (subida > 0 && subida < velocidad){
            contador = desplazar > contador ? contador + subida : contador - subida;
        }
    
        //Bajada
        if (bajada > 0 && bajada < velocidad){      
            contador = desplazar > contador ? contador + bajada : contador - bajada;
        }       
        
        window.scrollTo(0, contador);
        permitido = true;
    }
}, false);
 

DEMO

En el documento HTML, tengo un menú de opciones y divisiones en donde mostraré determinado contenido. Cada opción del menú posee un pseudo-atributo en donde se encuentra el id de cada división, acompañado cada uno de una almohadilla o numeral.

En el código JS, tomo al menú y declaro algunas variables que usaré más adelante, entre ellas, la velocidad con la cual desplazaré la barra para así darle un efecto de desplazamiento suave, además, una variable que determinará si está permitido o no el uso de las opciones del menú, esto es para evitar que mientras ocurre el efecto de desplazamiento suave, el usuario pulse otra opción, produciendo un conflicto. El valor de esta última variable iniciará como true para indicar que se puede proceder, cambiará a false cuando se inicie el proceso y volverá a tener el valor booleano true cuando este culmine. Enseguida, mediante un bucle, recorro al conjunto de opciones que posee el menú y, en cada iteración, delego una función por cada vez que se produzca el evento click en cualquiera de las opciones.

Al momento de producirse el referido evento, ejecuto una función, en la cual tomo a la división que deseo mostrar, para lo cual accedo al pseudo-atributo de la opción pulsada y mediante el valor que contiene, tomo a la división que corresponda de acuerdo a su id. Luego, calculo la distancia a desplazarse, la cual deriva de la resta de la distancia que hay desde el tope de la página hasta el tope de la división en cuestión menos la distancia que hay desde el tope de la página hasta el tope del menú menos la altura del menú; de esta forma, el desplazamiento deberá de realizarse hasta que el tope de la división coincida con el borde inferior del menú.

Luego de esto, utilizo un temporizador, en el cual se ejecutará una función cada milésima de segundo. En dicha función, sumo o resto a una variable contadora la cantidad de píxeles determinada en la variable de velocidad, dependiendo esto de si la cantidad a desplazarse es mayor o menor que el valor del contador. En el primer caso, es decir, cuando la cantidad a desplazarse sea mayor al valor del contador, el desplazamiento es hacia abajo, caso contrario, hacia arriba. Seguidamente, utilizo el método scrollTo para desplazar a la barra la cantidad de píxeles que determina el valor actualizado de la variable contadora.

Mientras lo anterior ocurre, delego una función a la ventana, la cual se ejecutará cada vez que se produzca el evento scroll en la misma, es decir, cuando esté ocurriendo un desplazamiento con la barra. En dicha función, tomo la diferencia existente entre la cantidad de píxeles desplazados hasta ese momento (el desplazamiento real se da de píxel en píxel) menos la cantidad de píxeles a desplazarse. Tomo las diferencias en caso se esté de subida o bajada, además, actualizo el valor de la variable contadora con la cantidad de píxeles desplazados hasta ese momento por si al usuario se le ocurre desplazarse manualmente y luego pulsa una de las opciones del menú, así el efecto de desplazamiento suave ocurrirá desde el punto en el que se encuentra y no desde el tope del documento. Enseguida, utilizo tres condiciones para los tres posibles casos: Cuando la cantidad de píxeles desplazados hasta ese momento haya logrado alcanzar el objetivo, cuando sea mayor a cero y menos a la cantidad de píxeles que determina la variable de velocidad (cuando se está desplazando hacia arriba) y cuando sea el caso contrario a este último (cuando se está desplazando hacia abajo).

En el primer caso, lo único que tengo que hacer es detener al temporizador pues, al haberse alcanzado el objetivo, no hay necesidad de seguir desplazando a la barra. Utilizo la palabra reservada return para terminar la ejecución de la función ya que no queda nada más por hacer y así evito realizar la siguiente evaluación de manera innecesaria.

Para el segundo y tercer caso, los cuales se producen porque la cantidad de píxeles a desplazarse (el objetivo) no siempre coincide con la suma que se va realizando entre el contador y la velocidad, es decir, a veces hay que desplazarse 532 píxeles, pero si sumas de 5 en 5, nunca llegarás a dicha cifra, ejecuto un bloque de instrucciones que consiste en lo siguiente: Primero, detengo al temporizador, luego, según sea que esté desplazándome hacia arriba o hacia abajo, sumo o resto a la variable contadora la diferencia que queda por desplazarse, para luego desplazar a la barra dicha cantidad de píxeles y así culminar con el proceso.

Si deseas que el desplazamiento se produzca con mayor velocidad, solo incrementa el valor de la variable de velocidad.

Por si buscas compatibilidad con navegadores antiguos, te dejo algunas opciones:

• Para forEach.
• Para addEventListener.
• Para dataset.
• Para querySelector y querySelectorAll.
• Para scrollY.

Saludos

[azaz]

Hola Alexis88, gracias por tu ayuda con ejemplo y demo incluida se agradece. Pero estoy echo un lio te cuento, me dices que tenga cuidado con las llamadas asíncronas pero lo que cargo es contenido de una base de datos que incluye contenido con imágenes y hablamos de bastante contenido es decir que si lo cargo de golpe va muy lento incluso se satura el navegador del cliente. Más o menos lo que quiero es algo como el Youtube en los móviles. Que sistema usa el YouTube?
Saludos

[Alexis88]

Si aplicas lo que te he mostrado en el último ejemplo con las peticiones asíncronas, entonces, ya no habrá que preocuparse, pues solo se realizarían cuando el usuario se haya desplazado hasta una determinada sección. Para no repetir la carga cuando vuelva a llegar al mismo punto, verificas si dicha sección posee contenido y solo cuando no tenga, realizas la petición.

Saludos

[azaz]

Ahora si que funciona como quería muchas gracias Alexis88.
Saludos