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";

}

 
Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.