Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Event : Scroll de la molette de la souris ?

8 réponses
Avatar
Vincent Nabet
Bonjours à tous,

J'aimerais savoir s'il était possible de trapper l'event de scroll avec
la molette de la souris afin d'utiliser cette fonction à autre chose que
le scroll vertical de la page.

Je n'ai pas trouvé grand chose de mon côté. Le clic sur la molette est
bien detectable et cela devrait pouvoir être de même pour sa fonction de
scroll ?

Merci d'avance
Vincent

8 réponses

Avatar
PasContent
bonjour
...onscroll="...;"...
ou je n'ais pas compris ?
@+
Avatar
ASM
Bonjours à tous,

J'aimerais savoir s'il était possible de trapper l'event de scroll avec
la molette de la souris afin d'utiliser cette fonction à autre chose que
le scroll vertical de la page.

Je n'ai pas trouvé grand chose de mon côté. Le clic sur la molette est
bien detectable et cela devrait pouvoir être de même pour sa fonction de
scroll ?


à part pour IE Windows, pas trouvé non plus

http://arkham46.developpez.com/articles/access/mousewheel/

onmousewheel n'a pas l'air d'impressionner FF ...

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Guy
Bonjours à tous,

J'aimerais savoir s'il était possible de trapper l'event de scroll avec
la molette de la souris afin d'utiliser cette fonction à autre chose que
le scroll vertical de la page.

Je n'ai pas trouvé grand chose de mon côté. Le clic sur la molette est
bien detectable et cela devrait pouvoir être de même pour sa fonction de
scroll ?

Merci d'avance
Vincent


Bonjour,
l'objet window dispose de l'évenemnt onscroll, il sera certainement
déclenché aussi par la manipulation de l'ascenseur.
personnellement, je n'ai pas utilsé
G

Avatar
Laurent Vilday
J'aimerais savoir s'il était possible de trapper l'event de scroll avec
la molette de la souris afin d'utiliser cette fonction à autre chose que
le scroll vertical de la page.


oui, au moins pour IE6, opéra9 et FX1.5, pas testé le reste.

* Version courte *

IE6, opéra9 : onmousewheel
FX1.5 : DOMMouseScroll

* Version longue *

Pour IE6 et opéra9, c'est l'event mousewheel, accessible par
element.onmousewheel = function() { alert('on scroll'); };

Pour IE6 on peut également passer par leur (honteux) modèle de gestion
des events, mais ça passe plus sous opéra
element.attachEvent('onmousewheel', function() {});

http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onmousewheel.asp

Par contre pour FX, il n'y a pas d'équivalent à element.onXXXXX. Il faut
passer par l'assignation d'un listener d'event sur DOMMouseScroll.

element.addEventListener('DOMMouseScroll', function() {}, false);

J'ai été incapable de trouver de la doc *cough* ailleurs que pour XUL,
mais ça passe alors allons y :p
http://xulplanet.com/references/elemref/ref_EventHandlers.html#attr_DOMMouseScroll

Ensuite il y a le problème de la détection du sens du scroll.

Pour IE6 on a accès à la propriété *wheelDelta* de l'objet window.event.
Pour FX1.5 on la propriété *detail* de l'objet event retourné au handler.
Pour Opéra9, c'est merveilleux :) on a les deux propriétés dans l'event
retourné au handler.

Je sais pas trop d'où je le sors, mais en jouant un peu avec ces
propriétés, on peut en détacher une valeur générique commune.

Chez moi, quand wheelDelta est à 120, la même chose est a 3 et c'était
un coup de molette vers le bas. Pourquoi ? je sais pas, c'est comme ça :)

Donc une méthode "générique" d'assignation ça pourrait être ça (mais
bon, c'est pas bulletproof, ça doit leaker à donf et faudrait gérer plus
finement le contexte d'execution qu'est pas géré ici), mais enfin bon ça
pourrais être une base de réflexion :

// function générique qui applique le listener DOM level 0
var setWheelEvent = function(element, handler)
{
element.onmousewheel = handler;
};

// function qui récupère le delta de la molette
var getWheelDelta = function() { return 0; };

// modèle firefox
if ( document.addEventListener && removeEventListener && !window.opera )
{
setWheelEvent = function(element, handler)
{
element.addEventListener('DOMMouseScroll', handler, false);
};
getWheelDelta = function(evt)
{
return -(evt.detail || 0);
}
}
// modèle IE
else if ( document.attachEvent && document.detachEvent && !window.opera )
{
getWheelDelta = function()
{
var evt = window.event;
return evt.wheelDelta ? evt.wheelDelta / 40 : 0;
};
}
// modèle opéra
else if ( window.opera )
{
getWheelDelta = function(evt)
{
return -(evt.detail || 0);
};
}

