Why onwheel ?
The JavaScript onwheel feature works when the mouse wheel is rolled up or down on an element. The onwheel event also occurs when the user scrolls or zooms an item using a touchpad (such as a laptop’s “mouse”).
Syntax:
| HTML Attribute | <element onmousewheel = “handler(event)“> |
| Event Property | object.onmousewheel = handler; |
| attachEvent Method | object.attachEvent(“onmousewheel“, handler) |
| addEventListener Method | object.addEventListener(“mousewheel“, handler, useCapture) |
onwheel Examples
Example 1
<body>
<div class="container">
<h2>onwheel Event</h2>
<div id="box" onwheel="wheelFunction();"></div>
</div>
<script>
function wheelFunction() {
let box = document.getElementById("box")
box.style.transform = "scale(2)"
box.style.backgroundColor = "#b63434"
}
</script>
</body>Example 2
<body>
<div class="container">
<h2>onwheel Event</h2>
<div id="box"></div>
</div>
<script>
document.getElementById("box").onwheel = function () {
wheelFunction();
};
function wheelFunction() {
let box = document.getElementById("box")
box.style.transform = "scale(2)"
box.style.backgroundColor = "#b63434"
}
</script>
</body>Example 3
<body>
<div class="container">
<h2>onwheel Event</h2>
<div id="box"></div>
</div>
<script>
document.getElementById("box").addEventListener("wheel", wheelFunction);
function wheelFunction() {
let box = document.getElementById("box")
box.style.transform = "scale(2)"
box.style.backgroundColor = "#b63434"
}
</script>
</body>
TrueCodes 
Leave a comment