Page bloquée suite à événement on scroll sur une DIV

Bonjour,
J'ai un div avec un scroll dedans. Quand on fait défiler le scroll, la page défile de manière à ce que le div remonte à l'écran. Le problème avec mon code c'est qu'ensuite on ne peut plus faire de scroll sur la page globale.

J'ai fait un petit jsfiddle ici, pour illustrer le problème.
https://jsfiddle.net/949bm7vq/

Par contre, si on utilise "on( 'click',....)" à la place d'un scroll, la page n'est pas "bloquée"; on peut la faire défiler, cliquer dessus, y sélectionner du texte, etc...

Merci pour votre aide.

Bonjour,
Si on fait quelques affichages, on voit qu'il y a vite de nombreux appels à la fonction et que l'arrêt de l'animation n'est pas rapide :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

var i=0,j=0; $("#scrollable_div").on( 'scroll', function(){   var distance=200; if(distance>1){ console.log("début",++i); $('html, body').animate({scrollTop: distance},'slow','swing',function(){console.log("fin",++j);});   }   });

---

L'ascenseur de la page peut être utilisé normalement une fois l'animation arrêtée.

Merci. Mais alors ....
1/pourquoi un tel décalage dans le temps entre la fin de l'animation visuelle et la fin de son traitement informatique ?
2/pourquoi ce décalage ne s'observe-t-il pas si on utilise click au lieu de scroll pour déclencher la fonction ?

Bonsoir,
A première vue, c'est parce que les différents appels s'empilent.
Par exemple, s'il y a deux appels très rapprochés :
La deuxième animation démarre seulement une fois la première animation terminée.
Quand cette deuxième animation démarre, l'ascenseur est certes déjà bien positionné, mais il n'en est apparemment pas tenu compte et l'animation est exécutée pendant une certaine durée : pendant cette durée la position de l'ascenseur est constamment affecté sur 200, du coup il semble bloqué pour l'utilisateur.

On peut voir l'empilement avec cet exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10

$("#scrollable_div").on( 'click', function(){   var distance=200; if(distance>1){ $('html, body').animate({scrollTop: distance},'slow'); $('html, body').animate({scrollTop: 0},'slow');   }   });

---

La première animation est jouée, puis seulement après la deuxième est lancée.

Une solution pourrait être de rajouter une condition pour ne pas relancer d'animation tant que la première n'est pas finie, ou d'arrêter toute animation en cours avant d'en lancer une nouvelle.

Bon, je crois que j'ai trouvé la solution en fouinant sur le net, avec clearQueue(), mais j'ignore ce qu'en penseront les puristes....

https://jsfiddle.net/6sempeav/

Bonjour,

Citation:

---

j'ai trouvé la solution en fouinant sur le net, avec clearQueue()

---

même si je n'ai pas top saisi l'effet que tu voulais obtenir je dirais que clearQueue() est un peu fait pour cela quand même !

Nota : Pense a mettre ta discussion en résolue !