DOMMouseScroll

  • Revision slug: DOM/DOM_event_reference/DOMMouseScroll
  • Revision title: DOMMouseScroll
  • Revision id: 325595
  • Created:
  • Creator: nikc.org
  • Is current revision? No
  • Comment

Revision Content

{{ Non-standard_header() }}

The DOM DOMMouseScroll event is fired asynchronously when mouse wheel or similar device is operated and the accumulated scroll amount becomes over 1 line or 1 page since last event. It's represented by the {{ domxref("MouseScrollEvent") }} interface.

If you want to prevent the default action of mouse wheel events, it's not enough to handle only this event on Gecko because If scroll amount by a native mouse wheel event is less than 1 line (or less than 1 page when the system setting is by page scroll), other mouse wheel events may be fired without this event.

On Gecko 17 (Firefox 17) or later, you need to call preventDefault() of {{ domeventxref("wheel") }} events which must be fired for every native event.

On Gecko 16 or earlier, you need to call preventDefault() of {{ domeventxref("MozMousePixelScroll") }} event which must be fired for every native event.

Use standardized {{ domeventxref("wheel") }} event if available.

  • Interface :{{ domxref('MouseScrollEvent') }}
  • Synchronicity :asynchronous
  • Bubbles : yes
  • Target : {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}
  • Cancelable : yes
  • Default action : Scroll, moving history, or zooming in/out

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatNo() }} {{ CompatGeckoDesktop("0.9.7") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatGeckoMobile("0.9.7") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

detail value

Positive value indicates scroll to bottom. Negative value indicates scroll to top.

When the event causes scroll up by a page, the detail value is -32768. When the event causes scroll down by a page, the value is 32768. Otherwise,  count of lines to scroll.

Trusted events are never fired with 0.

If native mouse wheel event indicates the scroll amount only in pixels or scroll speed is customized by user prefs, the value is computed with the line height of the nearest ancestor scrollable element from the event target. If its font size is smaller than "mousewheel.min_line_scroll_amount", using the pref value as the line height.

See also

  • {{ domxref("MouseScrollEvent") }}
  • Gecko's legacy pixel scroll event: {{ domeventxref("MozMousePixelScroll") }}
  • Non-Gecko browsers' legacy mouse wheel event: {{ domeventxref("mousewheel") }}
  • Standardized wheel event: {{ domeventxref("wheel") }}

Revision Source

<p>{{ Non-standard_header() }}</p>
<p>The DOM <code>DOMMouseScroll</code> event is fired asynchronously when mouse wheel or similar device is operated and the accumulated scroll amount becomes over 1 line or 1 page since last event. It's represented by the {{ domxref("MouseScrollEvent") }} interface.</p>
<p>If you want to prevent the default action of mouse wheel events, it's not enough to handle only this event on Gecko because If scroll amount by a native mouse wheel event is less than 1 line (or less than 1 page when the system setting is by page scroll), other mouse wheel events may be fired without this event.<br />
  <br />
  On Gecko 17 (Firefox 17) or later, you need to call <code>preventDefault()</code> of {{ domeventxref("wheel") }} events which must be fired for every native event.<br />
  <br />
  On Gecko 16 or earlier, you need to call <code>preventDefault()</code> of {{ domeventxref("MozMousePixelScroll") }} event which must be fired for every native event.</p>
<p>Use standardized {{ domeventxref("wheel") }} event if available.</p>
<ul style="display:table;padding: 0;border-left: 2px solid;margin-left:0.5em;">
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Interface :</dfn>{{ domxref('MouseScrollEvent') }}</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Synchronicity :</dfn>asynchronous</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Bubbles :</dfn> yes</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Target :</dfn> {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Cancelable :</dfn> yes</li>
  <li style="display:table-row;padding: 3px;margin:0;"><dfn style="display:table-cell;padding: 0 5px;border-bottom: none;cursor:inherit;">Default action :</dfn> Scroll, moving history, or zooming in/out</li>
</ul>
<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</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("0.9.7") }}</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 Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("0.9.7") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="detail_value">detail value</h2>
<p>Positive value indicates scroll to bottom. Negative value indicates scroll to top.</p>
<p>When the event causes scroll up by a page, the <code>detail</code> value is -32768. When the event causes scroll down by a page, the value is 32768. Otherwise,&nbsp; count of lines to scroll.</p>
<p>Trusted events are never fired with 0.</p>
<p>If native mouse wheel event indicates the scroll amount only in pixels or scroll speed is customized by user prefs, the value is computed with the line height of the nearest ancestor scrollable element from the event target. If its font size is smaller than <code>"mousewheel.min_line_scroll_amount"</code>, using the pref value as the line height.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ domxref("MouseScrollEvent") }}</li>
  <li>Gecko's legacy pixel scroll event: {{ domeventxref("MozMousePixelScroll") }}</li>
  <li>Non-Gecko browsers' legacy mouse wheel event: {{ domeventxref("mousewheel") }}</li>
  <li>Standardized wheel event: {{ domeventxref("wheel") }}</li>
</ul>
Revert to this revision