Estoy buscando algo a este efecto:

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

¿Algunas ideas?

Comprobar actual scrollTopvs anteriorscrollTop

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

Puede hacerlo sin tener que realizar un seguimiento de la parte superior de 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éntase libre de investigarlo más a fondo, pero parece que cuando lo usa $(element).scroll, el evento que se está escuchando es un evento de 'desplazamiento'.

Pero si escucha específicamente un mousewheelevento utilizando bind, el originalEventatributo del parámetro de evento a su devolución de llamada contiene información diferente. Parte de esa información es wheelDelta. Si es positivo, movió la rueda del mouse hacia arriba. Si es negativo, movió la rueda del mouse hacia abajo.

Supongo que los mousewheeleventos se disparará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 activen. Si lo desea, puede llamar 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 de la rueda del mouse para algo que no sea un desplazamiento de página, como algún tipo de funcionalidad de zoom.

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

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

Solución 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;
    });

Solución 2

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

Solución 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

Chrome 42 (gana 7)

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

Firefox 37 (Win 7)

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

IE 11 (Win 8)

• Solución 1
  • Arriba: 10 eventos por 1 desplazamiento (efecto secundario: el desplazamiento hacia abajo ocurrió por fin)
  • Abajo: 10 eventos por 1 desplazamiento
• Soltion 2
  • Arriba: no funciona
  • Abajo: no funciona
• Solución 3
  • Arriba: no funciona
  • Abajo: 1 evento por 1 desplazamiento

IE 10 (Win 7)

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

IE 9 (Win 7)

• Solución 1
  • Arriba: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento
• Soltion 2
  • Arriba: no funciona
  • Abajo: no funciona
• Solución 3
  • Arriba: 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: el desplazamiento hacia abajo ocurrió por fin)
  • Abajo: 2 ~ 4 eventos por 1 desplazamiento
• Soltion 2
  • Arriba: no funciona
  • Abajo: no funciona
• Solución 3
  • Arriba: 1 evento por 1 desplazamiento
  • Abajo: 1 evento por 1 desplazamiento

Solución combinada

Verifiqué que el efecto secundario de IE 11 e IE 8 proviene de la if elsedeclaración. Entonces, lo reemplacé con la if else ifsiguiente declaración.

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

Remití 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');
            }
        });
    }

Entiendo que ya ha habido una respuesta aceptada, pero quería publicar lo que estoy usando en caso de que pueda ayudar a alguien. cliphexObtuve la dirección como con el evento mousewheel 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 aquí .

$(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
    }
});

Evento de desplazamiento

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

Nota: El evento de desplazamiento en realidad se activa al arrastrar la barra de desplazamiento, usando las teclas del 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 de rueda

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

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

Leí el documento y el ejemplo: escuchando este evento en el navegador
y después de algunas pruebas con FF, IE, Chrome, Safari, terminé con este fragmento:

//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);
});

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

$('.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>

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 la rueda del mouse , vea aquí .

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

Lo he utilizado con éxito para detectar la dirección en FF, IE y Chrome ... No lo he probado en safari, ya que 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 uso esto para detener cualquier desplazamiento, por lo que si desea que se produzca el desplazamiento, debe eliminar el e.preventDefault(); e.stopPropagation();

Para ignorar cualquier complemento / impulso / rebote 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;
});

Puede determinar la dirección del mousewhell.

$(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');
    }
});

Use esto para encontrar la dirección de desplazamiento. Esto es solo para encontrar la dirección del desplazamiento vertical. Admite 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");
        }

    }

Ejemplo

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 down');
      }
      else {
          console.log('Scroll up');
      }
  });

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

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

Tenga un buen día :)

Mantenlo súper simple:

Forma de escucha de eventos jQuery:

$(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í un post más en profundidad sobre el mismo aquí

Puede usar la opción de desplazamiento y la 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'); 
    }
});

Puede reemplazar 'cuerpo' con (ventana) también.

almacene un incremento en el .data ()elemento de desplazamiento, luego podrá probar la cantidad de veces que el desplazamiento alcanzó la parte superior.

¿Por qué nadie usa el eventobjeto devuelto por jQueryen 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 chromiumy no verifiqué en otros navegadores si tienen la dirpropiedad.

Dado que bindha quedado en desuso en v3 ("reemplazado por on") y wheelahora es compatible , olvide wheelDelta:

$(window).on('wheel', function(e) {
  if (e.originalEvent.deltaY > 0) {
    console.log('down');
  } else {
    console.log('up');
  }
  if (e.originalEvent.deltaX > 0) {
    console.log('right');
  } else {
    console.log('left');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="white-space:nowrap;overflow:scroll">
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
</h1>

wheelCompatibilidad del navegador del evento en MDN (2019-03-18) :

Puedes usar esto también

$(document).ready(function(){

  var currentscroll_position = $(window).scrollTop();
$(window).on('scroll', function(){
Get_page_scroll_direction();
});

function Get_page_scroll_direction(){
  var running_scroll_position = $(window).scrollTop();
  if(running_scroll_position > currentscroll_position) {
      
      $('.direction_value').text('Scrolling Down Scripts');

  } else {
       
       $('.direction_value').text('Scrolling Up Scripts');

  }
  currentscroll_position = running_scroll_position;
}

});

.direction_value{
  position: fixed;
  height: 30px;
  background-color: #333;
  color: #fff;
  text-align: center;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="direction_value">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>

en el .data()elemento puede almacenar un JSON y probar valores 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(){ ...}
}

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
    }
});

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));

});

Deberías probar 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();
    });

Tuve problemas con el desplazamiento elástico (desplazamiento de desplazamiento, bandas de goma). Ignorar el evento de desplazamiento hacia abajo si está cerca de la parte superior de la página funcionó para mí.

var position = $(window).scrollTop();
$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    var downScroll = scroll > position;
    var closeToTop = -120 < scroll && scroll < 120;
    if (downScroll && !closeToTop) {
        // scrolled down and not to close to top (to avoid Ipad elastic scroll-problems)
        $('.top-container').slideUp('fast');
        $('.main-header').addClass('padding-top');
    } else {
        // scrolled up
        $('.top-container').slideDown('fast');
        $('.main-header').removeClass('padding-top');
    }
    position = scroll;
});

Esto funciona en todos los navegadores de PC o teléfonos, expandiéndose en las respuestas principales. Se puede construir una ventana de objeto de evento más compleja ["scroll_evt"] y luego llamarla en la función handleScroll (). Éste se dispara para 2 condiciones concurrentes, si ha transcurrido cierto retraso o se pasa cierto delta para eliminar algunos disparadores no deseados.

window["scroll_evt"]={"delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10};
$(window).scroll(function() {

    var currentScroll = $(this).scrollTop();
    var currentTime = Date.now();
    var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
    boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
    if(boolRun){
        window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
        window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
        window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
        window["scroll_evt"]["pos"] = currentScroll;
        window["scroll_evt"]["time"] = currentTime;
        handleScroll();
    }
});


function handleScroll(){
    event.stopPropagation();
    //alert(window["scroll_evt"]["direction"]);
    console.log(window["scroll_evt"]);
}