mozilla

Revision 297932 of WheelEvent

  • Revision slug: DOM/WheelEvent
  • Revision title: WheelEvent
  • Revision id: 297932
  • Created:
  • Creator: Masayuki
  • Is current revision? No
  • Comment

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 float Horizontal scroll amount. Read only.
deltaY float Vertical scroll amount. Read only.
deltaZ float 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.

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.

Gecko notes

The delta values do not indicate the actual scroll amount by default. If the user was holding a modifier key when moving the scroll wheel, the wheel action may cause another action such as moving forward or backward through browser history or zooming in or out. In addition, even when scrolling, the scrolled element may be different from its event target. The wheel event target is computed only from the mouse cursor position at the time at which the event was fired. That event may not only not be the one actually being scrolled, but may not even be scrollable.

Browser compatibility

{{ CompatibilityTable() }}

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

See also

  • {{ domeventxref("wheel") }}
  • 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>float</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>float</code></td>
      <td>Vertical scroll amount. <strong>Read only.</strong></td>
    </tr>
    <tr>
      <td><code>deltaZ</code></td>
      <td><code>float</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>
<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="Gecko_notes">Gecko notes</h2>
<p>The delta values do not indicate the actual scroll amount by default. If the user was holding a modifier key when moving the scroll wheel, the wheel action may cause another action such as moving forward or backward through browser history or zooming in or out. In addition, even when scrolling, the scrolled element may be different from its event target. The wheel event target is computed only from the mouse cursor position at the time at which the event was fired. That event may not only not be the one actually being scrolled, but may not even be scrollable.</p>
<h2 id="Browser_Compatibility" name="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>{{ CompatNo() }}</td>
        <td>{{ 17.0 (17.0) }}</td>
        <td>{{ 9.0 }}</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>{{ 17.0 (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>Non-gecko browsers' legacy mosue wheel event object: {{ domxref("MouseWheelEvent") }}</li>
</ul>
Revert to this revision