évenement scroll et molette souris

Version imprimable

Bonjour,

Je cherche à gérer l'évènement de scroll de la fenêtre sur laquelle s'éxécute mon code
J'ai testé le code ci-dessous qui ne marche pas du tout :
Code:

1 2 3 4 5 6 7 8 9 10 if(window.addEventListener){ window.addEventListener('onScroll',function() { Scrollfen(); },false) } else if(window.attachEvent) { window.attachEvent('onScroll',function() { Scrollfen(); }) }
Ce qui revient à demander à ajouter la fonction Scrollfen() à l'évènement scroll
Et je voudrais en plus détecter l'utilisation de la molette pour déplacer la scrollbar, l'idée étant de détecter un déplacement de la scrollbar à l'écran
Merci de votre aide

09/05/2009, 02h38
emmanuel.remy
Remplace onScroll par onscroll

Concernant la molette:

Citation:

Et je voudrais en plus détecter l'utilisation de la molette pour déplacer la scrollbar,

Quand tu tournes la molette le scroll s'effectue automatiquement, non ? Et dans ce cas tu vas recevoir un événement onscroll. Est ce suffisant ou as tu un besoin fondamental de recevoir les événements de la molette ?

Si jamais tu veux les gérer toi même l'idée est la suivante:
Code:

1 2 3 4 5 6 7 8 function wheel(event) { ... } if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel;
ERE
09/05/2009, 03h18
pas30
J'ai testé avec le code ci-dessous :
Code:

1 2 3 4 5 6 7 8 9 if(window.addEventListener){ window.addEventListener('onscroll',function() { Scrollfen(); },false) } else if(window.attachEvent) { window.attachEvent('onscroll',function() { Scrollfen(); }) }
Et chose rare, internet explorer fonctionne parfaitement mais pas firefox :evilred:
J'ai cherché la solution mais pour l'instant je ne vois pas

bonjour,

pourquoi se casser la tête avec addEventListener et attachEvent :koi:

Code:

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
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />

<meta http-equiv="Content-Language" content="fr" />
 

<script type="text/javascript">
<!-- 
function ajouteEvenement()
{
	if (document.all)
		document.body.onscroll = function(){rouleRoule()};	// pour IE
	else
		window.onscroll = function(){rouleRoule()};	// pour FF

}
 
function rouleRoule()
{
	document.body.innerHTML += "roule<br>";
}


//-->
</script>
 
</head>
 
 
<body onload="ajouteEvenement()">

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


</body>
</html>

09/05/2009, 16h38
pas30

Le code s'éxécutera sur un site ne m'appartenant pas donc voilà pourquoi
Personne ne sait pourquoi firefox ne reconnait pas onscroll ?

Alors en faisant de longues recherches sur google j'ai trouvé un site qui explique le problème, voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 if(window.addEventListener) // Firefox 1+, Opera 9, Safari 3+, etc. { window.addEventListener("scroll", ScrollingDetected, false); } else if(document.addEventListener) // Opera 7, Opera 8 { document.addEventListener("scroll", ScrollingDetected, false); } else if("onscroll" in self) // MSIE 6, 7 and MSIE 8 { self.onscroll = ScrollingDetected; };
J'ai interprété ce code et j'ai fait ma sauce que voici :
Code:

1 2 3 4 5 6 7 8 9 if(window.addEventListener){ window.addEventListener('scroll',function() { Scrollfen(); },false) } else if(window.attachEvent) { window.attachEvent('onscroll',function() { Scrollfen(); }) }
Donc on voit bien que pour firefox c'est "scroll" et pour ie c'est onscroll encore un truc de fou lol
Dans le code que j'ai trouvé on voit que le développeur gère un cas que je ne gère pas actuellement que voici :

Code:

else if(document.addEventListener) // Opera 7, Opera 8

A-t-il raison ? Est ce que mon code ne serait pas compatible avec opéra 7 et 8 ??? et que pensez vous de ma bidouille qui fonctionne sur ie7 et mozilla firefox 2

10/05/2009, 07h01
emmanuel.remy

