jQuery Outils de Défilement avec la Molette de défilement de la position et de stop

Depuis les DOM n'offre aucun moyen de différencier entre la première défilement événement déclenché et pour les suivants qui se trouvent être partie de la même défilement de mouvement, nous sommes obligés de penser à des méthodes indirectes de faire la distinction entre eux.

Si vous parcourir rapidement tout élément particulier, un défilement de l'événement est déclenché plusieurs fois dans la séquence. En utilisant le code suivant, nous pouvons avoir une idée de exactement comment ça arrive souvent:

$('#exampleDiv').bind('mousewheel', function () {
    console.log(new Date().getTime());
});

Lorsque vous faites défiler sur que la div, vous obtiendrez une sortie de la console qui ressemble à ceci:

//Using mouse wheelbar
251327626600149
251327626600215
251327626600265
251327626600282
251327626600332
251327626600365

//Using touchpad
251327626626207
251327626626225
251327626626261
251327626626276
251327626626312
251327626626345

En regardant cette sortie, il semble que le mousescroll événements sont généralement tirés à l'intérieur, quelque part entre 20 ms et 60 ms les uns des autres. Pour être sûr, nous allons prendre l'extrémité supérieure à 100 ms. C'est très instructif, parce que nous pouvons l'utiliser pour distinguer entre le défilement des événements qui font partie de la même action, et ceux qui sont susceptibles distinctes et délibérément initiée par l'utilisateur.

Ce que vous pourriez faire à partir d'ici est de rendre accessible à l'échelle mondiale 'timestamp' variable, la mise à jour à chaque fois un mousescroll événement est déclenché, réussie ou pas. Quelque chose comme ceci:

var timeStamp = new Date().getTime();

$('#exampleDiv').bind('mousewheel', function (event) {
    var timeNow = new Date().getTime();

    //Need to prevent the default scrolling behavior
    event.preventDefault();

    //If the last mousescroll happened less that 100 ms ago, update
    //timeStamp and do nothing
    if (timeNow - timeStamp < 100) {
        timeStamp = timeNow;
        return;
    } else {
        timeStamp = timeNow;
        scrollToSomeOtherDiv();
    }
});

Cela ne tient pas compte de tous les mousescroll événements sont déclenchés après l'événement initial qui a précédé tous, mais commence à travailler de nouveau après que l'utilisateur a fait une pause pendant 100 ms.

Cela permettrait de résoudre votre problème, sauf si votre scrollToSomeOtherDiv() fonction comportait un certain type de temps d'animation. Vous pouvez bien sûr faire une booléenne isAnimating, et vérifier pour voir si c'est vrai à chaque fois qu'un mousescroll événement est déclenché (en faisant tourner faux dans un rappel une fois que l'animation est plus).

Cela serait, à l'exception qu'elle pourrait fournir un cognement de l'expérience pour l'utilisateur. Quelqu'un qui veut faire défiler deux panneaux rapidement ne sera probablement pas de pause entre les parchemins même après avoir vu l'animation de commencer. Le code ci-dessus va en voir de toutes leurs mousescroll événements dans le cadre de la même défilement de mouvement et de continuer à les ignorer!

Dans ce cas, vous pouvez simplement utiliser le temps de l'animation en tant que votre seuil. Vous définissez un timeStamp une fois que l'animation est commencé, et puis de les ignorer tous les mousescroll événements au cours de cette période de temps. J'ai écrit un exemple ici: http://jsfiddle.net/Sg8JQ/

Le code est ici:

var lastAnimation = 0;
var animationTime = 1000; //in ms
var quietPeriod = 500; //in ms, time after animation to ignore mousescroll

function scrollThis(event, delta, deltaX, deltaY) {
    var timeNow = new Date().getTime();

    //change this to deltaX/deltaY depending on which
    //scrolling dir you want to capture
    deltaOfInterest = deltaY;

    if (deltaOfInterest == 0) {
        //Uncomment if you want to use deltaX
        //event.preventDefault();
        return;
    }

    //Cancel scroll if currently animating or within quiet period
    if(timeNow - lastAnimation < quietPeriod + animationTime) {
        event.preventDefault();
        return;
    }

    if (deltaOfInterest < 0) {
        if ($('.active').next('div').length) {
            lastAnimation = timeNow;
            $('.active').removeClass('active').next('div').addClass('active');
            $('html,body').animate( {
                scrollTop: $('.active').offset().top }, animationTime);
        }
    } else {
        if ($('.active').prev('div').length) {
            lastAnimation = timeNow;
            $('.active').removeClass('active').prev('div').addClass('active');
            $('html,body').animate( {
                scrollTop: $('.active').offset().top }, animationTime);
        }
    }
}

//Note: mousewheel() is defined in the mousewheel plugin by Brandon Aaron
//You could do without it, but you'd need to adjust for firefox and webkit
//separately.
//
//You couldn't use $(document).scroll() because it doesn't allow you to
//preventDefault(), which I use here.
$(document).mousewheel(scrollThis);

J'ai aussi inclus quietPeriod qui est au-delà de l'animation de temps pendant laquelle vous souhaitez continuer à ignorer mousescroll événements. Vous pouvez le mettre à 0 si vous souhaitez que le défilement d'être "réactif" dès que l'animation est terminée.

OriginalL'auteur pikappa

Prendre un coup d'oeil à tout ça et voir ce que vous en pensez. Pour commencer, je ne se lient pas à la roulette de la souris parce que Firefox utilise DOMMouseScroll à la place. Cette utilise également un autre delta gestionnaire qui est l'inverse de celui utilisé par tous les autres navigateurs. Au lieu de les lier à des plugins jQuery scroll événement qui normalise le comportement. Vous pouvez suivre le dernier scrolltop position pour déterminer si l'utilisateur défiler vers le haut ou vers le bas.

Je suis en quelque sorte de faire l'hypothèse que vous animez entre les sections. Est-il une fonction de rappel vous pouvez utiliser pour déterminer si vous devriez être le défilement? J'ai créé un mondial permettant de vérifier si les éléments sont actuellement animation. Si oui, alors nous n'avons pas pris la peine de l'exécution de la fonction. Enfin, j'ai remarqué que la fonction de rappel pour le défilement de l'animation semble déclencher avant la finale de défilement événement se produit, et j'ai donc dû utiliser un setTimeout. Je n'aimais pas ça, mais je ne pouvais pas comprendre comment obtenir ce rappel pour fonctionner correctement.

http://jsfiddle.net/Gj3Qy/

var lastScrollTop = 0;
var isDoingStuff = false;

$(document).scroll(function(event) {
    //abandon 
    if(isDoingStuff) { return; }

    if ($(this).scrollTop() > lastScrollTop) {
        //console.log('down');
        $('.active').removeClass('active').next('div').addClass('active');
        isDoingStuff = true;
        $('html,body').animate( {scrollTop: $('.active').offset().top }, 1000, function() {
            setTimeout(function() {isDoingStuff = false;}, 100);
            console.log('off');
        });
    } else {
        //console.log('up');
    }
    lastScrollTop = $(this).scrollTop();
})

OriginalL'auteur mrtsherman