revision:
The onwheel attribute fires when the wheel of a pointing device is rolled up or down over an element. The onwheel attribute also fires when the user scrolls or zooms on an element by using a touchpad (like the "mouse" of a laptop).
The onwheel attribute is part of the event attributes and can be used on any HTML element.
<element onwheel="script"></element>
script: this attribute contains single value script which works when the onwheel event is called.
A function is triggered when you roll the mouse wheel over div. The function sets the font-size of div to 35 pixels.
<div style="margin-left:3vw;" id="myDIV" onwheel="myFunction()">This example demonstrates how to
assign an "onwheel" event event to a DIV element. Roll the mouse wheel over me - either up
r down!</div>
<p class="spec">A function is triggered when you roll the mouse wheel over div. The function sets
the font-size of div to 35 pixels.</p>
<script>
function myFunction() {
document.getElementById("myDIV").style.fontSize = "35px";
}
</script>
<style>
#myDIV { border: 1px solid black; }
</style>
A function is triggered when you roll the mouse wheel over div. The function sets the background to lightgreen.
<div style="margin-left:3vw;" id="myDIV_1" onwheel="myFunction_1()">This example demonstrates how to
assign an "onwheel" event event to a DIV element. Roll the mouse wheel over me - either up
or down!</div>
<p class="spec">A function is triggered when you roll the mouse wheel over div. The function sets
the background to lightgreen.</p>
<script>
function myFunction_1() {
document.getElementById("myDIV_1").style.background = "lightgreen";
}
</script>
<style>
#myDIV_1 { border: 1px solid black; }
</style>