wheel

Событие 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 содержит информацию о направлении и «силе» прокрутки в свойствах:

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать