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 DOM WheelEvent deltaX Property
The HTML DOM WheelEvent deltaX property returns a signed number indicating horizontal scroll direction. It returns a positive value when scrolling right, a negative value when scrolling left, and zero for all other directions.
Syntax
Following is the syntax for accessing the deltaX property −
event.deltaX
Return Value
The deltaX property returns a double-precision floating-point number representing the horizontal scroll amount −
Positive value − User scrolled to the right
Negative value − User scrolled to the left
Zero (0) − No horizontal scrolling occurred
Example − Basic deltaX Detection
Following example demonstrates how to detect horizontal scrolling using the deltaX property −
<!DOCTYPE html>
<html>
<head>
<title>WheelEvent deltaX Detection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div id="scrollArea" style="width: 300px; height: 200px; background-color: #f0f0f0; border: 2px solid #ccc; padding: 20px; text-align: center; line-height: 200px;">
Scroll horizontally over this area
</div>
<p id="output">deltaX value will appear here</p>
<script>
document.getElementById('scrollArea').addEventListener('wheel', function(event) {
var deltaX = event.deltaX;
var direction = deltaX > 0 ? 'Right' : deltaX < 0 ? 'Left' : 'None';
document.getElementById('output').innerHTML =
'deltaX: ' + deltaX + ' (Direction: ' + direction + ')';
});
</script>
</body>
</html>
The output shows the deltaX value and scroll direction when you scroll horizontally over the gray area −
deltaX: -100 (Direction: Left) // When scrolling left deltaX: 0 (Direction: None) // When scrolling vertically deltaX: 100 (Direction: Right) // When scrolling right
Example − Interactive Element Movement
Following example shows how to use deltaX to move an element horizontally based on scroll direction −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM WheelEvent deltaX</title>
<style>
#container {
width: 500px;
height: 200px;
background-color: #f8f9fa;
border: 2px solid #dee2e6;
margin: 20px auto;
position: relative;
overflow: hidden;
}
#movableDiv {
width: 80px;
height: 80px;
background-color: #dc3545;
position: absolute;
top: 60px;
left: 50px;
transition: all 0.3s ease;
border-radius: 10px;
}
#instructions {
text-align: center;
margin: 20px;
font-size: 16px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div id="instructions">Scroll horizontally over the container to move the red square</div>
<div id="container" onwheel="moveElement(event)">
<div id="movableDiv"></div>
</div>
<button onclick="resetPosition()" style="display: block; margin: 20px auto; padding: 10px 20px;">Reset Position</button>
<p id="status" style="text-align: center;">deltaX: 0</p>
<script>
var currentPosition = 50;
var movableDiv = document.getElementById('movableDiv');
function moveElement(event) {
var deltaX = event.deltaX;
if (deltaX > 0) {
// Scrolling right - move element right
currentPosition += 20;
if (currentPosition > 420) currentPosition = 420; // Keep within bounds
} else if (deltaX < 0) {
// Scrolling left - move element left
currentPosition -= 20;
if (currentPosition < 0) currentPosition = 0; // Keep within bounds
}
movableDiv.style.left = currentPosition + 'px';
document.getElementById('status').innerHTML = 'deltaX: ' + deltaX + ' | Position: ' + currentPosition + 'px';
}
function resetPosition() {
currentPosition = 50;
movableDiv.style.left = currentPosition + 'px';
document.getElementById('status').innerHTML = 'deltaX: 0 | Position: ' + currentPosition + 'px';
}
</script>
</body>
</html>
Scrolling right moves the red square to the right, while scrolling left moves it to the left. The deltaX value and current position are displayed below the container.
Browser Compatibility
The deltaX property is supported in all modern browsers that support the WheelEvent interface. It provides consistent behavior across different platforms, though the actual values may vary depending on the device and scroll sensitivity settings.
| Property | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| deltaX | 31+ | 17+ | 6.1+ | 12+ |
Key Points
The
deltaXproperty only detects horizontal scrolling movementsValues can be decimal numbers, not just integers
The magnitude of the value depends on scroll speed and device sensitivity
Always check for zero values to handle non-horizontal scrolling
Use
event.preventDefault()if you want to override default scroll behavior
Conclusion
The deltaX property of WheelEvent provides an effective way to detect horizontal scrolling direction and intensity. It returns positive values for rightward scrolling, negative values for leftward scrolling, and zero for vertical or no horizontal movement, making it ideal for creating interactive horizontal navigation interfaces.
215 Views
