HTML DOM WheelEvent deltaX Property

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>