index.html

---
title: Window.scrollX
slug: Web/API/Window/scrollX
tags:
- API
- CSSOM View
- NeedsBrowserCompatibility
- NeedsMarkupWork
- NeedsMobileBrowserCompatibility
- Property
- Reference
browser-compat: api.Window.scrollX
---
<div>{{ APIRef("CSSOM View") }}</div>

<p>The read-only <code><strong>scrollX</strong></code> property of the
  {{domxref("Window")}} interface returns the number of pixels that the document is
  currently scrolled horizontally. This value is subpixel precise in modern browsers,
  meaning that it isn't necessarily a whole number. You can get the number of pixels the
  document is scrolled vertically from the {{domxref("Window.scrollY", "scrollY")}}
  property.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: js">var x = window.scrollX;</pre>

<h3 id="Value">Value</h3>

<p>In practice, the returned value is a double-precision floating-point value indicating
  the number of pixels the document is currently scrolled horizontally from the origin,
  where a positive value means the content is scrolled to the left. If the document is
  rendered on a subpixel-precise device, then the returned value is also subpixel-precise
  and may contain a decimal component. If the document isn't scrolled at all left or
  right, then <code>scrollX</code> is 0.</p>

<div class="note">
  <p>If you need an integer value, you can use {{jsxref("Math.round()")}} to round it off.
  </p>
</div>

<p>In more technical terms, <code>scrollX</code> returns the X coordinate of the left edge
  of the current {{Glossary("viewport")}}. If there is no viewport, the returned value is
  0.</p>

<h2 id="Example">Example</h2>

<p>This example checks the current horizontal scroll position of the document. If it's
  greater than 400 pixels, the window is scrolled back to the beginning.</p>

<pre class="brush:js">if (window.scrollX &gt; 400) {
  window.scroll(0,0);
}</pre>

<h2 id="Notes">Notes</h2>

<p>The <code>pageXOffset</code> property is an alias for the <code>scrollX</code> property:</p>

<pre>window.pageXOffset == window.scrollX; // always true</pre>

<p>For cross-browser compatibility, use <code>window.pageXOffset</code> instead of
  <code>window.scrollX</code>. <em>Additionally</em>, older versions of Internet Explorer
  (&lt; 9) do not support either property and must be worked around by checking other
  non-standard properties. A fully compatible example:</p>

<pre
  class="brush:js">var x = (window.pageXOffset !== undefined)
  ? window.pageXOffset
  : (document.documentElement || document.body.parentNode || document.body).scrollLeft;

var y = (window.pageYOffset !== undefined)
  ? window.pageYOffset
  : (document.documentElement || document.body.parentNode || document.body).scrollTop;</pre>

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

<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSSOM View', '#dom-window-scrollx', 'window.scrollX') }}</td>
      <td>{{ Spec2('CSSOM View') }}</td>
      <td></td>
    </tr>
  </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat}}</p>

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

<ul>
  <li>{{domxref("Window.scrollY")}}</li>
</ul>