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"

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

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

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

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

Подсказки

Секция статьи "Подсказки"

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

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