---
title: MouseScrollEvent
slug: Web/API/MouseScrollEvent
translation_of: Web/API/MouseScrollEvent
---
<p>{{APIRef("DOM Events")}}{{ non-standard_header() }}{{deprecated_header}}</p>

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

<p>Use standardardized {{ domxref("WheelEvent") }} instead of this legacy event object if available.</p>

<h2 id="Method_overview">Method overview</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>void <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMMouseScrollEvent#initMouseScrollEvent%28%29">initMouseScrollEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in nsIDOMAbstractView viewArg, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in nsIDOMEventTarget relatedTargetArg, in long axis);</code></td>
  </tr>
 </tbody>
</table>

<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>axis</code></td>
   <td><code>long</code></td>
   <td>Indicates scroll direction. <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>HORIZONTAL_AXIS</code></td>
   <td><code>0x01</code></td>
   <td>The event is caused by horizontal wheel operation.</td>
  </tr>
  <tr>
   <td><code><code>VERTICAL_AXIS</code></code></td>
   <td><code>0x02</code></td>
   <td>The event is caused by vertical wheel operation.</td>
  </tr>
 </tbody>
</table>

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

<h3 id="initMouseScrollEvent()">initMouseScrollEvent()</h3>

<p>See <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMMouseScrollEvent#initMouseScrollEvent%28%29" title="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMMouseScrollEvent#initMouseScrollEvent%28%29">nsIDOMMouseScrollEvent::initMouseScrollEvent()</a>.</p>

<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("1.9.1") }}</td>
   <td>{{ CompatNo() }}</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 Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatGeckoMobile("1.9.1") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul>
 <li><code>DOMMouseScroll</code></li>
 <li><code>MozMousePixelScroll</code></li>
 <li>Non-gecko browsers' legacy mouse wheel event object: {{ domxref("MouseWheelEvent") }}</li>
 <li>Standardized mouse wheel event object: {{ domxref("WheelEvent") }}</li>
</ul>