HTML - DOM Element scrollHeight Property

Quiz

The HTML DOM Element scrollHeight is a read-only property is used to retrieve the total vertical height of an element's content in pixels (or px).

This property includes content including what is not viewable (because of overflow) and any padding applied to the element. However, it excludes borders, margins, and scrollbars.

Syntax

Following is the syntax of the HTML DOM Element scrollHeight property −

element.scrollHeight;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

The scrollHeight property returns an integer value that holds the total vertical height in pixels of an element's content.

Example 1: Determining the height of Scrollable Container

The following is the basic example of the HTML DOM Element scrollHeight property. It returns the total height (in pixels) of the content inside a scrollable container −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element scrollHeight</title> 
<style>
   #con{
      height: 200px;
      height: 100px;
      overflow: auto;
      border: 1px solid black;
     
   }
   #content {
      height: 300px;
      height: 150px; 
   }
</style>
</head>
<body>
<h3>HTML DOM Element scrollHeight Property</h3>
<p>Determines the height of content inside a scrollable container:</p>
<div id="con">
<div id="content">This is the content inside the div element.
scroll me!!</div>
</div><br>
<span id="res"></span>
<script>
   const cont=document.getElementById('con');
   const r = document.getElementById('res');
   r.textContent = "Scrollable container height: " + 
   cont.scrollHeight + " pixels";
</script>
</body>
</html>

The above program retrieves the total scrollable height of the container in pixels.

Example 2: Displaying Scrollable Content height Dynamically

Here is another example of using the HTML Element DOM scrollHeight property. We use this property to retrieve the height of the scrollable container (box) in pixels −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element scrollHeight</title>  
<style>
   #cont {
     height: 30px;
     overflow: auto;
     border: 1px solid black;
     padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element scrollHeight Property</h3>
<div>
<p>Click the button to display the total scrollable height of the 
container:</p>
<p>Try editing the content inside the container.</p>
<div id="cont" contenteditable="true">Click here to edit!! Content that 
exceeds the container height.</div>
<br>
<button onclick="showscrollHeight()">Show Scrollable height
</button>
<p>Scrollable content height: <span id="r"></span></p>
</div>
<script>
   function showscrollHeight() {
      const con = document.getElementById('cont');
      const r = document.getElementById('r');
      r.textContent = con.scrollHeight + 'px';
   }
</script>
</body>
</html>

Once the above program is executed, it will display the total scrollable height in pixels dynamically.

Example 3: Dynamically Adjusting Textarea height

The example below shows how to use the scrollHeight property to adjust the textarea field height when you start writing the values into it −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element scrollHeight</title>
<style>
   #textcon {
      height: 300px;
      margin: 20px;
      border: 1px solid #ccc;
      padding: 10px;
      overflow-x: auto;
   }
   text{  
      border: 1px solid black;
      box-sizing: border-box; 
      transition: height 0.3s;
   }
</style>
</head>
<body>
<h3>HTML DOM Element scrollHeight Property</h3>
<h4>Determines the total height of scrollable content.</h4>
<div id="textcon">
<p>Type in the textarea to see it expand or compress height dynamically:</p>
<textarea id="m" oninput="autoAdjustTextarea(this)"></textarea>
<p>Current height:<span id="ch">Auto</span></p>
</div>
<script>
   function autoAdjustTextarea(text) {
      text.style.height = 'auto';  
      text.style.height = text.scrollHeight + 'px';  
      document.getElementById('ch').textContent = text.scrollHeight + 'px';  
   }
</script>
</body>
</html>

The above program automatically adjusts the scrollable height of the textarea field when you start writing.

Property
scrollHeight	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page