Cодержание

Руководство Javascript WheelEvent

1- WheelEvent

WheelEvent это интерфейс представляющий происходящие события, когда пользователь двигает колесо мыши (mouse wheel) или подобного устройства.

Браузеры поддерживающие  WheelEvent:
WheelEvent это подинтерфейс  MouseEvent, который унаследует все свойства (property) и методы родительского интерфейса.
  • TODO Link!
  • TODO Link!
Событие Описание
wheel Событие происходит когда колесо мыши (mouse wheel) катится вверх или вниз над элементом.
Свойства (property) у  WheelEvent:
Свойства Описание
deltaX Возвращает число  горизонтальной прокрутки колеса мыши (mouse wheel) (Ось X)
deltaY Возвращает число  вертикальной прокрутки колеса мыши (mouse wheel) (Ось Y)
deltaZ Возвращает количество прокрутки колеса мыши по оси Z.
deltaMode Возвращает чило, представляющее единицу измерения для значений delta (DOM_DELTA_PIXEL, DOM_DELTA_PIXEL, DOM_DELTA_PAGE)
Константы:
Константа Значение Описание
DOM_DELTA_PIXEL 0 Единица измерения delta это pixels.
DOM_DELTA_LINE 1 Единица измерения delta это lines.
DOM_DELTA_PAGE 2 Единица измерения delta это ​​​​​​​pages.
Пример с  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";

}