Comment puis-je déterminer le sens d’un événement de défilement de jQuery ?

Question

Je suis à la recherche de quelque chose à cet effet :

Toutes les idées ?

Answer 1

Vérifier le courant vs précédents

Answer 2

Vous pouvez le faire sans avoir à garder une trace de la précédente, faites défiler de haut, comme tous les autres exemples exiger:

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

Je ne suis pas un expert sur ce n'hésitez donc pas à approfondir les recherches, mais il semble que lorsque vous utilisez $(element).scroll, l'événement d'être écouté, pour un défilement de l'événement.

Mais si vous écoutez un mousewheel événement en utilisant le lier, l' originalEvent de l'attribut de paramètre d'événement à votre rappel contient des informations différentes. Une partie de cette information est - wheelDelta. Si elle est positive, vous déplacez la molette de la souris vers le haut. Si c'est négatif, vous avez déplacé la roulette de la souris vers le bas.

Ma conjecture est qu' mousewheel événements se déclenche lors de la molette de la souris se transforme, même si la page n'a pas de défilement; un cas dans lequel le défilement des événements ne sont probablement pas tiré. Si vous le souhaitez, vous pouvez appeler event.preventDefault() dans le bas de votre rappel pour éviter la page de défilement, et de sorte que vous pouvez utiliser la molette de la souris de l'événement pour autre chose qu'une page, faites défiler, comme un certain type de fonctionnalité de zoom.

Answer 3

Stocker l’emplacement précédent de défilement, puis voir si le nouveau est supérieure ou inférieure à celle.

Voici un moyen d’éviter toutes les variables globales (fiddle disponible ici) :

Answer 4

Événement Scroll

L' événement scroll se comporte bizarrement dans FF (c'est tiré d'un grand nombre de fois en raison de la fluidité de défilement), mais il fonctionne.

Remarque: Le défilement de l'événement fait est déclenché lorsque vous faites glisser la barre de défilement, en utilisant les touches du curseur ou la roulette de la souris.

//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,
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = $(target).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: " + $(target).innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (target.scrollHeight - scrollTop === $(target).innerHeight()) {
      console.log("► End of scroll");
    }
    //saves the current scrollTop
    $(target).data("lastScrollTop", scrollTop);
});

---

La Roue De L'Événement

Vous pouvez également prendre un coup d'oeil au MDN, il expose une grande informations à propos de la Roue de l'Événement.

Remarque: La roue de l'événement est déclenché uniquement lorsque vous utilisez la molette de la souris; les touches du curseur et en faisant glisser la barre de défilement ne déclenche pas l'événement.

J'ai lu le document et l'exemple: l'Écoute de cet événement à travers le navigateur
et après quelques tests avec FF, IE, chrome, safari, j'ai fini avec cet extrait:

//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
    var scrollTop = $(this).scrollTop() || $("body").scrollTop(); //fix safari

    var scrollText = "";
    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }
    console.log("originalEvent: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});

Answer 5

<pre><code></code><p><a href="http://plugins.jquery.com/project/mousewheel" rel="nofollow">MouseWheel extension</a> <a href="http://upandcrawling.wordpress.com/2010/06/08/cool-jquery-stuff-for-beginners-part-1/" rel="nofollow">ici</a>.</p></pre>