betacode

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

Сайт бесплатного изучения языков:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- WheelEvent

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

Браузеры поддерживающие WheelEvent:
WheelEvent это подинтерфейс MouseEvent, который унаследует все свойства (property) и методы родительского интерфейса.
СобытиеОписание
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_PIXEL0Единица измерения delta это pixels.
DOM_DELTA_LINE1Единица измерения delta это lines.
DOM_DELTA_PAGE2Единица измерения 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";

}