Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM onwheel Event

  • Last Updated : 28 Jul, 2021

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

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!