Open In App

HTML | DOM onwheel Event

Last Updated : 28 Jul, 2021
Comments
Improve
Suggest changes
Like Article
Like
Report

The onwheel event in HTML DOM occurs when the mouse wheel is spined over an element. This event also triggered when the user scrolls or zooms in or out an element. The onwheel event also works on the touchpad.

supported Tagst

  • All elements supported  this event

Syntax: 
 

  • In HTML: 
     
<element onwheel="Script">
  • In JavaScript: 
     
object.onwheel = function(){Script};
  • In JavaScript, using the addEventListener() method: 
     
object.addEventListener("wheel", Script);


Example: Using the addEventListener() method 
 

html
<!DOCTYPE html>
<html>

<head>
    <title>HTML DOM onwheel Event</title>
    <style>
        #divID {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>HTML DOM onwheel Event</h2>

        <div id="divID">roll the wheel</div>
    </center>
    <script>
        document.getElementById(
          "divID").addEventListener("wheel", GFGfun);

        function GFGfun() {
            this.style.fontSize = "40px";
            this.style.color = "green";
        }
    </script>

</body>

</html>

Output: 
Before: 
 


After: 
 


Supported Browsers: The browsers supported by HTML DOM onwheel Event are listed below: 
 

  • Google Chrome 31.0
  • Internet Explorer 9.0
  • Firefox 17.0
  • Opera 18.0


 


Article Tags :

Similar Reads