Событие «Колесико вверх/вниз» у vue?

Question

[aweui]

Добрый день!

Vue.js может "слушать" событие @wheel.
А есть ли возможность отслеживать прокрутку колесиком мыши вверх и вниз?

Спасибо.

Answer 1

[Владимир Проскурин]

При вызове события @whell передается объект события WheelEvent, в нем есть свойство deltaY, оно как раз указывает, куда крутится мышь. Если число положительно, но колесико крутится вниз, если отрицательно - вверх.

Пример
там можете вместо назначений this.pos, поставить вызов своих методов wheelUp, wheelDown.
UPD: чтобы окно браузера не скролилось, можно добавить в определению события .prevent
<div id="app" @wheel.prevent="wheel"></div>

Comments

[aweui]

Владимир Проскурин спасибо!

Answer 2

[Сергей delphinpro]

Рекомендую законсолить это событие и посмотреть — там есть параметр wheelDelta, который либо положительный, либо отрицательный в зависимости от направления прокрутки.

update: https://developer.mozilla.org/en-US/docs/Web/Event...

Comments

[aweui]

Не понял, а как законсолить событие?)

[Сергей delphinpro]

aweui, вывести в консоль и посмотреть

addEventListener('wheel', function(event){
  console.log(event);
});

или в контексте vue

methods: {
  onWheel(event){
    console.log(event);
  }
}

<div @wheel="onWheel"></div>

[Сергей delphinpro]

Свойства deltaY/deltaX конечно же
https://developer.mozilla.org/en-US/docs/Web/Event...

[aweui]

Сергей delphinpro спасибо!