Open In App

HTML | DOM onwheel Event

Improve
Improve
Like Article
Like
Save
Share
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

 


Last Updated : 28 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads