JavaScript/DOM/Element/scrollHeight

Die Eigenschaft Element.scrollHeight ermittelt die tatsächlich angezeigte Höhe eines Elements.

Syntax

const hoehe = element.scrollHeight;

• Die Eigenschaft gibt die aktuell sichtbare Höhe des Elements zurück.

Anwendungsbeispiel

Beispiel ansehen …

  <div id="aussen">
    <div id="innen">
      <p>Box, die kleiner als das Elternelement ist.</p>
    </div>
  </div>

Das Beispiel besteht aus zwei ineinander verschachtelten div-Elementen.

#aussen {
  height: 10em;
  width: 20em;
  margin: 1em;
  overflow: auto;
}

#innen {
  height: 15em;
  width: 25em;
  border: 1px solid #e7c157;
  background-color: #fdfcf3;  
}

Der äußere div-Container hat kleinere Abmessungen als der innere. Durch die Eigenschaft overflow: auto werden Scrollbalken zu Verfügung gestellt.

    function ermittleMaße () {
      var elem = document.getElementById('innen');
      var y = elem.scrollHeight;
      var x = elem.scrollWidth;
      document.getElementById ('ausgabe').innerHTML = 'Höhe: ' + y + 'px<br>Breite: ' + x + 'px';
}

Bei einem Klick auf den Button wird die Funktion ermittleMaße aufgerufen. Mit Element.scrollWidth wird die Breite, mit Element.scrollHeight die akutell sichtbare Höhe des Elements ermittelt.

Beachten Sie: Wenn das Element kleiner ist, als der Inhalt es erfordert, also Bildlaufleisten angezeigt werden, so gibt scrollHeight die Höhe des aktuell sichtbaren Ausschnittes wieder. Die gesamte Höhe können Sie mit offsetHeight ermitteln.

Weblinks

• CSSWG.org: CSSOM View Module
• MDN: Element.scrollHeight
• molily: Zusammenarbeit mit CSS, Darstellung von Dokumenten steuern – Elementbox-Größen auslesen über Microsoft-Eigenschaften (von Matthias Schäfer)