Window.scrollX

  • Revision slug: DOM/window.scrollX
  • Revision title: window.scrollX
  • Revision id: 310191
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{ DomRef() }}

Summary

Returns the number of pixels that the document has already been scrolled horizontally.

Syntax

var x = window.scrollX;

Parameters

  • x is the number of pixels that the window is currently scrolled horizontally.

Example

// make sure and go over to the second horizontal page 
if (window.scrollX)
  scroll(0,0);  // resets the scroll position to the top left of the document.
scrollBy(400, 0);

Notes

Use this property to check that the document hasn't already been scrolled some if you are using relative scroll functions such as window.scrollBy, window.scrollByLines, or window.scrollByPages.

The pageXOffset property is an alias for the scrollX property:

window.pageXOffset == window.scrollX; // always true

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

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;

Specification

Revision Source

<div>{{ DomRef() }}</div>
<h2 id="Summary" name="Summary">Summary</h2>

<p>Returns the number of pixels that the document has already been scrolled horizontally.</p>


<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">var x = window.scrollX;</pre>



<h2 id="Parameters" name="Parameters">Parameters</h2>
<ul>
  <li><code>x</code> is the number of pixels that the window is currently scrolled horizontally.</li>
</ul>


<h2 id="Example" name="Example">Example</h2>
<pre class="brush:js">
// make sure and go over to the second horizontal page 
if (window.scrollX)
  scroll(0,0);  // resets the scroll position to the top left of the document.
scrollBy(400, 0);
</pre>



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

<p>Use this property to check that the document hasn't already been scrolled some if you are using relative scroll functions such as <a href="/en-US/docs/DOM/window.scrollBy" title="DOM/window.scrollBy">window.scrollBy</a>, <a href="/en-US/docs/DOM/window.scrollByLines" title="DOM/window.scrollByLines">window.scrollByLines</a>, or <a href="/en-US/docs/DOM/window.scrollByPages" title="DOM/window.scrollByPages">window.scrollByPages</a>.</p>

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

<pre class="brush:js">
window.pageXOffset == window.scrollX; // always true
</pre>

<p>For cross-browser compatibility, use <code>window.pageXOffset</code> instead of <code>window.scrollX</code>. <strong>Additionally</strong>, 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>
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="Specification">Specification</h2>
<ul>
  <li>CSSOM View Module: <a href="http://dev.w3.org/csswg/cssom-view/#widl-Window-scrollX">window.scrollX</a> (Editor's Draft)</li>
</ul>
Revert to this revision