Revision 1103003 of WheelEvent

<p>{{APIRef("DOM Events")}}</p>

<p>The <strong><code>WheelEvent</code></strong> interface represents events that occur due to the user moving a mouse wheel or similar input device.</p>

<div class="note">
<p><strong>This is the standard wheel event interface to use.</strong></p>

<p>Old versions of browsers implemented the two non-standard and non-cross-browser-compatible {{ domxref("MouseWheelEvent") }} and {{domxref("MouseScrollEvent")}} interfaces. Use this interface and avoid the latter two.</p>
</div>

<p>{{InheritanceDiagram}}</p>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("WheelEvent.WheelEvent", "WheelEvent()")}}</dt>
 <dd>Creates a <code>WheelEvent</code> object.</dd>
</dl>

<h2 id="Properties">Properties</h2>

<p><em>This interface <em>inherits properties from its parents, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></em></p>

<dl id="raw_prop">
 <dt>{{domxref("WheelEvent.deltaX")}} {{readonlyinline}}</dt>
 <dd>Returns a <code>double</code> representing the horizontal scroll amount.</dd>
 <dt>{{domxref("WheelEvent.deltaY")}} {{readonlyinline}}</dt>
 <dd>Returns a <code>double</code> representing the vertical scroll amount.</dd>
 <dt>{{domxref("WheelEvent.deltaZ")}} {{readonlyinline}}</dt>
 <dd>Returns a <code>double</code> representing the scroll amount for the z-axis.</dd>
 <dt>{{domxref("WheelEvent.deltaMode")}} {{readonlyinline}}</dt>
 <dd>Returns an <code>unsigned long</code> representing the unit of the delta values scroll amount. Permitted values are:
 <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>DOM_DELTA_LINE</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>
 </dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em>This interface doesn't define any methods, but inherits methods from its parents, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events','#interface-WheelEvent','WheelEvent')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>Initial definition.</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>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>31</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{ CompatGeckoDesktop("17.0") }}</td>
   <td>{{ CompatIE("9.0") }}</td>
   <td>18</td>
   <td>7.0</td>
  </tr>
  <tr>
   <td><code>window.WheelEvent</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{ CompatGeckoDesktop("17.0") }}</td>
   <td>{{ CompatIE("9.0") }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}} [1]</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE&nbsp;Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoMobile("17.0") }}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>window.WheelEvent</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoMobile("17.0") }}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Safari doesn't support <code>WheelEvent</code> actually; nevertheless they return object for <code>window.WheelEvent</code>.</p>

<h2 class="note" id="See_also">See also</h2>

<ul>
 <li>{{ event("wheel") }}</li>
 <li>Interfaces replaced by this one:
  <ul>
   <li>Gecko's legacy mouse wheel event object: {{ domxref("MouseScrollEvent") }}</li>
   <li>Non-gecko browsers' legacy mouse wheel event object: {{ domxref("MouseWheelEvent") }}</li>
  </ul>
 </li>
</ul>