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
HTML onwheel Event Attribute
The onwheel event attribute in HTML is triggered when the user moves the mouse wheel up or down on an HTML element. This event fires regardless of whether the element is scrollable or not, making it useful for creating custom interactions based on wheel movement.
Syntax
Following is the syntax for the onwheel event attribute −
<tagname onwheel="script">Content</tagname>
Where script is the JavaScript code or function to be executed when the wheel event occurs.
Parameters
The onwheel event automatically passes an event object containing information about the wheel action −
event.deltaY − Returns a positive value when scrolling down and negative when scrolling up.
event.deltaX − Returns horizontal scroll values (for horizontal wheel movement).
event.target − Returns the element that triggered the wheel event.
Basic Example
Following example demonstrates the basic usage of the onwheel event attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML onwheel Event Attribute</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
min-height: 100vh;
}
.wheel-area {
border: 2px solid #fff;
padding: 20px;
margin: 20px auto;
max-width: 500px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
}
</style>
</head>
<body>
<h1>HTML onwheel Event Demo</h1>
<div onwheel="changeBackground()" class="wheel-area">
<p>Move your mouse wheel up or down over this area to change the background color.</p>
<p>This demonstrates the onwheel event attribute in action.</p>
</div>
<p>Scroll your mouse wheel over the bordered area above.</p>
<script>
function changeBackground() {
document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%)";
document.body.style.color = "#fff";
}
</script>
</body>
</html>
When you move the mouse wheel over the bordered area, the page background changes from orange gradient to blue gradient −
Initial: Orange gradient background After wheel movement: Blue gradient background with white text
Detecting Wheel Direction
The onwheel event provides direction information through the event object. Following example shows how to detect wheel direction −
<!DOCTYPE html>
<html>
<head>
<title>Wheel Direction Detection</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.wheel-box {
width: 300px;
height: 200px;
border: 3px solid #007bff;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
font-size: 18px;
}
#result {
margin-top: 20px;
padding: 10px;
font-weight: bold;
color: #007bff;
}
</style>
</head>
<body>
<h1>Wheel Direction Detection</h1>
<div class="wheel-box" onwheel="detectDirection(event)">
Scroll wheel here
</div>
<div id="result">Wheel direction will appear here</div>
<script>
function detectDirection(event) {
var direction = event.deltaY > 0 ? "DOWN" : "UP";
document.getElementById("result").innerHTML = "Wheel moved: " + direction + " (deltaY: " + event.deltaY + ")";
}
</script>
</body>
</html>
Moving the wheel up shows negative deltaY values, while moving down shows positive values −
Wheel moved: UP (deltaY: -100) Wheel moved: DOWN (deltaY: 100)
Preventing Default Scroll Behavior
You can prevent the default scrolling behavior using event.preventDefault(). This is useful when creating custom scroll interactions −
<!DOCTYPE html>
<html>
<head>
<title>Prevent Default Scroll</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
height: 150vh;
}
.no-scroll-area {
width: 400px;
height: 300px;
border: 2px solid #dc3545;
margin: 20px auto;
padding: 20px;
background: #fff3cd;
overflow: hidden;
}
.counter {
font-size: 24px;
font-weight: bold;
color: #dc3545;
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<h1>Prevent Default Scroll</h1>
<p>The page will scroll normally, but not inside the yellow box.</p>
<div class="no-scroll-area" onwheel="customWheel(event)">
<h3>Custom Wheel Area</h3>
<p>Scrolling is disabled here. Instead, we count wheel movements.</p>
<div class="counter" id="counter">Wheel count: 0</div>
</div>
<p>Add some content to make the page scrollable. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<script>
let wheelCount = 0;
function customWheel(event) {
event.preventDefault(); // Prevent normal scrolling
wheelCount++;
document.getElementById("counter").textContent = "Wheel count: " + wheelCount;
}
</script>
</body>
</html>
Inside the yellow box, normal scrolling is prevented and replaced with a custom counter −
Outside box: Normal page scrolling works Inside box: Wheel count increments, no scrolling
Browser Compatibility
The onwheel event attribute is supported in modern browsers. For older browsers, you may need to handle onmousewheel (Internet Explorer) or DOMMouseScroll (Firefox) events as fallbacks.
| Browser | Support |
|---|---|
| Chrome | Yes (31+) |
| Firefox | Yes (17+) |
| Safari | Yes (7+) |
| Edge | Yes |
| Internet Explorer | Yes (9+) |
Common Use Cases
The onwheel event is commonly used for −
Image zoom − Zooming in and out of images or maps
Custom scrolling − Creating smooth or animated scrolling effects
Value adjustment − Increasing or decreasing numeric values with wheel movement
Navigation − Switching between slides or content sections
Conclusion
The onwheel event attribute provides a way to capture mouse wheel movements on HTML elements. It passes useful information like scroll direction through the event object's deltaY property, making it ideal for creating interactive web experiences that respond to wheel input.
166 Views
