WheelEvent deltaY Property

DOM Events WheelEvent

Definition and Usage

The deltaY property returns a positive value when scrolling down, a negative value when scrolling up, and 0 otherwise.

Note:This property is read-only.

Example

Example 1

Return whether the user is scrolling up or down:

function myFunction(event) {
  var y = event.deltaY;
}

Try it yourself

Example 2

Scroll within DIV to make it larger/smaller:

function myFunction(event) {
  var y = event.deltaY;
  var currentSize = event.target.style.width;
  if (y > 0) {
    newSize = parseInt(currentSize) + 10;
  } else {
    newSize = parseInt(currentSize) - 10;
  }
  event.target.style.width = newSize + "px";
  event.target.style.height = newSize + "px";
}

Try it yourself

Grammar

event.deltaY

Technical Details

Return Value: Double type value indicating the scrolling direction of the mouse wheel.

Browser Support

Property Chrome IE Firefox Safari Opera
deltaY 31 Supported 17 Not Supported 18

Related Pages

HTML DOM Reference Manual:WheelEvent deltaX Property

DOM Events WheelEvent