Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script when a mouse wheel is being scrolled over an element in HTML?
When a mouse wheel is being scrolled over an element, the onwheel attribute triggers a JavaScript function. This event is useful for creating interactive elements that respond to scroll gestures, such as image galleries, zoom controls, or custom scroll behaviors.
Syntax
Following is the syntax for the onwheel attribute −
<element onwheel="function(event)">Content</element>
The onwheel attribute can be used with any HTML element. The event object contains information about the scroll direction and delta values.
Basic Mouse Wheel Event
Example
Following example shows how to execute a script when a mouse wheel is scrolled over an element −
<!DOCTYPE html>
<html>
<head>
<title>Mouse Wheel Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div id="myDIV" onwheel="display()" style="background-color: lightblue; padding: 40px; border: 2px solid blue; text-align: center; margin: 20px 0;">
This is demo text. Roll the mouse wheel here.
</div>
<script>
function display() {
alert("Mouse Wheel used!");
}
</script>
</body>
</html>
When you scroll the mouse wheel over the blue div, an alert box appears displaying "Mouse Wheel used!" −
This is demo text. Roll the mouse wheel here. (Alert appears: Mouse Wheel used!)
Detecting Scroll Direction
The wheel event provides information about scroll direction through the deltaY property. Negative values indicate upward scrolling, while positive values indicate downward scrolling.
Example
Following example detects the mouse wheel scroll direction −
<!DOCTYPE html>
<html>
<head>
<title>Mouse Wheel Direction</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div id="scrollArea" onwheel="checkDirection(event)" style="background-color: lightgreen; padding: 40px; border: 2px solid green; text-align: center; margin: 20px 0;">
Scroll your mouse wheel here to see direction
</div>
<p id="result">Direction will appear here</p>
<script>
function checkDirection(event) {
var direction = event.deltaY < 0 ? "Up" : "Down";
document.getElementById("result").innerHTML = "Scrolled: " + direction;
}
</script>
</body>
</html>
The output shows the scroll direction based on mouse wheel movement −
Scroll your mouse wheel here to see direction Direction will appear here (Updates to "Scrolled: Up" or "Scrolled: Down" based on wheel direction)
Interactive Zoom Effect
The onwheel event can be used to create zoom functionality by scaling an element based on scroll direction.
Example
Following example creates a zoom effect using the mouse wheel −
<!DOCTYPE html>
<html>
<head>
<title>Mouse Wheel Zoom</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Mouse Wheel Zoom Example</h2>
<div id="zoomBox" onwheel="zoomElement(event)" style="background-color: orange; width: 200px; height: 150px; border: 2px solid darkorange; display: flex; align-items: center; justify-content: center; margin: 20px 0; cursor: pointer; transition: transform 0.2s;">
Scroll to Zoom
</div>
<p>Scroll up to zoom in, scroll down to zoom out</p>
<script>
var scale = 1;
function zoomElement(event) {
event.preventDefault();
if (event.deltaY < 0) {
scale += 0.1; // Zoom in
} else {
scale -= 0.1; // Zoom out
}
scale = Math.max(0.5, Math.min(scale, 3)); // Limit scale between 0.5 and 3
document.getElementById("zoomBox").style.transform = "scale(" + scale + ")";
}
</script>
</body>
</html>
The orange box scales up when scrolling up and scales down when scrolling down, with size limits between 50% and 300% of the original size.
Mouse Wheel Zoom Example [Orange box that grows/shrinks with mouse wheel] Scroll up to zoom in, scroll down to zoom out
Event Properties
The wheel event object provides several useful properties −
| Property | Description |
|---|---|
deltaX |
Horizontal scroll amount (rarely used) |
deltaY |
Vertical scroll amount (most common) |
deltaZ |
Z-axis scroll amount (rarely used) |
deltaMode |
Unit of measurement (pixels, lines, or pages) |
Browser Compatibility
The onwheel event is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. For older browsers, you may need to use the deprecated onmousewheel event as a fallback.
Conclusion
The onwheel attribute provides an effective way to create interactive elements that respond to mouse wheel scrolling. It can be used for zoom controls, custom scroll behaviors, or any interactive feature that benefits from scroll gesture input. Always remember to use event.preventDefault() when you want to override the default scroll behavior.
395 Views
