From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/window/pageyoffset/index.html | 166 +++++++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 files/ru/web/api/window/pageyoffset/index.html (limited to 'files/ru/web/api/window/pageyoffset') diff --git a/files/ru/web/api/window/pageyoffset/index.html b/files/ru/web/api/window/pageyoffset/index.html new file mode 100644 index 0000000000..edac7ff6d3 --- /dev/null +++ b/files/ru/web/api/window/pageyoffset/index.html @@ -0,0 +1,166 @@ +--- +title: Window.pageYOffset +slug: Web/API/Window/pageYOffset +tags: + - прокрутка + - скролл +translation_of: Web/API/Window/pageYOffset +--- +
{{ APIRef("CSSOM View") }} 
+ +

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

+ + + +
+ +

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

+ +

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

+ +

Синтаксис

+ +
yOffset = window.pageYOffset;
+
+ +

Значение

+ +

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

+ +

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

+ +

Пример

+ + + +

В данном примере создается элемент {{HTMLElement("iframe")}}, и задается его содержимое, затем определенный элемент этого документа прокручивается в область рамки. Как только это произошло, выясняется положение вертикальной прокрутки с помощью значения pageYOffset  у элемента {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} в рамке.

+ +

HTML

+ +

HTML предельно прост и состоит из двух элементов: {{HTMLElement("iframe")}}, содержащий документ, который мы будем прокручивать, и {{HTMLElement("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> , в который мы запишем результат проверки положения прокрутки. Затем мы получаем ссылку на элемент из нашего документа, который сразу должен быть прокручен до видимой области рамки, с помощью команды {{domxref("Document.getElementById", "getElementById()")}} у {{domxref("HTMLIFrameElement.contentDocument")}} рамки.

+ +

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

+ +

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

+ + + +

Результат

+ +

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

+ +

{{EmbedLiveSample("Пример", 650, 500)}}

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('CSSOM View', '#dom-window-pageyoffset', 'window.pageYOffset') }}{{ Spec2('CSSOM View') }}
+ +

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

+ + + +

{{Compat("api.Window.pageYOffset")}}

+ +

См. также

+ + -- cgit v1.2.3-54-g00ecf