javascript - ejemplo - ¿Cómo puedo determinar la dirección de un evento de desplazamiento jQuery?

onmousedown javascript ejemplo

Question

Estoy buscando algo en este sentido:

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscroll code
   }
});

¿Algunas ideas?

Answer 1

Evento de desplazamiento

El evento scroll se comporta de forma extraña en FF (se dispara muchas veces debido al desplazamiento suave) pero funciona.

Nota: el evento de scroll realidad se dispara al arrastrar la barra de desplazamiento, utilizando las teclas de cursor o la rueda del mouse.

//creates an element to print the scroll position
$("<p id=''test''>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === self.innerHeight()) {
      console.log("► End of scroll");
    }

    //saves the current scrollTop
    self.data("lastScrollTop", scrollTop);
});

Evento rueda

También puede echar un vistazo a MDN, expone una gran información sobre el Evento de la rueda .

Nota: el evento de la rueda se dispara solo cuando se usa la rueda del ratón ; Las teclas de cursor y arrastrar la barra de desplazamiento no activan el evento.

Leí el documento y el ejemplo: escuchar este evento en el navegador
y después de algunas pruebas con FF, IE, chrome, safari, terminé con este fragmento de código:

//creates an element to print the scroll position
$("<p id=''test''>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});

Answer 2

Solucion existente

Podría haber 3 soluciones de esta publicación y otra respuesta .

Solución 1

    var lastScrollTop = 0;
    $(window).on(''scroll'', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log(''up 1'');
        }
        else {
            console.log(''down 1'');
        }
        lastScrollTop = st;
    });

Solucion 2

    $(''body'').on(''DOMMouseScroll'', function(e){
        if(e.originalEvent.detail < 0) {
            console.log(''up 2'');
        }
        else {
            console.log(''down 2'');
        }
    });

Solucion 3

    $(''body'').on(''mousewheel'', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log(''up 3'');
        }
        else {
            console.log(''down 3'');
        }
    });

Prueba de navegador múltiple

No pude probarlo en Safari

cromo 42 (Win 7)

• Solución 1
  • Up: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento
• Soltion 2
  • Arriba: no funciona
  • Abajo: no funciona
• Solucion 3
  • Up: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento

Firefox 37 (Win 7)

• Solución 1
  • Up: 20 eventos por 1 scroll.
  • Abajo: 20 eventos por 1 scroll.
• Soltion 2
  • Arriba: no funciona
  • Abajo: 1 evento por 1 desplazamiento
• Solucion 3
  • Arriba: no funciona
  • Abajo: no funciona

IE 11 (Win 8)

• Solución 1
  • Arriba: 10 eventos por 1 desplazamiento (efecto secundario: se produjo un desplazamiento hacia abajo al final)
  • Abajo: 10 eventos por 1 scroll.
• Soltion 2
  • Arriba: no funciona
  • Abajo: no funciona
• Solucion 3
  • Arriba: no funciona
  • Abajo: 1 evento por 1 desplazamiento

IE 10 (Win 7)

• Solución 1
  • Up: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento
• Soltion 2
  • Arriba: no funciona
  • Abajo: no funciona
• Solucion 3
  • Up: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento

IE 9 (Win 7)

• Solución 1
  • Up: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento
• Soltion 2
  • Arriba: no funciona
  • Abajo: no funciona
• Solucion 3
  • Up: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento

IE 8 (Win 7)

• Solución 1
  • Arriba: 2 eventos por 1 desplazamiento (efecto secundario: se produjo un desplazamiento hacia abajo al final)
  • Abajo: 2 ~ 4 eventos por 1 desplazamiento
• Soltion 2
  • Arriba: no funciona
  • Abajo: no funciona
• Solucion 3
  • Up: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento

Solución combinada

Verifiqué que el efecto secundario de IE 11 y IE 8 proviene de la sentencia if else . Por lo tanto, lo reemplacé con if else if como sigue.

A partir de la prueba de navegador múltiple, decidí usar la Solución 3 para los navegadores comunes y la Solución 1 para Firefox e IE 11.

Me referí a esta respuesta para detectar IE 11.

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (/d+/./d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident//7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.$1);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== ''undefined'' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on(''scroll'', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log(''Up'');
            }
            else if(st > lastScrollTop) {
                console.log(''Down'');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $(''body'').on(''mousewheel'', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log(''Up'');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log(''Down'');
            }
        });
    }

Answer 3

¿Por qué nadie usa el objeto de event devuelto por jQuery en scroll?

$window.on(''scroll'', function (event) {
    console.group(''Scroll'');
    console.info(''Scroll event:'', event);
    console.info(''Position:'', this.pageYOffset);
    console.info(''Direction:'', event.originalEvent.dir); // Here is the direction
    console.groupEnd();
});

Estoy usando chromium y no verifiqué en otros navegadores si tienen la propiedad dir .

Answer 4

Almacene la ubicación de desplazamiento anterior, luego vea si la nueva es mayor o menor que esa.

