Window.scrollX

  • Revision slug: DOM/window.scrollX
  • Revision title: window.scrollX
  • Revision id: 315779
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment +See also, and more.

Revision Content

{{ DomRef() }}

Summary

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

Syntax

var y = window.scrollY;

Parameters

  • y is the number of pixels that the document is currently scrolled from the top.

Example

// make sure and go down to the second page 
if (window.scrollY) {
  window.scroll(0,0);  // reset the scroll position to the top left of the document.
}

window.scrollByPages(1);

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 pageYOffset property is an alias for the scrollY property:

window.pageYOffset == window.scrollY; // 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

See also

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 vertically.</p>



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



<h3 id="Parameters" name="Parameters">Parameters</h3>
<ul>
  <li><code>y</code> is the number of pixels that the document is currently scrolled from the top.</li>
</ul>



<h2 id="Example" name="Example">Example</h2>
<pre class="brush:js">// make sure and go down to the second page 
if (window.scrollY) {
  window.scroll(0,0);  // reset the scroll position to the top left of the document.
}

window.scrollByPages(1);</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>pageYOffset</code> property is an alias for the <code>scrollY</code> property:</p>

<pre>window.pageYOffset == window.scrollY; // 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 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="Specification" name="Specification">Specification</h2>
<ul>
  <li>CSSOM View Module: <a class="external" href="http://dev.w3.org/csswg/cssom-view/#widl-Window-scrollX">window.scrollX</a> (Editor's Draft)</li>
</ul>

<h2 id="See_also" name="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/DOM/window.scrollX" title="window.scrollX | Document Object Model (DOM) | MDN">window.scrollX</a></li>
</ul>
Revert to this revision