Window.scrollY

  • Revision slug: DOM/window.scrollY
  • Revision title: window.scrollY
  • Revision id: 105958
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment remove unnecessary styling; one or more formatting changes

Revision Content

 

{{ DomRef() }}

Summary

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

Syntax

var ypix = window.scrollY;

Parameters

  • ypix is the number of pixels.

Example

// make sure and go down to the second page 
if (window.scrollY)
  window.scroll(0,0);
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.pageYOffset instead of window.scrollY, except use (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop when window.pageYOffset (and window.scrollY) is undefined.


Specification

DOM Level 0. Not part of specification.

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

Revision Source

<p> </p>
<p>{{ DomRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>Returns the number of pixels that the document has already been scrolled vertically.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">var ypix = window.scrollY;
</pre>
<h3 name="Parameters">Parameters</h3>
<ul> <li><code>ypix</code> is the number of pixels.</li>
</ul>
<h3 name="Example">Example</h3>
<pre class="eval">// make sure and go down to the second page 
if (window.scrollY)
  window.scroll(0,0);
window.scrollByPages(1);
</pre>
<h3 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>
<div>For cross-browser compatibility, use <code>window.pageYOffset</code> instead of <code>window.scrollY</code>, except use <code>(((t = document.documentElement) || (t = document.body.parentNode)) &amp;&amp; typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop</code> when <code>window.pageYOffset</code> (and <code>window.scrollY</code>) is undefined.</div>
<p><font class="Apple-style-span" color="#2B2720" face="Georgia, 'Times New Roman', Times, serif" size="6"><span class="Apple-style-span" style="font-size: 21px; line-height: 35px;"><font class="Apple-style-span" color="#25221D" face="Verdana, Tahoma, sans-serif" size="4"><span class="Apple-style-span" style="font-size: 14px; line-height: 23px;"><br>
</span></font></span></font></p><h3 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