HTML onwheel Event Attribute - Mouse Events Attribute

The onwheel event attribute in HTML triggers a script when the wheel of a pointing device (like a mouse wheel) is rolled up or down over an element. It also fires when a user scrolls or zooms on an element using a touchpad.

Example of HTML onwheel Event Attribute

It Execute a JavaScript when the user rolls the mouse wheel over a <div> element.

index.html

Example: HTML

 <div onwheel="myFunction()">Roll the mouse wheel over me</div>

Output should be:

Definition and Usage of HTML onwheel Event Attribute

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).

Browser Support of HTML onwheel Event Attribute

The numbers in the table specify the first browser version that fully supports the event attribute.

Syntax of HTML onwheel Event Attribute

<element onwheel="script">

Attribute Values of HTML onwheel Event Attribute

Value	Description
script	The script to be run on onwheel

Technical Details of HTML onwheel Event Attribute

Supported HTML tags:	All HTML elements

How to Execute a JavaScript when the user rolls the mouse wheel over a <div> element

This example demonstrates how to assign an "onwheel" event event to a DIV element. Roll the mouse wheel over me - either up or down!

A function is triggered when you roll the mouse wheel over div. The function sets the font-size of div to 35 pixels.

Note: The onwheel event is not supported in Internet Explorer or Safari.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  border: 1px solid black;
}
</style>
</head>
<body>

<div 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 or down!</div>

<p>A function is triggered when you roll the mouse wheel over div. The function sets the font-size of div to 35 pixels.</p>

<p><strong>Note:</strong> The onwheel event is not supported in Internet Explorer or Safari.</p>

<script>
function myFunction() {
  document.getElementById("myDIV").style.fontSize = "35px";
}
</script>

</body>
</html>

Output should be:

html event attributes

List of Mouse Events Attribute	Mouse Events Attribute
HTML onclick Event Attribute	Mouse Events Attribute
HTML ondblclick Event Attribute	Mouse Events Attribute
HTML onmousedown Event Attribute	Mouse Events Attribute
HTML onmousemove Event Attribute	Mouse Events Attribute
HTML onmouseout Event Attribute	Mouse Events Attribute
HTML onmouseover Event Attribute	Mouse Events Attribute
HTML onmouseup Event Attribute	Mouse Events Attribute
HTML onwheel Event Attribute	Mouse Events Attribute

Single Articles

Example of HTML onwheel Event Attribute	Mouse Events Attribute
Definition and Usage of HTML onwheel Event Attribute	Mouse Events Attribute
Browser Support of HTML onwheel Event Attribute	Mouse Events Attribute
Syntax of HTML onwheel Event Attribute	Mouse Events Attribute
Attribute Values of HTML onwheel Event Attribute	Mouse Events Attribute
Technical Details of HTML onwheel Event Attribute	Mouse Events Attribute
How to Execute a JavaScript when the user rolls the mouse wheel over a <div> element	Mouse Events Attribute

Type:	Develop
Category:	Web Tutorial
Sub Category:	Mouse Events Attribute
Uploaded by:	Admin

Reffered: https://www.w3schools.com/tags/ev_onwheel.asp