¿Diferenciar entre desplazamiento arriba/abajo en jquery?

Question

He encontrado algunas formas geniales de verificar dónde está usando jquery la barra de desplazamiento, pero me preguntaba si puede diferenciar si el usuario se desplazó hacia arriba o hacia abajo.

Answer 1

Compruebe el estado anterior. Algo como esto:

Mantener una variable, por ejemplo, last_scroll_position, y cuando se tiene un rollo, si last_scroll_position - current_position > 0, el usuario desplazar hacia arriba y hacia abajo si es inferior a 0.

Answer 2

para diferenciar entre desplazamiento ascendente/descendente en jQuery, se puede utilizar:

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x 
$('#yourDiv').bind(mousewheelevt, function(e){ 

    var evt = window.event || e //equalize event object  
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible    
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF 

    if(delta > 0) { 
     //scroll up 
    } 
    else{ 
     //scroll down 
    } 
}); 

Este método también funciona en divs que tienen overflow:hidden.

Lo probé con éxito en Firefox, IE y Chrome.

Answer 3

Hay una manera simple de hacerlo sin variables globales de ningún tipo. El evento MouseWheel tiene una propiedad que especifica explícitamente la dirección de desplazamiento. Así es como se usa:

$("#scroll_div").bind("mousewheel",function(ev) { 
     var curScrollLeft = $(this).scrollLeft(); 
     $(this).scrollLeft(curScrollLeft + Math.round(ev.originalEvent.wheelDelta)); 
    }); 

Answer 4

<script type='text/javascript'> 
$(function(){ 

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

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

     if (NextScroll > CurrentScroll){ 
     //write the codes related to down-ward scrolling here 
     } 
     else { 
     //write the codes related to upward-scrolling here 
     } 

     CurrentScroll = NextScroll; //Updates current scroll position 
    }); 
}); 

Answer 5

evento Scroll

El scroll event se comporta extrañamente en FF (se disparó un montón de veces debido a la suavidad de desplazamiento) pero trabajos.

Nota: El eventoscroll realidad se dispara al arrastrar la barra de desplazamiento, usando las teclas del cursor o la rueda del ratón.

//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, se expone una gran información sobre el Wheel Event.

Nota: La rueda caso se dispara sólo cuando se utiliza la rueda del ratón; teclas del cursor y arrastrando la barra de desplazamiento no dispara el evento.

He leído el documento y el ejemplo: Listening to this event across browser
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); 
}); 

Answer 6

Ejemplo para vainilla javascript:

var f = (function(){ 
    var oldPos = window.scrollY; 
    function fu(e) { 
     var newPos = window.scrollY; 
     if (newPos>oldPos) { 
      console.log('down'); 
     } else if(newPos<oldPos) { 
      console.log('up'); 
     } else { 
      console.log('same'); 
     } 
     oldPos = newPos; 
    } 
    return fu; 
})(); 
window.addEventListener('scroll',f);