Mozilla's getting a new look. What do you think? http://www.surveygizmo.com/s3/3076876/Mozilla-Brand-Identity-Survey-MDN

Element.scrollHeight

L'attribut en lecture seule element.scrollHeight est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur scrollHeight est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.

Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez element.getBoundingClientRect().

Syntaxe

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

intElemScrollHeight est une variable contenant un entier correspondant à la valeur en pixels de la hauteur défilable de l'élément. scrollHeight est une propriété en lecture seule.

Exemple

padding-top

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

Cat image and text coming from www.best-cat-art.com

padding-bottom

LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom[if IE]><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><![endif]

Image:scrollHeight.png

Problèmes et solutions

Déterminer si un élément a complètement été défilé

L'expression suivante renvoie true si l'élément est à la fin du défilement, false si ça ne l'est pas.

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

Associée à l'événement element.onscroll, l'expression peut être utile pour déterminer si un utilisateur a lu un texte ou non (voir aussi les propriétés element.scrollTop et element.clientHeight. Par exemple :

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example</title>
<script type="text/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 ?
    "Merci." :
    "Veuillez faire défiler la page et lire le texte qui suit.";
}

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

Voir l'exemple en action

Spécification

scrollHeight fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle fait partie de la spécification : CSS Object Model (CSSOM) View Module.

Compatibilité des navigateurs

Navigateur Version
Internet Explorer 8.0
Firefox (Gecko) 3.0 (1.9)
Opera ?
Safari | Chrome | Webkit 4.0 | 4.0 | ?

Dans les versions inférieures à Firefox 21 : quand le contenu d'un élément ne génère pas de barre de défilement verticale, alors sa propriété scrollHeight est égale à sa propriété clientHeight. Cela signifie soit que le contenu est trop court pour avoir besoin d'une barre de défilement, soit que la propriété CSS overflow de l'élément a pour valeur visible.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : fscholz, teoli, khalid32, Goofy, adrienchretien, Julien STUBY, BenoitL
 Dernière mise à jour par : khalid32,