Le Tutoriel de Javascript WheelEvent

View more Tutorials:

1- WheelEvent

1- WheelEvent

WheelEvent est une interface représentant les événements qui surviennent lorsqu’un utilisateur déplace la molette de la souris (mouse wheel) ou un équipement similaire.
Les navigateurs qui soutiennent  WheelEvent :
WheelEvent s'agit la sous interface de  MouseEvent. Elle va hériter toutes les propriétés (property) et les méthodes de l'interface mère.
  • TODO Link!
  • TODO Link!
Evénement Description
wheel L'événement se produit lorsque la molette de la souris (mouse wheel) roule vers le haut ou vers le bas sur un élément.
Les propriétés (property) de  WheelEvent :
Propriété Description
deltaX Renvoie la quantité de défilement horizontal d’une molette de souris (mouse wheel) (axe des X)
deltaY Renvoie la quantité de défilement vertical d’une molette de souris (mouse wheel) (Trục Y)
deltaZ Retourne la quantité de défilement d’une molette de souris pour l’axe Z.
deltaMode TRenvoie un nombre qui représente l'unité de mesure des valeurs delta​​​​​​​ (DOM_DELTA_PIXEL, DOM_DELTA_PIXEL, DOM_DELTA_PAGE)
Des constantes :
Constantes
 Valeur Description
DOM_DELTA_PIXEL 0 L'unité de mesure du delta est pixels.
DOM_DELTA_LINE 1 L'unité de mesure du delta est lines.
DOM_DELTA_PAGE 2 L'unité de mesure du delta est​​​​​​​ pages.
Exemple avec WheelEvent :
wheelevents-example.html 
<!DOCTYPE html>
<html>
   <head>
      <title>WheelEvent Example</title>

      <script src="wheelevents-example.js"></script>

   </head>
   <body>

      <h3>WheelEvent example</h3>

      <div style="font-size:12px; padding:5px; border:1px solid #ccc;"
            onwheel="wheelHandler(event)">
            Hello Everyone!
      <div>

   </body>
</html>
wheelevents-example.js 
function wheelHandler(evt)  {

   var fontSize = evt.target.style.fontSize;// 12px, 13px,...

   var value = Number(fontSize.substr(0, fontSize.length-2)); // 12, 13,..

   // Scrolling up
   if (evt.deltaY < 0) {
       if(value < 50)  {
         value++;
       }
   }

   // Scrolling down
   if(evt.deltaY > 0)  {
      if(value > 5)  {
         value--;
      }
   }
   
   evt.target.style.fontSize = value+"px";

}

View more Tutorials:

Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.