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