Javascript DOM HTML Element scrollHeight Property get

Introduction

The scrollHeight property returns the entire height of an element in pixels, including padding, but not the border, scrollbar or margin.

The following code gets the entire height and width of an element, including padding.

Click the button to get the entire height and width of the div element with id="content".

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from ww  w.  j av  a2s  .c o m
  margin-top: 10px;
  height: 250px;
  width: 250px;
  overflow: auto;
}

#content {
  height: 800px;
  width: 2000px;
  padding: 10px;
  background-color: coral;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<div id="myDIV">
  <div id="content">Some content..</div>
</div>

<p id="demo"></p>

<script>
function myFunction() {
  var elmnt = document.getElementById("content");
  var y = elmnt.scrollHeight;
  var x = elmnt.scrollWidth;
  document.getElementById ("demo").innerHTML = "Height: " + y + "px<br>Width: " + x + "px";
}
</script>

</body>
</html>

Use the scrollWidth property to return the entire width of an element.

The scrollWidth and scrollHeight properties return the entire height and width of an element, including the height and width that is not viewable.

To add scrollbar to an element, use the CSS overflow property.

This property is read-only.

The scrollHeight property returns a Number representing the entire height (vertically) of an element, in pixels.




PreviousNext

Related