La petite démo est là :

http://mokhet.com/tests/molette.html

Maintenant, la question est : est-ce fiable ? Jusqu'à présent j'ai
jamais eu de problème avec ça que j'utilise pour transformer des input
text en spinners, mais la doc étant très ... difficile à dénicher, je ne
peux rien affirmer.

--
laurent

Avatar
Laurent Vilday

... la même chose est a 3 ...


... est à 3 pour la propriété *detail*

* IE6
window.event.wheelDelta = 120

* FX1.5
event.detail = 3

* Opera9
event.wheelDelta = 120
event.detail = 3

--
laurent

Avatar
ASM

http://mokhet.com/tests/molette.html

Maintenant, la question est : est-ce fiable ?


on s'en moque ! c'est génial et archivé dans la boîte à malices :-)


pour transformer des input text en spinners,


j'ai un peu de mal avec l'anglais,

des entrées texte en essoreurs ?


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Olivier Miakinen

pour transformer des input text en spinners,


j'ai un peu de mal avec l'anglais,


Je me sens moins seul.

des entrées texte en essoreurs ?


Non, en machines à tisser.

--
Olivier Miakinen
Troll du plus sage chez les conviviaux : le nouveau venu, avec
son clan, s'infiltre dans les groupes de nouvelles. (3 c.)


Avatar
Vincent Nabet
Merci de tout coeur pour cette réponse exhaustive !

Je vais vite essayer ça



J'aimerais savoir s'il était possible de trapper l'event de scroll
avec la molette de la souris afin d'utiliser cette fonction à autre
chose que le scroll vertical de la page.



oui, au moins pour IE6, opéra9 et FX1.5, pas testé le reste.

* Version courte *

IE6, opéra9 : onmousewheel
FX1.5 : DOMMouseScroll

* Version longue *

Pour IE6 et opéra9, c'est l'event mousewheel, accessible par
element.onmousewheel = function() { alert('on scroll'); };

Pour IE6 on peut également passer par leur (honteux) modèle de gestion
des events, mais ça passe plus sous opéra
element.attachEvent('onmousewheel', function() {});

http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onmousewheel.asp


Par contre pour FX, il n'y a pas d'équivalent à element.onXXXXX. Il faut
passer par l'assignation d'un listener d'event sur DOMMouseScroll.

element.addEventListener('DOMMouseScroll', function() {}, false);

J'ai été incapable de trouver de la doc *cough* ailleurs que pour XUL,
mais ça passe alors allons y :p
http://xulplanet.com/references/elemref/ref_EventHandlers.html#attr_DOMMouseScroll


Ensuite il y a le problème de la détection du sens du scroll.

Pour IE6 on a accès à la propriété *wheelDelta* de l'objet window.event.
Pour FX1.5 on la propriété *detail* de l'objet event retourné au handler.
Pour Opéra9, c'est merveilleux :) on a les deux propriétés dans l'event
retourné au handler.

Je sais pas trop d'où je le sors, mais en jouant un peu avec ces
propriétés, on peut en détacher une valeur générique commune.

Chez moi, quand wheelDelta est à 120, la même chose est a 3 et c'était
un coup de molette vers le bas. Pourquoi ? je sais pas, c'est comme ça :)

Donc une méthode "générique" d'assignation ça pourrait être ça (mais
bon, c'est pas bulletproof, ça doit leaker à donf et faudrait gérer plus
finement le contexte d'execution qu'est pas géré ici), mais enfin bon ça
pourrais être une base de réflexion :

// function générique qui applique le listener DOM level 0
var setWheelEvent = function(element, handler)
{
element.onmousewheel = handler;
};

// function qui récupère le delta de la molette
var getWheelDelta = function() { return 0; };

// modèle firefox
if ( document.addEventListener && removeEventListener && !window.opera )
{
setWheelEvent = function(element, handler)
{
element.addEventListener('DOMMouseScroll', handler, false);
};
getWheelDelta = function(evt)
{
return -(evt.detail || 0);
}
}
// modèle IE
else if ( document.attachEvent && document.detachEvent && !window.opera )
{
getWheelDelta = function()
{
var evt = window.event;
return evt.wheelDelta ? evt.wheelDelta / 40 : 0;
};
}
// modèle opéra
else if ( window.opera )
{
getWheelDelta = function(evt)
{
return -(evt.detail || 0);
};
}

La petite démo est là :

http://mokhet.com/tests/molette.html

Maintenant, la question est : est-ce fiable ? Jusqu'à présent j'ai
jamais eu de problème avec ça que j'utilise pour transformer des input
text en spinners, mais la doc étant très ... difficile à dénicher, je ne
peux rien affirmer.

--
laurent