Discussion :

[Harlock999]

Bonjour,

J'ai réalisé une page assez haute, séparée en plusieurs div placées les unes en dessous des autres (chacune ayant son ID). Admettons que ma page soit un immeuble et que mes divs soient ses étages

Le plugin ScrollTo permet de passer d'une div à l'autre de façon "fluide" (en glissant) en cliquant sur des liens.

Dans chaque div, je permets l'ouverture et la fermeture d'une autres div, via les fonctions slideUp et slideDown. De plus, lorsque j'ouvre une de ces divs, j'indique comme cible la div qui contient l'animation en question : ma div s'ouvre tout en venant se caler contre le bord supérieur de ma page, en glissant.

Résultat : très joli, mais… pendant la durée de cette petite "double" animation – disons 2 secondes (la div s'ouvre et change donc de hauteur pendant que la page se repositionne en douceur au bon endroit), si je scrolle avec ma souris (genre je suis un garçon hyper speed qui boit trop de café – mais je suppose que je ne serai pas le seul), tout ceci rentre en conflit et crée de vilaines saccades. Tout redevient bien sûr normal dès que l'animation est terminée.

Y a t-il un moyen de contourner ce problème ? Soit via un réglage de ces plugins, soit en désactivant la possibilité de scroller pendant ce temps ?

J'ai tenté d'accélérer mes animations, mais d'une part c'est moins joli, mais surtout cela ne règle pas le problème, qui sera seulement constaté un peu moins souvent.

Si quelqu'un a une idée, je suis preneur !

[Harlock999]

Bon, faute d'avoir suscité l'enthousiasme des foules, j'ai tenté un truc qui semble fonctionner "à peu près". À savoir que j'ai désactivé le mousewheel pendant l'animation et je le rappelle en fin d'animation (cf. le code ci-dessous + le plugin jquery mousewheel).

Pas 100% parfait, mais pas loin.
En revanche, ça ne semble pas fonctionner pendant le slideup (toujours des saccades si je tente de scroller pendant que la div se referme).

Je laisse les spécialistes jeter un œil au code, au cas où ils détectent des aberrations… ou un truc à optimiser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
$(document).ready(function(){				   	
	var testeur = 0;
	$('.tabMenuPT > li:not(.blind, .lastblind)').removeClass('open').addClass('close');	
	$('.tabMenuPT > li:not(.blind, .lastblind)').click(function(){		
		if (($(this).hasClass("close")) && (testeur != 1)){
			$('body').bind("mousewheel",function(){return false;});
			$('.tabMenuPT > li:not(.blind, .lastblind)').removeClass('open').addClass('close');
			$(this).removeClass('close').addClass('open');
			$('.boxBodyPT div').stop().slideUp(300,'linear');
			$('.boxBodyPT div:eq(' + $('.tabMenuPT > li').index(this) + ')').stop().slideDown(1500,'linear',function(){$('body').unbind("mousewheel");});
			var testeur = 1;
		}
		else if (($(this).hasClass("close")) && (testeur != 0)){
			$('body').bind("mousewheel",function(){return false;});
			$('.tabMenuPT > li:not(.blind, .lastblind)').removeClass('open').addClass('close');
			$(this).removeClass('close').addClass('open');
			$('.boxBodyPT div').stop().slideUp(300,'linear');
			$('.boxBodyPT div:eq(' + $('.tabMenuPT > li').index(this) + ')').stop().slideDown(1500,'linear',function(){$('body').unbind("mousewheel");});
			var testeur = 1;
		}
		else if (($(this).hasClass("open")) && (testeur != 0)){
			$('body').bind("mousewheel",function(){return false;});
			$('.tabMenuPT > li:not(.blind, .lastblind)').removeClass('open').addClass('close');
			$(this).removeClass('open').addClass('close');
			$('.boxBodyPT div').stop().slideUp(300,'linear',function(){$('body').unbind("mousewheel");});
			var testeur = 0;
		}
 
 
	});
});