11544 sujets

JavaScript, DOM et API Web HTML5

Modifier ou désactiver une fonction javascript

Salut à tous.

Mes connaissances limitées en js et en googling n'ont pas sû répondre convenablement à ma question, comment je peux faire pour désactiver ou modifier une fonction javascript ?

Plus concrètement j'ai cette fonction :

function hscr(e){if (!e) {
		e=window.event;
	}
		
	if (e.wheelDelta <= 0 || e.detail>=0){  
		window.scrollBy(120,0)
	}
	else  window.scrollBy(-120,0)
	}
	if (window.addEventListener ){
		window.addEventListener("DOMMouseScroll", hscr, false);
	}
	 else{
		document.onmousewheel = hscr; 
	}

J'ai eu beaucoup de mal à la comprendre et je ne suis pas sûr de l'avoir encore compris complètement, pour vous c'est surement clair, mais cette fonction me donne un scroll horizontal via la molette de la souris.

Le contenu de mon site étant un peu long, il arrive que certaines zone contiennent un ascenseur vertical. Ce que je voudrais faire c'est donc, au survol d'une zone avec un ascenseur vertical, désactiver ma fonction qui me fait scroller horizontalement.
Le must serait de mettre un léger délai à la désactivation de cette fonction, pour une ergo de navigation (c'est embêtant de bloquer le scroll horizontal quand notre curseur survole une zone verticale alors qu'on veut simplement continuer notre navigation).

A défaut de pouvoir désactiver la fonction hscr je me suis dit que je pouvais peut être la modifier pour la faire "buguer" histoire qu'elle nous embête plus. Et j'ai pensé que c'était possible avec onmouseOver et onmouseOut, mais je n'ai pas trouvé de solution, même avec cette méthode.

Pour résumer, j'ai un scroll horizontal, je veux qu'au survol d'une zone verticale le scroll horizontal se désactive (avec un certain délai si possible), puis se réactive (instantanément) lorsqu'on quitte la zone verticale.

Merci à vous
salut,
il doit y avoir des tas de façons de faire ça. Là je suis en mode digestion #repascopieux donc je te donne un exemple simple. Le principe sera de détecter l'élément sur lequel tu es entrain de scroller. Ensuite tu fais une détection simple pour mettre un "return" si on est sur un élément à qui on a envie de redonner le comportement normal du scroll.
Désolé pour les explication à deux balles mais je fais de mon mieux.

PS : ne prête pas attention au code CSS
Salut,
Merci à toi pour ta réponse, j'ai parfaitement compris ce que tu voulais m'expliquer et à vrai dire c'est comme ça que j'imaginais la solution.
J'ai modifié un petit peu le code pour qu'il s'adapte mieux à mes besoins (soit définir une zone de non-scroll plutot qu'une zone de scroll).
Tout marche très bien sur JSFiddle mais j'ai un petit problème quand je met ça sur mon site. Le script non-scroll ne semble plus marcher. J'ai vérifié la classe, plusieurs fois.
Après avoir testé quelques trucs j'en suis arrivé à mettre une seule classe sur le div et là, magie ça marche !
Est-ce possible que le fait de mettre plusieurs classes bloque totalement le script ?

Si ça peut aider, je veux dire ça devrait aider : le code sur lequel je teste ça.
<div class="historique vscr">
		<h5> Liste complète des champions </h5>
		<?php
			for($i=2050;$i>=1991;$i--){
			$file="pdf/".$i.".pdf";
				if(file_exists($file)){
				print"<a class='vscr' href='pdf/$i.pdf' target='blank'><img src='images/pdf.png'></a>
				<a class='vscr' href='pdf/$i.pdf' target='blank'><h4> $i </h4></a>
				<br />";
				}
				else{}
			}
		?>
		</div>

function scrolled(e){
	if (e.target.className === "vscr") return;
	window.scroll(window.pageXOffset + (e.detail > 0 ? 120 : -120),0);
}

window.addEventListener("DOMMouseScroll", scrolled, false);


Concrètement si je met uniquement <div class="historique"> et que je change le js pour if (e.target.className === "historique") return;
Ca marche
Modifié par Parkask (21 May 2014 - 14:47)
Bien, j'ai peaufiné un peu code et j'ai finalement réussi à avoir ce que je cherchais au début, avec même quelques améliorations. A savoir, un scroll horizontal, qui se stoppe au survol d'une zone avec un scroll vertical.
Mon site étant adaptatif certaines zones verticales popent avec un redimensionnement de la fenêtre, il faut donc bloquer le scroll horizontal en fonction de la taille de la fenêtre.

Pour aider ceux qui vont arriver en suivant voilà ce que je propose (merci Zelalsan):

function scrolled(e){
	if (e.target.className === "class1") return;
	else if (e.target.className === "class2" & window.innerHeight<=492) return;
	else if (e.target.className === "class3") return;
	window.scroll(window.pageXOffset + (e.detail > 0 ? 120 : -120),0);
}


A tchao ! Smiley biggrin
Modifié par Parkask (21 May 2014 - 15:35)
Sujet clos
Aller à