Événement de défilement jQuery: comment déterminer la quantité défilée (défilement delta) en pixels?

J'ai cet événement:

$(window).scroll(function(e){    
    console.log(e);
})

Je veux savoir combien j'ai de défilement de la valeur en pixels, parce que je pense, faire défiler la valeur dépend de la taille de la fenêtre et de la résolution de l'écran.

Paramètre de la fonction e ne contient pas cette information.
Je peux stocker $(window).scrollTop() après chaque rouleau et calculer la différence, mais ce que je peux faire différemment?

source d'informationauteur Andrey Vorobyev

  1. 6

    Pour déterminez le nombre de pixels qui ont défilé, vous devez garder à l'esprit que le scroll événement est déclenché presque tous les pixels que vous vous déplacez. Le chemin pour y parvenir est de sauver la précédente défilement de la valeur et de la comparer à un dépassement de délai. Comme ceci:

    var scrollValue = 0;
var scrollTimeout = false

$(window).scroll(function(event){
    /* Clear it so the function only triggers when scroll events have stopped firing*/
    clearTimeout(scrollTimeout);
    /* Set it so it fires after a second, but gets cleared after a new triggered event*/
    scrollTimeout = setTimeout(function(){
        var scrolled = $(document).scrollTop() - scrollValue;
        scrollValue = $(document).scrollTop();
        alert("The value scrolled was " + scrolled);
    }, 1000);
});

    Cette façon, vous obtiendrez le montant de défilement d'une seconde après le défilement (c'est réglable, mais vous devez garder à l'esprit que le défilement lisse, si répandue aujourd'hui a une certaine durée de vie et vous ne voulez pas déclencher avant l'arrêt complet).

  2. 1

    L'autre façon de le faire? Oui, possible, avec jQuery Mobile

    Je n'apprécie pas cette solution, car il est nécessaire d'inclure des jQuery mobile. Solution:

    var diff, top = 0;
$(document).on("scrollstart",function () {
  //event fired when scrolling is started
  top = $(window).scrollTop();
});
$(document).on("scrollstop",function () {
  //event fired when scrolling is stopped
  diff = Math.abs($(window).scrollTop() - top);
});
  3. 1

    Pour réduire l'utilisé la puissance de traitement par l'ajout d'un minuteur pour un Jquery scroll méthode est probablement pas une bonne idée. L'effet visuel est tout à fait mauvais.

    L'ensemble de l'expérience de navigation web pourrait être beaucoup mieux en se cachant le défilement de l'élément juste quand le livre commence, et la faisant glisser (à la bonne position) peu de temps après. Le défilement même peut être vérifié avec un retard trop.
    Cette solution fonctionne très bien.

    $(document).ready(function() {

    var element = $('.movable_div'),
    originalY = element.offset().top;
    element.css('position', 'relative');

    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();
        element.hide();
        element.stop(false, false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + 35
        }, 2000,function(){element.slideDown(500,"swing");});
    });
});

    Démonstration en direct ici