WheelEvent

  • Revision slug: Web/API/WheelEvent
  • Revision title: WheelEvent
  • Revision id: 400851
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Moved From DOM/WheelEvent to Web/API/WheelEvent

Revision Content

{{ IFSummary("dom/interfaces/events/nsIDOMWheelEvent.idl", "nsIDOMWheelEvent", "Scriptable", "17.0", "An event interface for mouse wheel events", "17.0") }}

The DOM WheelEvent represents events that occur due to the user moving a mouse wheel or similar input device.

This is really different event object from {{ domxref("MouseWheelEvent") }}.

Attributes

Attribute Type Description
deltaX double Horizontal scroll amount. Read only.
deltaY double Vertical scroll amount. Read only.
deltaZ double Scroll amount for the z-axis. Read only.
deltaMode unsigned long Unit of delta values. See {{ anch("Delta modes") }} for a list of permitted values. Read only.

deltaX, deltaY and deltaZ was defined as long at first. Next, they were defined as float. Finally, they are defined as double. The type in IE9 is long.

Constants

Delta modes

Constant Value Description
DOM_DELTA_PIXEL 0x00 The delta values are specified in pixels.
DOM_DELTA_LINE 0x01 The delta values are specified in lines.
DOM_DELTA_PAGE 0x02 The delta values are specified in pages.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatNo() }} {{ CompatGeckoDesktop("17.0") }} {{ CompatIE("9.0") }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("17.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • {{ domeventxref("wheel") }}
  • Gecko's legacy mouse wheel event object: {{ domxref("MouseScrollEvent") }}
  • Non-gecko browsers' legacy mosue wheel event object: {{ domxref("MouseWheelEvent") }}

Revision Source

<p>{{ IFSummary("dom/interfaces/events/nsIDOMWheelEvent.idl", "nsIDOMWheelEvent", "Scriptable", "17.0", "An event interface for mouse wheel events", "17.0") }}</p>
<p>The DOM <code>WheelEvent</code> represents events that occur due to the user moving a mouse wheel or similar input device.</p>
<div class="note">
  <p>This is really different event object from {{ domxref("MouseWheelEvent") }}.</p>
</div>
<h2 id="Attributes">Attributes</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td class="header">Attribute</td>
      <td class="header">Type</td>
      <td class="header">Description</td>
    </tr>
    <tr>
      <td><code>deltaX</code></td>
      <td><code>double</code></td>
      <td>Horizontal scroll amount. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code><code>de<code>ltaY</code></code></code></td>
      <td><code>double</code></td>
      <td>Vertical scroll amount. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>deltaZ</code></td>
      <td><code>double</code></td>
      <td>Scroll amount for the z-axis. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>deltaMode</code></td>
      <td><code>unsigned long</code></td>
      <td>Unit of delta values. See {{ anch("Delta modes") }} for a list of permitted values. <strong>Read only.</strong></td>
    </tr>
  </tbody>
</table>
<div class="note">
  <p>deltaX, deltaY and deltaZ was defined as <code>long</code> at first. Next, they were defined as <code>float</code>. Finally, they are defined as <code>double</code>. The type in IE9 is <code>long</code>.</p>
</div>
<h2 id="Constants">Constants</h2>
<h3 id="Delta_modes">Delta modes</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <td class="header">Constant</td>
      <td class="header">Value</td>
      <td class="header">Description</td>
    </tr>
    <tr>
      <td><code>DOM_DELTA_PIXEL</code></td>
      <td><code>0x00</code></td>
      <td>The delta values are specified in pixels.</td>
    </tr>
    <tr>
      <td><code><code>D<code>OM_DELTA_LINE</code></code></code></td>
      <td><code>0x01</code></td>
      <td>The delta values are specified in lines.</td>
    </tr>
    <tr>
      <td><code>DOM_DELTA_PAGE</code></td>
      <td><code>0x02</code></td>
      <td>The delta values are specified in pages.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("17.0") }}</td>
        <td>{{ CompatIE("9.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("17.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 class="note" id="See_also">See also</h2>
<ul>
  <li>{{ domeventxref("wheel") }}</li>
  <li>Gecko's legacy mouse wheel event object: {{ domxref("MouseScrollEvent") }}</li>
  <li>Non-gecko browsers' legacy mosue wheel event object: {{ domxref("MouseWheelEvent") }}</li>
</ul>
Revert to this revision