Problème avec clearTimeout()

Bonjour,

sûrement un problème de portée de variable .

Il faudrait initialiser ta variable  container1_off_scroll  en dehors de toute fonction ou block if.. ( au tout début de ton js)

avec un 

  var container1_off_scroll = null;

Ensuite, celle-ci devrait bien être accessible dans tes fonctions.

.
Cordialement,
Jordane

Salut Jordane et merci pour ta réponse !

J'ai essayé et ça ne marche malheureusement pas ... En faite, j'ai l'impression qu'à chaque scroll, un nombre incalculable de setTimeout se met en place (la boite menu se ferme bien plus que toute les 10 secondes, en particulier si je croll plusieurs fois vers le haut).

Y aurait-il moyen que le clearTimeout ne s'applique qu'une fois, contre un nombre énorme de setTimeout ? C'est un peu étrange comme question, mais vu que je ne suis pas familier avec les const, var, et autres objets à définir...

N'y aurait-il pas moyen que le nouveau setTimeout remplace l'ancien ? Car au pire, si ça se ferme qu'une fois, ça va. Mais là, ça plante et on ne peut quasiment pas ouvrir les menus...

J'espère être clair...

Merci encore à toi !

J'essaye de faire ça et je reviens vers toi :)

Merci beaucoup !

Ca marche ! Merci beaucoup ! :)

Dois-je mettre le code, pour que ça serve à d'autre ?

Voilà le code complet, pour ceux que ça intéresse :

CODE JS :

		// 2. Translation du menu des films

			// 2.1. On définit les variables et les fonctions d'apparitions ou disparitions des containers

				var container1 = document.getElementById("container1");
				var container2 = document.getElementById("container2");
				var container3 = document.getElementById("container3");

				var container3_off_scroll = null;
				var container1_off_scroll = null;
				var scroll_timer = false;

				function container1_translate()
				{
					container1.className = "container1_translate";

					clearTimeout(container1_off_scroll);
				}

				function container3_translate()
				{
					container3.className = "container3_translate";

					clearTimeout(container3_off_scroll);
				}

				function container1_show()
				{
					container1.className = "container1_show";
				}

				function container3_show()
				{
					container3.className = "container3_show";
				}

				

				function container1_show_mouse()
				{
					container1.className = "container1_show";

					clearTimeout(container1_off_scroll);
				}

				function container3_show_mouse()
				{
					container3.className = "container3_show";

					clearTimeout(container3_off_scroll);
				}

			// 2.2. Quand l'on est sur le container 1, il faut le garder ouvert

				// Instant inital : on ferme les container après 10 secondes
				if(container1.className == "container1_init")
				{
				container1_off_start = setTimeout(container1_translate, 15000);
				console.log("On a définit le timeout du container 1"); 
				} 
				
				if(container3.className == "container3_init")
				{
				container3_off_start = setTimeout(container3_translate, 15000);
				console.log("On a définit le timeout du container 3"); 
				} 

				// Quand on scroll la page : vers le haut, on affiche les container de menu, quand vers le bas, on les cache
				var lastScrollTop = 0;

					// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
					window.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
					   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
					   if (st > lastScrollTop){
					      // downscroll code
					      container1.className = "container1_translate";
					      container3.className = "container3_translate";

					      	if(scroll_timer)
				      		{
				      			clearTimeout(container3_off_scroll);
				      			clearTimeout(container1_off_scroll);
				      			scroll_timer = false;
				      		}

					   } else {
					      // upscroll code
					      container1.className = "container1_show";
					      container3.className = "container3_show";

					      if(scroll_timer == false)
					      {
					      container3_off_scroll = setTimeout(container3_translate, 5000);
					      console.log("On a définit le timeout scroll du container 1 à 5s"); 
					      container1_off_scroll = setTimeout(container1_translate, 5000);
					      console.log("On a définit le timeout scroll du container 3 à 5s"); 
					      scroll_timer = true; 
					  	  }

					   }
					   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
					}, false); 

				
				// A chaque fois que le curseur ira sur le container1 ou 2 (hover en somme), on passe les deux containers en show, cad qu'on le garde visible
				container1.addEventListener("mouseover", container1_show_mouse);
				container3.addEventListener("mouseover", container3_show_mouse);


				// Quand le curseur sort du container1, on peut le cacher après 1.5 secondes (fonction container1_translate ci dessus)
				container1.addEventListener("mouseout", container1_translate);
				container3.addEventListener("mouseout", container3_translate);

CODE CSS :

				.container1_show, .container1_init
				{
					transform: translateX(0);

					opacity: 1;

					transition-duration: 1s;
				}

				.container1_translate
				{
					transform: translateX(-45vh);

					opacity: 0.6;

					transition-duration: 0.8s;
				}

				.container3_show, .container3_init
				{
					transform: translateX(0);

					opacity: 1;

					transition-duration: 0.8s;
				}

				.container3_translate
				{
					transform: translateX(+27.77vh);

					opacity: 0.6;

					transition-duration: 0.8s;
				}

:)

En espérant que ça puisse servir à quelqu'un !!

Merci Jordane pour ton aide !