suave - desplazar scroll jquery

¿Diferenciar entre desplazarse hacia arriba/abajo en jQuery?

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo puedo determinar la dirección de un evento de desplazamiento jQuery? 22 respuestas

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

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 arrastrando 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

Compruebe el último estado. Algo como esto:

Mantenga una variable, por ejemplo, last_scroll_position , y cuando tenga un desplazamiento, si last_scroll_position - current_position > 0 , el usuario se desplazó hacia arriba y hacia abajo si es menor que 0.

Answer 3

Ejemplo para javascript vainilla:

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

Answer 4

Hay una forma sencilla de hacerlo sin variables globales de ningún tipo. El evento MouseWheel tiene una propiedad que especifica explícitamente la dirección de desplazamiento. Aquí está cómo usarlo:

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

Answer 5

Para diferenciar entre desplazarse hacia arriba / abajo en jQuery, puede usar:

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 6

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