wheel

Событие, когда кто-то крутит колесо мыши 🖱

Время чтения: меньше 5 мин

Кратко

Скопировано

Событие wheel происходит, когда пользователь физически прокручивает колесо мыши, даже если на странице ничего не происходит. За традиционный скролл отвечает событие scroll.

Как пишется

Скопировано

Отловим все случаи, когда пользователь крутит колесо мыши при наведённом на первый <div> курсоре:

        
          
          const div = document.getElementsByTagName('div')[0]div.addEventListener('wheel', function(event) {  console.log(event)})
          const div = document.getElementsByTagName('div')[0]

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

        
        
          
        
      

Как понять

Скопировано

Событие wheel всегда возникает при прокрутке колеса мыши. Попробуйте полистать внутри пустого блока (будет удобнее, если открыть демо в новой вкладке по ссылке внизу):

Открыть демо в новой вкладке

Объект события wheel

Скопировано

Объект события wheel содержит информацию о направлении и «силе» прокрутки в свойствах:

  • deltaX — горизонтальная прокрутка. Значение — целое число:
    • отрицательное, если пользователь прокручивает влево;
    • 0 — если в этом направлении прокрутка не происходит
    • положительное при прокрутке вправо;
  • deltaY — вертикальная прокрутка. Значение — целое число:
    • отрицательное, если пользователь прокручивает вверх;
    • 0 — если в этом направлении прокрутка не происходит
    • положительное при прокрутке вниз;

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

Открыть демо в новой вкладке

Подсказки

Скопировано

💡 Если элемент имеет полосу прокрутки, то обычно после события wheel происходит scroll. Этого можно избежать, вызвав метод события preventDefault():

        
          
          document.addEventListener('wheel', function(event) {  // останавливаем поведение по умолчанию, то есть прокрутку  event.preventDefault()})
          document.addEventListener('wheel', function(event) {
  // останавливаем поведение по умолчанию, то есть прокрутку
  event.preventDefault()
})