initial commit

1 files changed, 166 insertions, 0 deletions

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
+---
+<div>{{ APIRef("CSSOM View") }} </div>
+
+<p><strong><code>pageYOffset</code></strong> - свойство окна {{domxref("Window")}} , доступное только для чтения. Это то же свойство, что и {{domxref("Window.scrollY", "scrollY")}} и, как таковое, оно тоже возвращает количество пикселей, на которое прокручен документ по вертикали (вниз или вверх). Значение свойства равное 0.0 говорит о том, что в данный момент верхний край документа {{domxref("Document")}} совпадает с верхним краем области содержимого окна.</p>
+
+
+
+<div></div>
+
+<p>Есть незначительная разница в поддержке <code>pageYOffset</code> и <code>scrollY</code>, первый поддерживается лучше в старых браузерах, но если не затрагивать очень старые версии, то использовать можно любое свойство. Они идентичны.</p>
+
+<p>Соответствующее свойство {{domxref("Window.pageXOffset", "pageXOffset")}}, которое возвращает количество пикселей, на которое документ прокручен по горизонтали, это то же самое, что и {{domxref("Window.scrollX", "scrollX")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>yOffset</em> = window.pageYOffset;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Количество пикселей, на которое документ {{domxref("Document")}} прокручен вертикально в рамках окна {{domxref("Window")}}, выражено числом с плавающей запятой. Оно рассчитывается с субпиксельной точностью и, таким образом, не обязательно будет целым числом. Значение равное 0.0 означает, что вертикальная прокрутка еще не была совершена, и верхний край документа сейчас соответствует верхнему краю области содержимого окна.</p>
+
+<p>Т.к. данное свойство соответствует {{domxref("Window.scrollY")}}, обратитесь к его описанию за более детальной информацией о значении и использовании.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<div class="hidden">
+<pre class="brush: js">var contentHTML = `
+    &lt;h2 id="introduction"&gt;Introduction&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing
+elit. Aenean volutpat vitae felis non dictum. Ut auctor
+eros tortor, vel elementum arcu rhoncus nec. Donec non
+laoreet massa. Donec pretium nisi et condimentum convallis.
+Nullam dictum molestie finibus. Nullam vitae lorem non
+augue mattis cursus.&lt;/p&gt;
+  &lt;p&gt;Maecenas nec tortor tincidunt, sollicitudin mi eget,
+fermentum turpis. Vestibulum ac ante et libero efficitur
+faucibus id eget ex. Pellentesque tempor pharetra
+tincidunt. Suspendisse potenti. Nulla vulputate nunc sit
+amet hendrerit faucibus. Nullam metus dui, venenatis
+lacinia nunc nec, vestibulum viverra nunc. Quisque interdum
+quam tortor, sit amet varius neque consectetur at. Quisque
+vel turpis justo.&lt;/p&gt;
+  &lt;h2 id="overview"&gt;Overview&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing
+elit. Etiam dui dolor, pulvinar sed diam id, eleifend
+dapibus odio. Duis vitae ante nibh. Integer bibendum
+imperdiet suscipit. Fusce ligula leo, consectetur ac ante
+eget, gravida laoreet purus. Cras sodales efficitur risus,
+sed feugiat sem. Pellentesque justo augue, placerat non leo
+sit amet, laoreet fringilla arcu.&lt;/p&gt;
+  &lt;p&gt;Class aptent taciti sociosqu ad litora torquent per
+conubia nostra, per inceptos himenaeos. Proin in gravida
+libero. Vivamus placerat, lacus eget condimentum sagittis,
+enim nunc bibendum nisi, quis varius erat felis sit amet
+risus.&lt;/p&gt;
+&lt;p&gt;Sed non finibus ligula. Fusce a magna auctor, molestie
+nibh eget, sodales felis. Donec imperdiet facilisis mi ut
+aliquam. Etiam sodales suscipit urna, eget hendrerit neque
+elementum a. Vivamus fringilla sodales est ut ultricies.
+Nulla convallis congue maximus. Nullam consectetur felis
+vitae ultricies accumsan. Mauris at aliquam felis. Mauris
+efficitur tellus massa, id ullamcorper ipsum fermentum eu.
+Aenean mollis dignissim ultrices. Nunc gravida, sem sit
+amet lobortis iaculis, dolor ligula convallis nibh, id
+condimentum metus libero nec odio. Quisque nec ante
+pretium, viverra neque nec, facilisis risus. Duis
+condimentum sapien non felis cursus blandit. Integer
+euismod lectus a ipsum pellentesque lacinia.&lt;/p&gt;
+`;
+
+document.getElementById("frame").contentDocument
+        .body.innerHTML = contentHTML;
+</pre>
+</div>
+
+<p>В данном примере создается элемент {{HTMLElement("iframe")}}, и задается его содержимое, затем определенный элемент этого документа прокручивается в область рамки. Как только это произошло, выясняется положение вертикальной прокрутки с помощью значения <code>pageYOffset</code>  у элемента {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} в рамке.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML предельно прост и состоит из двух элементов: {{HTMLElement("iframe")}}, содержащий документ, который мы будем прокручивать, и {{HTMLElement("div")}}, в который мы выведем значение свойства <code>pageYOffset</code> по окончании прокрутки.</p>
+
+<pre class="brush: html">&lt;iframe id="frame"&gt;
+&lt;/iframe&gt;
+
+&lt;div id="info"&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: 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";</pre>
+
+<p>Код JavaScript начинается с записи в переменные <code>frame</code> and <code>info</code> элементов <code>&lt;iframe&gt;</code>, содержащего наш документ, и элемента <code>&lt;div&gt;</code> , в который мы запишем результат проверки положения прокрутки. Затем мы получаем ссылку на элемент из нашего документа, который сразу должен быть прокручен до видимой области рамки, с помощью команды {{domxref("Document.getElementById", "getElementById()")}} у {{domxref("HTMLIFrameElement.contentDocument")}} рамки.</p>
+
+<p>Имея целевой элемент, мы устанавлиеваем {{domxref("Element.scrollTop", "scrollTop")}} {{domxref("Document.scrollingElement", "scrollingElement")}} рамки от свойства {{domxref("Element.offsetTop", "offsetTop")}} целевого элемента. Тем самым мы настраиваем положение вертикальной прокрутки документа рамки таким образом, чтобы оно было таким же как и у верхнего края целевого элемента.</p>
+
+<p>При этом автоматически установится максимально возможное значение у позиции прокрутки при попытке прокрутить дальше конца документа. Это предотвратит выход за границы документа. Никто не хочет знать, что там. Там могут быть драконы. </p>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">iframe {
+  width: 620px;
+  height: 450px;
+  border: 1px solid black;
+}
+
+#info {
+  margin-top: 20px;
+  font: 16px "Open Sans", "Helvetica", "Arial";
+}</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Результат ниже. Обратите внимание на то, что содержимое документа уже прокручено до секции, под названием "Overview", а свойство<code>pageYOffset</code> имеет соответствующее значение.</p>
+
+<p>{{EmbedLiveSample("Пример", 650, 500)}}</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-pageyoffset', 'window.pageYOffset') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.pageYOffset")}}</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Window.pageXOffset", "pageXOffset")}}</li>
+ <li>{{domxref("Window.scrollY", "scrollY")}} and {{domxref("Window.scrollX", "scrollX")}}</li>
+ <li>{{domxref("Window.scroll", "scroll()")}}, {{domxref("Window.scrollBy", "scrollBy()")}}, and {{domxref("window.scrollTo", "scrollTo()")}}</li>
+</ul>