Comment détecter la vitesse de défilement avec Jquery?

Je voudrais essayer de reproduire io7 safari où l'url et les barres de navigation de minimiser lorsque vous faites défiler lentement, en javascript/jquery. La première chose est de détecter la vitesse de défilement, j'ai vu cette question déjà, mais je le fais dans un contenu de script donc je n'ai pas forcément le haut et le bas de l'élément qu'ils utilisent. Est-il une autre façon de détecter la vitesse de défilement?

InformationsquelleAutor EasilyBaffled | 2014-02-09
  1. 8

    Vous pourriez vous joindre à l'événement scroll via jQuery et utiliser une combinaison de l'horodatage et la scrollOffset pour déterminer la vitesse de défilement en comparant le décalage/heure du dernier événement scroll avant. Quelque chose comme ceci:

    var lastOffset = $( mySelector ).scrollTop();
var lastDate = new Date().getTime();

$( mySelector ).scroll(function(e) {
    var delayInMs = e.timeStamp - lastDate;
    var offset = e.target.scrollTop - lastOffset;
    var speedInpxPerMs = offset / delayInMs;
    console.log(speedInpxPerMs);

    lastDate = e.timeStamp;
    lastOffset = e.target.scrollTop;
});

    De toute façon puisque vous n'avez pas de contrôle sur la barre de navigation dans les navigateurs, je ne vois pas le point ici :/

    Peut-être vous êtes à la recherche de quelque chose comme ceci: La parallaxe défilement avec des post-tête

    GL
    Chris

    • Je suis en train de simuler l'effet de la barre de navigation. Je suis à l'aide d'un script contenu dans une extension chrome pour créer une superposition, et lorsque l'utilisateur fait défiler rapidement je veux la superposition de reculer et de sortir de la voie.
    • Bien le script ci-dessus vous aideront à déterminer rapidement la partie. Selon le défilement de décalage, vous pouvez réduire la taille de votre superposition resp. définir un point où la cacher. Ce qui vous manque?
    • Et j'ai placé la fenêtre dans la mySelector place et je suis arriver NaN pour speedInpxPerMs. J'ai limité l'accès à la page, car c'est un contenu de script, de sorte que peut-être une partie du problème.
    • Passer l'élément qui défile par exemple 'corps' ou '#myScrollContainer'.
    • Il est intéressant de "corps" - je obtenir corps.scrollTop est déconseillée en mode strict. Veuillez utiliser 'documentElement.scrollTop " si dans le mode strict et le corps.scrollTop " seulement si en mode quirks. Il est conseillé d'utiliser 'html' à la place, mais qui fournit une autre NaN. J'ai essayé de la fenêtre et qui m'a donné un autre problème, donc je suppose que la seule solution est d'essayer et d'insérer un autre élément et vérifier que.
    • avez-vous essayez de document.documentElement?
    • e.timeStamp semble toujours être 0...de toute façon tout ce code semble mal..
    • J'ai surtout obtenir Infinity comme résultat.

    InformationsquelleAutor cschuff
  2. 1

    J'ai essayé d'utiliser cschuffs réponse, mais quelque chose clochait. Avec ce problème et la joie d'écrire une classe, je viens de mettre le code dans une petite classe, c'est ici: https://github.com/SocialbitGmbH/JavascriptScrollSpeedMonitor

    Utilisation est simple:

    var scrollSpeedMonitor = new ScrollSpeedMonitor(function (speedInPxPerMs, timeStamp, newDirection)
{
    console.log('Scroll speed: ' + speedInPxPerMs);
});
    • En outre, il y a un StarScroller pour détecter lorsque l'utilisateur fait défiler lightspeed, pour ajouter quelques jolies "vitesse de la lumière a des effets" 🙂 github.com/SocialbitGmbH/JavascriptStarScroller
    • il vous manque une fermeture ) support.
    • Merci, ajouté! 🙂
    InformationsquelleAutor Thomas Kekeisen