HTML | DOM WheelEvent deltaY Property

The WheelEvent.deltaY property in HTML is used to return a positive double value when the web page is scrolled down, and a negative double value when the page is scrolled up, or else it returns zero. It is a read-only property.

Syntax:

event.deltaY

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 down.
A negative double value represents mouse is scrolled up.

Example: In this example, we will use WheelEvent.deltaY property

HTML

<!DOCTYPE html>

<html>

<head>

    <title>DOM WheelEvent deltaY Property</title>

</head>

<body onwheel="Geeks(event)" style="text-align:center; height: 5000px;">

    <h1 style="color: green;">

        GeeksforGeeks

    </h1>

    <h2>

        DOM WheelEvent deltaY Property

    </h2>

    <p>Scroll to see effect:</p>

    <p id="p"></p>

    <script>

        function Geeks(event) {

            let doc = event.deltaY;

            document.getElementById("p").innerHTML = doc;

        }

    </script>

</body>

</html>