Citation:

Donc on voit bien que pour firefox c'est "scroll" et pour ie c'est onscroll encore un truc de fou lol

Pourtant Mozilla indique bien que c'est onscroll. Et j'ai testé, c'est ok.

https://developer.mozilla.org/En/DOM/Window.onscroll

Quelle version de Firefox utilises tu ?

ERE
10/05/2009, 08h44
Bovino
Citation:

Envoyé par emmanuel.remy

Pourtant Mozilla indique bien que c'est onscroll. Et j'ai testé, c'est ok.

https://developer.mozilla.org/En/DOM/Window.onscroll

Quelle version de Firefox utilises tu ?

ERE

Attention emmanuel, tu confonds

Code:

window.onscroll

et

Code:

document.addEventListener("scroll", ScrollingDetected, false);

;)
Effectivement, pour associer un événement à un élément, on note bien :

Code:

element.onevenement

mais cette formulation ne permet pas d'accumuler les événements, par exemple :
Code:

1 2 window.onload = function(){fonction1()} window.onload = function(){fonction2()}
seule fonction2 sera exécutée au chargement.
En revanche, en utilisant addEventListener, il ne faut pas mettre le on pour désigner l'événement, ce n'est pas reconnu par IE (d'où attachEvent, avec l'événement désigné avec le on...), mais on peut accumuler les événements :
Code:

1 2 document.addEventListener("load", fonction1, false); document.addEventListener("load", fonction2, false);
exécutera fonction1 puis fonction2.
10/05/2009, 09h11
emmanuel.remy

Merci Bovino pour ce recadrage.

Il n'y a jamais eu de souci vis à vis de l'aspect accumulation d'événement ;) , mais je mentirais si je disais avoir déjà fait attention plus que cela au "détail" du "on" ou pas "on" dans les noms d'événement! 8O

A force d'utiliser les frameworks, on en oublie les fondamentaux...

ERE
10/05/2009, 16h16
pas30

Par contre chose étonnante, l'évènement scroll n'est pas forcément réalisé par l'internaute sur ce que j'ai pu voir. Par exemple, si on place une ancre il semble que l'évènement onscroll est appelé donc celà ne garantit en aucune façon que c'est l'internaute qui a scrollé
Par contre, personne ne saurait si c'est nécessaire de gérer çà :

Code:

else if(document.addEventListener) // Opera 7, Opera 8

Est-ce vrai que opéra 7 et 8 ne gèrera pas bien l'évènement scroll si je ne mets pas cette ligne ?
Merci

Je me permet de faire remonter ce fil car je rencontre un soucis concernant la gestion de molette, pour action sur la scrollbar (ascenseur) et peut être que l'un d'entre vous pourrait m'aiguiller ?

Plus précisément, j'utilise le code suivant pour générer mon propre ascenseur, par contre je suis infoutu de gérer cet ascenseur avec la molette (et c'est bien embetant ! ;o)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21  <script language="javascript" type="text/javascript"> var Timer; var Pas = 15; function moveLayer(Sens) { Objet=document.getElementById("contenu"); if(parseInt(Objet.style.top) + (Pas*Sens)>0) { clearTimeout(Timer); } else if(parseInt(Objet.style.top) + (Pas*Sens)<-(Objet.offsetHeight-document.getElementById("support").offsetHeight)) { clearTimeout(Timer); } else { Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px"; } Timer = setTimeout("moveLayer(" + Sens + ");", 30); } </script> 
Et plus bas dans ma page html :
Code:

1 2 3 4 5 6 7 <div style="background-color:#ffffff; width:350px; height:950px; float: right; right:0; left: 10;"> <img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="http://www.phreymusic.com/images/stories/up.jpg" style="cursor:pointer; position:absolute; right:0;" alt="up" /> <img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="http://www.phreymusic.com/images/stories/down.jpg" style="cursor:pointer; position:absolute; right:0; bottom:0;" alt="down" /> </div>
Pour voir fonctionner tout le toutime, vous pouvez vous rendre ici : http://www.phreymusic.com
Merci pour votre aide.

Phil