Доброго времени суток дорогие друзья, поехали! Мы можем пользоваться колесиком мыши для разных целей. Для скролинга, масштабирования, выборки и т.п. Событие отвечающее за прокрутку колесика мышки называется wheel.

Рассмотрим пример:

document.addEventListener('wheel',function(event){
   console.log('Мы прокрутили колесико');
});

здесь как только мы покрутили колесико нам в консоль сразу же полетели сообщения.

Событие wheel чем то похоже на скролл. Так как с помощью колесика мыши мы также можем скролить. Но на этом их сходство заканчивается.

При одном повороте колесика происходит событие и если мы посмотрим что возвращает свойства позиций event, то увидим следующую картину:

document.addEventListener('wheel',function(event){
    event = event || window.event;
    var y = event.deltaY || event.detail || event.wheelDelta;
   console.log(y);
});

здесь нам возвращается определенная величина в консоль(у меня 100). Это величина является относительным смещением. К примеру при скролинге вниз она прибавляется к текущей позиции скрола, а вверх вычитается из нее. То есть в результате прокрутки колесика вниз(на себя) у нас в консоль выводится положительное число, а вверх(от себя) отрицательное. Но повторюсь само число не меняется оно фиксированное.

С этим мы разобрались! Теперь применим полученные знания на практике.

Сделаем возможность масштабирования картинки с помощью колесика мыши, то есть приблизить и отдалить.

Пример:

<img src="fon1.jpg" alt="" style="transform:scale(1)">
<script>
    document.addEventListener('wheel',function(event){
    event = event || window.event;
    var y = event.deltaY || event.detail || event.wheelDelta,val=0.1,min = 0,max=0;
    if(y > 0){
         min = document.querySelector('img').style.transform.match(/[\d\.]{1,}/)[0];
        document.querySelector('img').style.transform = "scale("+(parseFloat(min) - val)+")";
        console.log('-');
    }
    if(y < 0){
        max = document.querySelector('img').style.transform.match(/[\d\.]{1,}/)[0];
        document.querySelector('img').style.transform = "scale("+(parseFloat(max) + val)+")";
        console.log('+');
    }
});

смотрим что у нас здесь получилось. У нас есть некая картинка у которой задан масштаб 1:1(transform:scale(1)). При прокрутке колесика мыши мы используем фиксированное смещение для определения одного из действий приближение или отдаление. В нашем случае если мы крутим колесико вниз, то есть фиксированная величина положительна у нас происходит отдаление, а если крутим вверх, фиксированная величина отрицательна и нас происходит приближение. Сам процесс приближения и отдаления происходит за счет простых вычислительных действий. При отдалении у нас из текущего значения масштаба вычисляется 0.1, при приближении прибавляется. И в результате всех действий используя колесико мыши мы теперь можем приближать и отдалять нашу картинку.

Это далеко не все что мы можем делать с помощью колесика мыши! Дальше включайте свое воображение на полную и вперед.

Вот в принципе и все что я хотел вам рассказать. На этом я с вами прощаюсь.

Желаю успехов и удачи! Пока.