Window.pageYOffset
pageYOffset - свойство окна Window , доступное только для чтения. Это то же свойство, что и scrollY и, как таковое, оно тоже возвращает количество пикселей, на которое прокручен документ по вертикали (вниз или вверх). Значение свойства равное 0.0 говорит о том, что в данный момент верхний край документа Document совпадает с верхним краем области содержимого окна.
Есть незначительная разница в поддержке pageYOffset и scrollY, первый поддерживается лучше в старых браузерах, но если не затрагивать очень старые версии, то использовать можно любое свойство. Они идентичны.
Соответствующее свойство pageXOffset (en-US), которое возвращает количество пикселей, на которое документ прокручен по горизонтали, это то же самое, что и scrollX.
Синтаксис
yOffset = window.pageYOffset;
Значение
Количество пикселей, на которое документ Document прокручен вертикально в рамках окна Window, выражено числом с плавающей запятой. Оно рассчитывается с субпиксельной точностью и, таким образом, не обязательно будет целым числом. Значение равное 0.0 означает, что вертикальная прокрутка ещё не была совершена, и верхний край документа сейчас соответствует верхнему краю области содержимого окна.
Т.к. данное свойство соответствует Window.scrollY, обратитесь к его описанию за более детальной информацией о значении и использовании.
Пример
В данном примере создаётся элемент <iframe> (en-US), и задаётся его содержимое, затем определённый элемент этого документа прокручивается в область рамки. Как только это произошло, выясняется положение вертикальной прокрутки с помощью значения pageYOffset у элемента contentWindow (en-US) в рамке.
HTML
HTML предельно прост и состоит из двух элементов: <iframe> (en-US), содержащий документ, который мы будем прокручивать, и <div>, в который мы выведем значение свойства pageYOffset по окончании прокрутки.
html
<iframe id="frame"> </iframe>
<div id="info"></div>
JavaScript
js
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 (en-US) рамки.
Имея целевой элемент, мы устанавливаем scrollTop scrollingElement (en-US) рамки от свойства offsetTop целевого элемента. Тем самым мы настраиваем положение вертикальной прокрутки документа рамки таким образом, чтобы оно было таким же как и у верхнего края целевого элемента.
При этом автоматически установится максимально возможное значение у позиции прокрутки при попытке прокрутить дальше конца документа. Это предотвратит выход за границы документа. Никто не хочет знать, что там. Там могут быть драконы.
Результат
Результат ниже. Обратите внимание на то, что содержимое документа уже прокручено до секции, под названием "Overview", а свойство pageYOffset имеет соответствующее значение.