0

Necesito saber como saber cuando el scroll es hacia arriba o hacia abajo. Mi código actual es el siguiente:

componentDidMount(){
    window.addEventListener('scroll', this.handleScroll, { passive: true })
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  }
  handleScroll(event) {
    // No sé como registrar el valor del scroll para realizar la comparación
  }

la idea es que setee el state: scrollYUp a true o a false.

1 respuesta 1

2

La información del suministrada al manejador del evento no te va a dar la información suficiente para poder saber si el scroll se realiza hacia arriba o hacia abajo.

Para ello debes almacenar el valor de la posición cada vez que se ejecuta el manejador, de esta manera podrás saber, comparando el valor actual con el valor anterior, la dirección del scroll

Utilizando el código de este post puedes encontrar la solución. https://stackoverflow.com/questions/31223341/detecting-scroll-direction

Deberas adaptarlo para que funcione en tu desarrollo, debes adaptar

  1. Lugar donde almacenar el ultimo valor del scroll
  2. Asignación del manejador
// ultimo valor almacenado 
// si el codigo se ejecuta dentro de una clase asignalo como una propiedad de esta)
var lastScrollTop = 0;

//lo importante es el codigo de la funcion no como se registra
element.addEventListener("scroll", function(){ 
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop){
      // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
3
  • 1
    Hola por favor modifica tu publicación, es importante revisar Cómo responder, agrega la información esencial del enlace en español a tu respuesta, sería de gran ayuda a la comunidad, saludos.
    – Jorgesys
    Commented el 26 abr. 2019 a las 13:50
  • 1
    Mejor? No podia poner la respuesta como comentario, ya que todavia no es posible. Tampoco me siento cómodo pegando código de una respuesta que no he realizado yo, el crédito debería ir para el post original no para mi.
    – Alberto
    Commented el 29 abr. 2019 a las 11:56
  • 1
    @Alberto Mejor, y comprendo si no quieres pegar código original... pero no te quites mérito: encontraste una solución, la tradujiste y la compartiste para que sea de utilidad a otros usuarios... y por ello también mereces crédito. Si piensas que la otra pregunta se lo merece, dale +1 (yo lo hice en las dos). Muchas gracias por colaborar.
    – Alvaro Montoro
    Commented el 3 may. 2019 a las 1:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.