évenement scroll et molette souris

**pas30** · 09/05/2009, 01h11

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 :

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

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

**emmanuel.remy** · 09/05/2009, 03h38

Remplace onScroll par onscroll

Concernant la molette:

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 :

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

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

**pas30** · 09/05/2009, 04h18

J'ai testé avec le code ci-dessous :

Code :

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

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

J'ai cherché la solution mais pour l'instant je ne vois pas

**Auteur** · 09/05/2009, 11h20

bonjour,

pourquoi se casser la tête avec addEventListener et attachEvent

Code x :

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
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>

**pas30** · 09/05/2009, 17h38

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

**pas30** · 10/05/2009, 02h17

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

Code :

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

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 :

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

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 :

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

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

**emmanuel.remy** · 10/05/2009, 08h01

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

**Bovino** · 10/05/2009, 09h44

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 :

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

window.onscroll

et

Code :

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

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

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

Code :

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

element.onevenement

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

Code :

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

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 :

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

1
2
document.addEventListener("load", fonction1, false);
document.addEventListener("load", fonction2, false);

exécutera fonction1 puis fonction2.

**emmanuel.remy** · 10/05/2009, 10h11

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!

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

ERE

**pas30** · 10/05/2009, 17h16

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 :

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

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

**PhRey** · 11/10/2009, 11h26

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 :

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
<!-- JAVASCRIPT DE LA SCROLLBAR !-->
 
<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>
 
<!-- FIN JAVASCRIPT DE LA SCROLLBAR !-->

Et plus bas dans ma page html :

Code :

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

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

évenement scroll et molette souris

JavaScript

Vue hybride

Discussions similaires

Partager

Partager