The WheelEvent.deltaX property in HTML is used to return a positive double value when the web page is scrolled horizontally along the left or right direction. If the page is scrolled to the right it returns a positive value, and a negative double value when scrolled to the left, else it returns zero. It is a read-only property.
Syntax:
event.deltaX
Return Value: It returns a double value which indicates the scrolling direction of the mouse wheel.
- A positive double value represents the mouse is scrolled to the right.
- A negative double value represents the mouse is scrolled to the left.
Example: In this example, we will use WheelEvent.deltaX property
HTML
<!DOCTYPE html>
<html>
<head>
<title>
DOM WheelEvent deltaX Property
</title>
</head>
<body onwheel="Geeks(event)" style="text-align: center;
width: 1000px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
DOM WheelEvent deltaX Property
</h2>
<p>Scroll to see effect:</p>
<p id="p"></p>
<script>
function Geeks(event) {
let doc = event.deltaX;
document.getElementById("p").innerHTML = doc;
}
</script>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by deltaX property are listed below:
- Apple Safari 8.0
- Google Chrome 31.0
- Edge 12.0
- Firefox 17.0
- Opera 18.0
- Internet Explorer 9
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
15 Jun, 2023
Like Article
Save Article