W3Context Online Editor v1.1

<!DOCTYPE html>
<html>
<head>
    <title>HTML onwheel Attribute Example</title>
    <meta charset="utf-8" />
    <style>
        .myDIV {
            border: 2px dashed black;
            width: 250px;
            text-align: center;
            padding: 50px;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <h2>HTML onwheel Attribute Example</h2>
    <p>Try Roll your mouse wheel over this box div element to fire event.</p>
    <div class="myDIV" onwheel="myFunction(event)">
        Roll your mouse wheel over this box.
    </div>
    <p id="output">Scroll amount (deltaY): 0</p>
    <script>
        function myFunction(event) {
            // Preventing the default scroll behavior for the page
            event.preventDefault();
            //Vertical Scroll(positive for down, negative for up)
            //Scroll Mode(0:PIXEL, 1:LINE, 2:PAGE)
            var scrollAmountX = event.deltaX;
            var scrollAmountY = event.deltaY;
            var scrollAmountZ = event.deltaZ;
            var scrollMode = "";
            switch (event.deltaMode) {
                case 0:
                    scrollMode = "PIXEL (0)";
                    break;
                case 1:
                    scrollMode = "LINE (1)";
                    break;
                case 2:
                    scrollMode = "PAGE (2)";
                    break;
            }
            var txt = "Scroll amount (deltaX): " + scrollAmountX +
                "<br>Scroll amount (deltaY): " + scrollAmountY +
                "<br>Scroll amount (deltaZ): " + scrollAmountZ +
                "<br>Scroll Mode(deltaMode): " + scrollMode;
            document.getElementById("output").innerHTML = txt;
        }
    </script>
</body>
</html>