onwheel
The onwheel event is triggered when the mouse wheel is scrolled over an element. It also activates when the user scrolls using a touchpad.
onwheel event
The onwheel event activates a script when the mouse wheel is rotated over an element. It is often used to create custom scrolling actions or zoom features in web applications.
Syntax
In HTML
index.html
<element onwheel="myScript">
In JS
script.js
object.onwheel = function(){myScript};
In JavaScript, the addEventListener() function is used.
script.js
object.addEventListener("wheel", myScript);
Example
::event-onwheel
::
index.html
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onwheel Event</h2>
<p>Use the addEventListener() method to attach a "wheel" event to an element:</p>
<div id="myDIV" style="border:1px solid black">
<p>Roll the mouse wheel over me!</p>
</div>
<script>
document.getElementById("myDIV").addEventListener("wheel", myFunction);
function myFunction() {
this.style.fontSize = "35px";
}
</script>
</body>
</html>
Values
Conclusion
The onwheel event is useful for handling mouse wheel interactions and touchpad scrolling. It allows developers to implement custom scrolling behaviors or zoom functions in web applications. This event provides more flexibility and precision compared to older methods like onmousewheel.