Window.scrollY

  • Revision slug: DOM/window.scrollY
  • Revision title: window.scrollY
  • Revision id: 105960
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 106 words added, 36 words removed

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

DOM Level 0. Not part of specification.

{{ languages( { "ja": "ja/DOM/window.scrollY" } ) }}

Revision Source

<p> </p>
<p>{{ DomRef() }}</p>
<h3 id="Summary" name="Summary">Summary</h3>
<p>Returns the number of pixels that the document has already been scrolled vertically.</p>
<h3 id="Syntax" name="Syntax">Syntax</h3>
<pre class="eval">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>
<h3 id="Example" name="Example">Example</h3>
<pre class="eval">// 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>
<h3 id="Notes" name="Notes">Notes</h3>
<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/DOM/window.scrollBy" title="en/DOM/window.scrollBy">window.scrollBy</a>, <a href="/en/DOM/window.scrollByLines" title="en/DOM/window.scrollByLines">window.scrollByLines</a>, or <a href="/en/DOM/window.scrollByPages" title="en/DOM/window.scrollByPages">window.scrollByPages</a>.</p>
<div>The <code style="color: inherit; font-weight: inherit; ">pageYOffset</code> property is an alias for the <code style="color: inherit; font-weight: inherit; ">scrollY</code> property:</div>
<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(223, 236, 241); border-right-color: rgb(223, 236, 241); border-bottom-color: rgb(223, 236, 241); border-left-color: rgb(223, 236, 241); overflow-x: auto; overflow-y: auto; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29); ">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>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>
<h3 id="Specification" name="Specification">Specification</h3>
<p>DOM Level 0. Not part of specification.</p>
<p>{{ languages( { "ja": "ja/DOM/window.scrollY" } ) }}</p>
Revert to this revision