Element.scrollHeight
====================

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

**Примечание:** Это свойство округляет значение до целого числа. Если вам нужно дробное значение, используйте `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*

![](/ru/docs/Web/API/Element/scrollHeight/scrollheight.png)

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

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

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

element.scrollHeight - element.scrollTop === element.clientHeight
```

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

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

### HTML


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


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


```js
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);
};
```

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

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollheight |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* MSDN Измерение размера и положения элемента с помощью CSSOM в Internet Explorer 9
* `Element.clientHeight`
* `HTMLElement.offsetHeight`
* Определение размеров элементов (en-US)