initial commit

1 files changed, 178 insertions, 0 deletions

diff --git a/files/ru/web/api/element/scrollheight/index.html b/files/ru/web/api/element/scrollheight/index.html
new file mode 100644
index 0000000000..cc3e014192
--- /dev/null
+++ b/files/ru/web/api/element/scrollheight/index.html
@@ -0,0 +1,178 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+translation_of: Web/API/Element/scrollHeight
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Свойство <strong><code>Element.scrollHeight</code></strong> (только чтение) - измерение высоты контента в элементе, включая содержимое, невидимое из-за прокрутки. Значение <code>scrollHeight</code>  равно минимальному <code>clientHeight</code>, которое потребуется элементу для того, чтобы поместить всё содержимое в видимую область (viewport), не используя вертикальную полосу прокрутки. Оно включает в себя padding элемента, но не его margin.</p>
+
+<div class="note">
+<p>Это свойство округляет значение до целого числа. Если вам нужно дробное значение, используйте {{ domxref("Element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
+
+<pre class="eval notranslate">var <em>intElemScrollHeight</em> = document.getElementById(<em>id_attribute_value</em>).scrollHeight;
+</pre>
+
+<p><em>intElemScrollHeight</em> - переменная, хранящая целое число, соответствующее пиксельному значению scrollHeight элемента. scrollHeight является свойством только для чтения.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p>
+
+<p>Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="">Left</strong> <strong style="">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="Проблемы_и_решения">Проблемы и решения</h2>
+
+<h3 id="Определить_был_ли_элемент_полностью_прокручен.">Определить, был ли элемент полностью прокручен.</h3>
+
+<p>Следующее выражение возвращает <code>true</code>, если элемент был прокручен до конца, <code>false</code> если это не так.</p>
+
+<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+
+<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">Пример работы scrollHeight</h2>
+
+<p>Если объединить это выражение с событием <code><a href="/en-US/docs/DOM/element.onscroll" title="en-US/docs/DOM/element.onscroll">onscroll</a></code>, оно может быть использовано для того, чтобы определить, прочитал ли пользователь текст, или нет (см. также свойства <code><a href="/en-US/docs/DOM/element.scrollTop" title="en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code> и <code><a href="/en-US/docs/DOM/element.clientHeight" title="en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code>). Например:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form name="registration"&gt;
+  &lt;p&gt;
+    &lt;textarea id="rules"&gt;
+Регистрируясь на сайте любителей котиков я соглашаюсь со следующими условиями:
+- покупать kitekat бездомным;
+- делиться последним куском мяса;
+- любить Firefox;
+- вставлять в каждую вразу: "мурр", "мррр" и т.п.;
+- в качестве документов предъявлять хвост и усы;
+- заниматься разработкой;
+- читать хабрахабр;
+- смотреть "Tom and Jerry" и котопса;
+- продать почку для поддержания здоровья кошек города;
+- уметь ловить мышей;
+- быть фанатом Матроскина;
+- обожать молоко;
+- уметь мурлыкать и рррычать;
+- следовать жизненным принципам Леопольда;
+- вставлять на MDN фразы про кошек для разнообразия и поддержания морального духа;
+- загрузить в качестве аватарки фото с Простоквашино;
+- другими словами, всегда любить и уважать кошек и ненавидеть собак.
+Условия могут быть изменены в любое время, незнание не освобождает от ответственности.
+    &lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" name="accept" id="agree" /&gt;
+    &lt;label for="agree"&gt;Я согласен&lt;/label&gt;
+    &lt;input type="submit" id="nextstep" value="Далее" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ? "Спасибо вам." : "Пожалуйста, прокрутите и прочитайте следующий текст.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}</pre>
+
+<p>{{ EmbedLiveSample('scrollHeight_Demo', '640', '400') }}</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Supported" name="Supported">Совместимость с браузерами</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Браузеры</th>
+   <th>Начальная версия</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>8.0</strong></td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.0</strong> (1.9)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Safari | Chrome | WebKit</td>
+   <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>В версиях Firefox до 21-й:</strong> когда контент элемента не создает вертикальную полосу прокрутки, его свойство <code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> равно значению </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;">. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).</span></p>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Измерение размера и положения элемента с помощью CSSOM в Internet Explorer 9</a></li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("HTMLElement.offsetHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Определение размеров элементов</a></li>
+</ul>