Window.pageYOffset

 

pageYOffset - свойство окна Window , доступное только для чтения. Это то же свойство, что и scrollY и, как таковое, оно тоже возвращает количество пикселей, на которое прокручен документ по вертикали (вниз или вверх). Значение свойства равное 0.0 говорит о том, что в данный момент верхний край документа Document совпадает с верхним краем области содержимого окна.

Есть незначительная разница в поддержке pageYOffset и scrollY, первый поддерживается лучше в старых браузерах, но если не затрагивать очень старые версии, то использовать можно любое свойство. Они идентичны.

Соответствующее свойство pageXOffset, которое возвращает количество пикселей, на которое документ прокручен по горизонтали, это то же самое, что и scrollX.

Синтаксис

yOffset = window.pageYOffset;

Значение

Количество пикселей, на которое документ Document прокручен вертикально в рамках окна Window, выражено числом с плавающей запятой. Оно рассчитывается с субпиксельной точностью и, таким образом, не обязательно будет целым числом. Значение равное 0.0 означает, что вертикальная прокрутка еще не была совершена, и верхний край документа сейчас соответствует верхнему краю области содержимого окна.

Т.к. данное свойство соответствует Window.scrollY, обратитесь к его описанию за более детальной информацией о значении и использовании.

Пример

В данном примере создается элемент <iframe>, и задается его содержимое, затем определенный элемент этого документа прокручивается в область рамки. Как только это произошло, выясняется положение вертикальной прокрутки с помощью значения pageYOffset  у элемента contentWindow в рамке.

HTML

HTML предельно прост и состоит из двух элементов: <iframe>, содержащий документ, который мы будем прокручивать, и <div>, в который мы выведем значение свойства pageYOffset по окончании прокрутки.

<iframe id="frame">
</iframe>

<div id="info">
</div>

JavaScript

var frame = document.getElementById("frame");
var frameDoc = frame.contentDocument;
var info = document.getElementById("info");

var target = frameDoc.getElementById("overview");
frameDoc.scrollingElement.scrollTop = target.offsetTop;

info.innerText = "Y offset after scrolling: " +
                 frame.contentWindow.pageYOffset + " pixels";

Код JavaScript начинается с записи в переменные frame and info элементов <iframe>, содержащего наш документ, и элемента <div> , в который мы запишем результат проверки положения прокрутки. Затем мы получаем ссылку на элемент из нашего документа, который сразу должен быть прокручен до видимой области рамки, с помощью команды getElementById() у HTMLIFrameElement.contentDocument рамки.

Имея целевой элемент, мы устанавлиеваем scrollTop scrollingElement рамки от свойства offsetTop целевого элемента. Тем самым мы настраиваем положение вертикальной прокрутки документа рамки таким образом, чтобы оно было таким же как и у верхнего края целевого элемента.

При этом автоматически установится максимально возможное значение у позиции прокрутки при попытке прокрутить дальше конца документа. Это предотвратит выход за границы документа. Никто не хочет знать, что там. Там могут быть драконы. 

Результат

Результат ниже. Обратите внимание на то, что содержимое документа уже прокручено до секции, под названием "Overview", а свойствоpageYOffset имеет соответствующее значение.

Спецификация

Спецификация Статус Комментарий
CSS Object Model (CSSOM) View Module
Определение 'window.pageYOffset' в этой спецификации.
Рабочий черновик

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
pageYOffsetChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 9Opera Полная поддержка 3Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка

См. также