JSB Library

wheel/mousewheel

Détecte le roulement de la molette dans la page, dans un bloc donné ou dans une sélection d'éléments donnés.

wheel() et mousewheel() sont des alias, ils peuvent être utilisés sur une sélection ou directement sur $

Pour exécuter une fonction lorsque l'utilisateur roule la molette n'importe où sur la page, utilisez $.wheel() :

$.wheel(function (event,indice)
{
var i=indice; // Contient un indice de déroulement
return false;
// Si la fonction retourne false, alors l'effet par défaut de la molette est annulé
});

Important : avec JSB event.detail est compatible avec tous les navigateurs. Si celui-ci n'existe pas, il est automatiquement calculé en fonctions d'autres attributs. Vous pouvez donc l'utiliser sans rien coder pour le rendre compatible.

Dans le code précédent, la fonction s'exécute dès que l'utilisateur est sur la page et roule la molette. Il est possible de n'exécuter la fonction que si le pointeur de la souris se trouve sur un ou certains éléments :

$('#bloc1,#bloc2').wheel(function ()
{
// Ce code s'exécute si on roule la molette en survolant #bloc1 ou #bloc2
});

Sur l'exemple ci-dessous, vous pouvez tester l'intérêt de retourner false :

$('#bloc').wheel(function (event,indice) { if(indice>0) $(this).css('background:lime'); else $(this).css('background:red'); // return false stop l'événement return false; });	$('#bloc').wheel(function (event,indice) { if(indice>0) $(this).css('background:lime'); else $(this).css('background:red'); // sans return false, l'événement continue // le bloc défile });
Ligne 1 Ligne 2 Ligne 3 Ligne 4 Ligne 5 Ligne 6 Ligne 7	Ligne 1 Ligne 2 Ligne 3 Ligne 4 Ligne 5 Ligne 6 Ligne 7

Vous pouvez forcer l'annulation de l'événement en passant true à la fonction wheel(), ainsi les deux codes ci-dessous sont équivalents :

// Code 1
$('#bloc').wheel(function (event,indice)
{
$(this).html(indice);
return false;
});

// Code 2
$('#bloc').wheel(function (event,indice)
{
$(this).html(indice);
},true);

Voyez un dernier exemple pour voir les valeurs des différentes variables disponibles :

indice	event.detail	event.wheelDelta	total += indice

$('#bloc').wheel(function (event,indice)
{
$(this).$('td°0').text(indice);
$(this).$('td°1').text(event.detail);
$(this).$('td°2').text(event.wheelDelta);

var total=$.intval($(this).$('td°3').text());
$(this).$('td°3').text(total+i);
},true);