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/element/scrollheight/index.html | 178 +++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 files/ru/web/api/element/scrollheight/index.html (limited to 'files/ru/web/api/element/scrollheight') 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 +--- +

{{ APIRef("DOM") }}

+ +

Свойство Element.scrollHeight (только чтение) - измерение высоты контента в элементе, включая содержимое, невидимое из-за прокрутки. Значение scrollHeight  равно минимальному clientHeight, которое потребуется элементу для того, чтобы поместить всё содержимое в видимую область (viewport), не используя вертикальную полосу прокрутки. Оно включает в себя padding элемента, но не его margin.

+ +
+

Это свойство округляет значение до целого числа. Если вам нужно дробное значение, используйте {{ domxref("Element.getBoundingClientRect()") }}.

+
+ +

Синтаксис

+ +
var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
+
+ +

intElemScrollHeight - переменная, хранящая целое число, соответствующее пиксельному значению scrollHeight элемента. scrollHeight является свойством только для чтения.

+ +

Пример

+ +
+
+

padding-top

+ +

Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.

+ +

Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollHeight.png

+ +

Проблемы и решения

+ +

Определить, был ли элемент полностью прокручен.

+ +

Следующее выражение возвращает true, если элемент был прокручен до конца, false если это не так.

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+ +

Пример работы scrollHeight

+ +

Если объединить это выражение с событием onscroll, оно может быть использовано для того, чтобы определить, прочитал ли пользователь текст, или нет (см. также свойства element.scrollTop и element.clientHeight). Например:

+ +

HTML

+ +
<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>
+ +

CSS

+ +
#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;
+}
+ +

JavaScript

+ +
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);
+}
+ +

{{ EmbedLiveSample('scrollHeight_Demo', '640', '400') }}

+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}{{Spec2("CSSOM View")}}Изначальное определение
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + +
БраузерыНачальная версия
Internet Explorer8.0
Firefox (Gecko)3.0 (1.9)
Opera?
Safari | Chrome | WebKit4.0 | 4.0 | ?
+ +

В версиях Firefox до 21-й: когда контент элемента не создает вертикальную полосу прокрутки, его свойство scrollHeight равно значению clientHeight. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).

+ +

Смотрите также

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