[Edit]

JavaScript - wheel event example

1 contributors

2 contributions

0 discussions

0 points

Created by:

Blythe-F

650

In this article, we would like to show you onwheel event example in JavaScript.

Quick solution:

xxxxxxxxxx
 
var myElement = document.querySelector('#my-element');
​
myElement.addEventListener('wheel', function() {
    console.log('onwheel event occurred.');
});

or:

xxxxxxxxxx
 
<div onwheel="handleWheel()"> div body here... </div>

or:

xxxxxxxxxx
 
var myElement = document.querySelector('#my-element');
​
myElement.onwheel= function() {
    console.log('onwheel event occurred.');
};

Practical examples

Edit

There are three common ways how to use onwheel event:

with event listener,
with element attribute,
with element property.

1. Event listener based example

Edit

In this section, we want to show how to use onwheel event on div element via event listener mechanism.

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <style>
      body {
        height: 100px;
      }
      #my-div {
        overflow: scroll;
        height: 300px;
        background: lightgray;
      }
    </style>
  </head>
  <body>
    <div id="my-div">Scroll the div element.</div>
    <script>
      var myDiv = document.querySelector('#my-div');
      myDiv.addEventListener("wheel", handleWheel);
​
      function handleWheel(){
        console.log('onwheel event occurred.');
      }
    </script>
  </body>
</html>

Auto running

2. Attribute based example

Edit

In this section, we want to show how to use onwheel event on div element via attribute.

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <style>
      body {
        height: 100px;
      }
      div {
        overflow: scroll;
        height: 300px;
        background: lightgray;
      }
    </style>
  </head>
  <body>
    <div onwheel="handleWheel()">Scroll the div element.</div>
    <script>
      function handleWheel(){
        console.log('onwheel event occurred.');
      }
    </script>
  </body>
</html>

Auto running

3. Property based example

Edit

In this section, we want to show how to use onwheel event on div element via property.

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <style>
      body {
        height: 100px;
      }
      #my-div {
        overflow: scroll;
        height: 300px;
        background: lightgray;
      }
    </style>
  </head>
  <body>
    <div id="my-div">Scroll the div element.</div>
    <script>
      var myDiv = document.querySelector("#my-div");
      myDiv.onwheel = function (){
        console.log('onwheel event occurred.');
      }
    </script>
  </body>
</html>