Aquí hay una manera de evitar cualquier variable global ( violín disponible aquí ):

(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           alert(''down'');
       } else {
          alert(''up'');
       }
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately

Answer 5

Deberias intentar esto

var scrl
$(window).scroll(function(){
        if($(window).scrollTop() < scrl){
            //some code while previous scroll
        }else{
            if($(window).scrollTop() > 200){
                //scroll while downward
            }else{//scroll while downward after some specific height
            }
        }
        scrl = $(window).scrollTop();
    });

Answer 6

En caso de que solo quiera saber si se desplaza hacia arriba o hacia abajo con un dispositivo de puntero (mouse o deltaY ), puede usar la propiedad deltaY del evento de la wheel .

$(''.container'').on(''wheel'', function(event) {
  if (event.originalEvent.deltaY > 0) {
    $(''.result'').append(''Scrolled down!<br>'');
  } else {
    $(''.result'').append(''Scrolled up!<br>'');
  }
});

.container {
  height: 200px;
  width: 400px;
  margin: 20px;
  border: 1px solid black;
  overflow-y: auto;
}
.content {
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    Scroll me!
  </div>
</div>

<div class="result">
  <p>Action:</p>
</div>

Answer 7

Entiendo que ya hubo una respuesta aceptada, pero quería publicar lo que estoy usando en caso de que pueda ayudar a alguien. Obtengo la dirección como cliphex con el evento de rueda del ratón pero con soporte para Firefox. Es útil hacerlo de esta manera en caso de que esté haciendo algo como bloquear el desplazamiento y no pueda obtener la parte superior del desplazamiento actual.

Vea una versión en vivo here .

$(window).on(''mousewheel DOMMouseScroll'', function (e) {

    var direction = (function () {

        var delta = (e.type === ''DOMMouseScroll'' ?
                     e.originalEvent.detail * -40 :
                     e.originalEvent.wheelDelta);

        return delta > 0 ? 0 : 1;
    }());

    if(direction === 1) {
       // scroll down
    }
    if(direction === 0) {
       // scroll up
    }
});

Answer 8

Esta es una detección simple y fácil para cuando el usuario se desplaza fuera de la parte superior de la página y cuando vuelve a la parte superior.

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {
        // User has scrolled
    } else {
        // User at top of page
    }
});

Answer 9

Esta es una solución óptima para detectar la dirección justo cuando el usuario finaliza el desplazamiento.

var currentScrollTop = 0 ;

$(window).bind(''scroll'', function () {     

    scrollTop = $(this).scrollTop();

    clearTimeout($.data(this, ''scrollTimer''));
    $.data(this, ''scrollTimer'', setTimeout(function() {

        if(scrollTop > currentScrollTop){
            // downscroll code
            $(''.mfb-component--bl'').addClass(''mfbHide'');
        }else{
            // upscroll code
            $(''.mfb-component--bl'').removeClass(''mfbHide'');
        }
        currentScrollTop = scrollTop;

    }, 250));

});

Answer 10

He visto muchas versiones de buenas respuestas aquí, pero parece que algunas personas tienen problemas con el navegador cruzado, así que esta es mi solución.

Lo he usado con éxito para detectar la dirección en FF, IE y Chrome ... No lo he probado en safari como normalmente uso Windows.

$("html, body").bind({''mousewheel DOMMouseScroll onmousewheel touchmove scroll'': 
    function(e) {
        if (e.target.id == ''el'') return;
        e.preventDefault();
        e.stopPropagation();

        //Determine Direction
        if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0) {
            //Up
            alert("up");

        } else if (e.originalEvent.detail && e.originalEvent.detail <= 0) {
            //Up
            alert("up");

        } else {
            //Down
            alert("down");
        }
    }
});

Tenga en cuenta que también utilizo esto para detener cualquier desplazamiento, por lo que si desea que el desplazamiento se siga produciendo, debe eliminar e.preventDefault(); e.stopPropagation(); e.preventDefault(); e.stopPropagation();

Answer 11

Mantenlo super simple:

JQuery Event Listener Way:

$(window).on(''wheel'', function(){
  whichDirection(event);
});

Vanilla JavaScript Event Listener Way:

if(window.addEventListener){
  addEventListener(''wheel'', whichDirection, false);
} else if (window.attachEvent) {
  attachEvent(''wheel'', whichDirection, false);
}

La función sigue siendo la misma:

function whichDirection(event){
  console.log(event + '' WheelEvent has all kinds of good stuff to work with'');
  var scrollDirection = event.deltaY;
  if(scrollDirection === 1){
    console.log(''meet me at the club, going down'', scrollDirection);
  } else if(scrollDirection === -1) {
    console.log(''Going up, on a tuesday'', scrollDirection);
  }
}

Escribí una publicación más detallada here

Answer 12

Para aquellos que tienen problemas con el desplazamiento elástico, por favor use esta respuesta

Cómo detectar la dirección de desplazamiento

Answer 13

Para ignorar cualquier snap / momentum / bounce en la parte superior e inferior de la página, aquí hay una versión modificada de la respuesta aceptada de Josiah :

var prevScrollTop = 0;
$(window).scroll(function(event){

    var scrollTop = $(this).scrollTop();

    if ( scrollTop < 0 ) {
        scrollTop = 0;
    }
    if ( scrollTop > $(''body'').height() - $(window).height() ) {
        scrollTop = $(''body'').height() - $(window).height();
    }

    if (scrollTop >= prevScrollTop && scrollTop) {
        // scrolling down
    } else {
        // scrolling up
    }

    prevScrollTop = scrollTop;
});

Answer 14

Puede hacerlo sin tener que realizar un seguimiento de la parte superior del desplazamiento anterior, ya que todos los demás ejemplos requieren:

$(window).bind(''mousewheel'', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log(''Scroll up'');
    }
    else {
        console.log(''Scroll down'');
    }
});

No soy un experto en esto, así que siéntete libre de seguir investigando, pero parece que cuando usas $(element).scroll , el evento que se está escuchando es un evento de "desplazamiento".

Pero si escucha específicamente un evento de mousewheel usando el enlace, el atributo originalEvent del parámetro del evento a su devolución de llamada contiene información diferente. Parte de esa información es wheelDelta . Si es positivo, moviste la rueda hacia arriba. Si es negativo, moviste la rueda hacia abajo.

Mi conjetura es que los eventos de rueda de ratón se activarán cuando la rueda del mouse gire, incluso si la página no se desplaza; un caso en el que los eventos de "desplazamiento" probablemente no se activan. Si lo desea, puede llamar a event.preventDefault() al final de su devolución de llamada para evitar que la página se desplace, y para que pueda usar el evento mousewheel para otra cosa que no sea un desplazamiento de página, como algún tipo de funcionalidad de zoom.

Answer 15

Puede usar las opciones de desplazamiento y rueda del mouse para rastrear el movimiento hacia arriba y hacia abajo a la vez.

 $(''body'').bind(''scroll mousewheel'', function(event) {

if (event.originalEvent.wheelDelta >= 0) {
      console.log(''moving down'');   
    }
    else {
      console.log(''moving up''); 
    }
});

También puedes reemplazar ''cuerpo'' con (ventana).

Answer 16

Si almacena un incremento en el .data () del elemento desplazado, podrá probar el número de veces que el desplazamiento alcanzó la parte superior.

Answer 17

Usted puede determinar la dirección del ratón.

$(window).on(''mousewheel DOMMouseScroll'', function (e) {
    var delta = e.originalEvent.wheelDelta ? 
                   e.originalEvent.wheelDelta : -e.originalEvent.detail;

    if (delta >= 0) {
        console.log(''scroll up'');
    } else {
        console.log(''scroll down'');
    }
});

Answer 18

Utilice esto para encontrar la dirección de desplazamiento. Esto es sólo para encontrar la dirección del desplazamiento vertical. Soporta todos los navegadores cruzados.

    var scrollableElement = document.getElementById(''scrollableElement'');

    scrollableElement.addEventListener(''wheel'', findScrollDirectionOtherBrowsers);

    function findScrollDirectionOtherBrowsers(event){
        var delta;

        if (event.wheelDelta){
            delta = event.wheelDelta;
        }else{
            delta = -1 * event.deltaY;
        }

        if (delta < 0){
            console.log("DOWN");
        }else if (delta > 0){
            console.log("UP");
        }

    }

Example

Answer 19

Ver el scrollTop actual vs scrollTop anterior

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

Answer 20

en el .data() del elemento puede almacenar un JSON y valores de prueba para lanzar eventos

{ top : 1,
   first_top_event: function(){ ...},
   second_top_event: function(){ ...},
   third_top_event: function(){ ...},
   scroll_down_event1: function(){ ...},
   scroll_down_event2: function(){ ...}
}

Answer 21

este código funciona bien con IE, Firefox, Opera y Chrome:

$(window).bind(''wheel mousewheel'', function(event) {
      if (event.originalEvent.deltaY >= 0) {
          console.log(''Scroll up'');
      }
      else {
          console.log(''Scroll down'');
      }
  });

''wheel mousewheel'' y la propiedad deltaY deben usarse en la función bind () .

Recuerde: su usuario debe actualizar su sistema y sus navegadores por razones de seguridad. En 2018, las excusas de "Tengo IE 7" no tiene sentido. Debemos educar a los usuarios.

Tenga un buen día :)

Answer 22

var tempScrollTop, currentScrollTop = 0; 

$(window).scroll(function(){ 

   currentScrollTop = $("#div").scrollTop(); 

   if (tempScrollTop > currentScrollTop ) {
       // upscroll code
   }
  else if (tempScrollTop < currentScrollTop ){
      // downscroll code
  }

  tempScrollTop = currentScrollTop; 
} 

o use la extensión de rueda del ratón , vea here .