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

Le tout via un "setInterval" et un événement sur "mousewheel", ...

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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 :)

+0 -0

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.

Édité par luxera

Auteur du sujet

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.

+0 -0

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.

Auteur du sujet

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

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.

Thunderseb

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 !

Édité par loic.b24

+0 -0

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

loic.b24

1
window.addEventListener("scroll",function(){

loic.b24

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

« There was a kingdom that was falling so fast that people wouldn't help it, they wouldn't make it last » - Animal Kingdom, Beau

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte