Javascript DOM HTML Element scrollWidth Property

Introduction

The scrollWidth property returns the entire width 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 {// w  ww  .  ja  v  a2 s.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>

The scrollHeight property returns the entire height 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 width (horizontally) of an element, in pixels.




PreviousNext

Related