--- 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"><form name="registration"> <p> <textarea id="rules"> Регистрируясь на сайте любителей котиков я соглашаюсь со следующими условиями: - покупать kitekat бездомным; - делиться последним куском мяса; - любить Firefox; - вставлять в каждую фразу: "мурр", "мррр" и т.п.; - в качестве документов предъявлять хвост и усы; - заниматься разработкой; - читать хабрахабр; - смотреть "Tom and Jerry" и котопса; - продать почку для поддержания здоровья кошек города; - уметь ловить мышей; - быть фанатом Матроскина; - обожать молоко; - уметь мурлыкать и рррычать; - следовать жизненным принципам Леопольда; - вставлять на MDN фразы про кошек для разнообразия и поддержания морального духа; - загрузить в качестве аватарки фото с Простоквашино; - другими словами, всегда любить и уважать кошек и ненавидеть собак. Условия могут быть изменены в любое время, незнание не освобождает от ответственности. </textarea> </p> <p> <input type="checkbox" name="accept" id="agree" /> <label for="agree">Я согласен</label> <input type="submit" id="nextstep" value="Далее" /> </p> </form></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>