/

HTML / CSS / JavaScript Tutorial

JavaScript DOM WheelEvent property: deltaY

[this page | pdf | back links]

The deltaY property of WheelEvent objects within the JavaScript DOM returns the vertical (y-axis) scroll amount of a mouse wheel.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Try moving wheel to see impact of a wheel event
(note: support for touch events, especially ones other than touchstart is complex and seems to vary by browser):
<p id="element" style="background-color: yellow; border: 2px solid black; width: 200px; height: 80px;"><br><br></p>

<em>TouchEvent outcomes are:</em><br>
deltaMode: <b id="wheel1"></b><br>
deltaX: <b id="wheel2"></b><br>
deltaY: <b id="wheel3"></b><br>
deltaZ: <b id="wheel4"></b><br>

<script>
var x = document.getElementById("element");
x.addEventListener("wheel", mywheel, false);
function mywheel(event) {
  document.getElementById("wheel1").innerHTML = event.deltaMode;
  document.getElementById("wheel2").innerHTML = event.deltaX;
  document.getElementById("wheel3").innerHTML = event.deltaY;
  document.getElementById("wheel4").innerHTML = event.deltaZ;
}
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)


Desktop view | Switch to Mobile