Open In App

HTML DOM WheelEvent deltaX Property

Improve
Improve
Like Article
Like
Save
Share
Report

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:

 deltaX 

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

Last Updated : 15 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads