Savoir lorsqu'un scroll est fini (sans jQuery !)

Bonsoir,

Je cherche désespérément le moyen d'effectuer une action, une fois un "scroll" fini, et ce, peu importe la taille du "scroll final". (somme toute, savoir quand le mouvement de la roulette d'une souris est fini).

Voilà où j'en suis :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var scrollPlay = false;

body[0].addEventListener("mousewheel", function(event){

    if (event.wheelDelta < 0){
        scrollPlay = true;

}, false);


var set = setInterval('check()', 100);

Seulement, je n'arrive pas à construire l'intérieur de la fonction "check()". Mon idée est de traduire en langage Javascript :

"tant que scrollPlay est vrais, tu ne fais rien, mais une fois que c'est fini (qu'il repasse à false donc), tu fais (une fois) l'action "changement".

Si vous avez une idée … en Javascript ! (j'ai pas la possibilité d'utiliser jQuery pour ce projet).

Merci

Une solution (pas forcément bonne, mais qui correspond le plus à ce que tu as commencé) serait de faire des tests et des trucs dans la fonction check(), puis d'y remettre la valeur scrollPlay à false.

Une autre serait de ne pas utiliser d’évènement de scroll, mais, à chaque appel de check(), de vérifier si le scroll a été modifié.

Dans les deux cas, pas besoin de JQuery, tout est faisable en vanilla.

Ensuite, une fois l'arrêt du scroll détecté, tu fais tes actions, et tu définis une variable qui empêchera de refaire ce qui ne doit être fait qu'une fois.

J'aime bien l'idée de la deuxième façon, mais alors, comment être sûr que le scroll a fini d'être modifié ? Un petit coup de roulette de souris et un vigoureux glissement sur mon trackpad ne retournent pas la même valeur si j'ajoute un "compteur de scroll".

Je ne peux donc pas définir ce qu'est un "mouvement" de scroll par défaut, et c'est là tous mon problème.

Tu peux utiliser la propriété scrollTop pour connaitre la distance du scroll à chaque appel de check() et ainsi comparer avec la valeur précédente.

Sinon il y a aussi un évent onscroll, mais je ne l'ai jamais utilisé, je sais pas si c'est fiable.

J'ai peur que ça soit moche et à peine lourd, mais tu pourrais avoir un petit tableau dans lequel tu places les hauteurs de scroll que tu as récupéré lors des derniers appels à check(), et dans le cas où elles sont identiques ça voudrait dire qu'il n'y a pas eu de scroll depuis suffisament longtemps et que donc il est terminé et tu peux lancer ton action.

J'ai testé le tableau, impossible de les faire "matcher".

Le problème d'onscroll est sa mauvaise rétrocompatibilité entre navigateur. Le comportement n'est pas du tout le même.

EDIT : finalement, c'est sur un autre forum que j'ai une approche de réponse qui correspond "plus ou moins" à mon besoin. Même si c'est critiquable :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var state;

window.addEventListener("scroll",function(){
    if(state !== null){
    clearTimeout(state);
        console.log('scroll en cours');
    }
    state =  setTimeout(function() {
     alert('scroll fini')    }, 300);

    },false);

Merci tous de même !

Ou comment se contredire soi-même dans le même message…

Remplacé par "mousewheel" et "DOMMouseScroll" (pour Firefox), dans mon script final. Ici, j'ai juste fais un copier-collé de la réponse qu'on m'a fournie.