Will scrollHeight ever be smaller than clientHeight or offsetHeight?

user_16987221 0
Viewed 75

If I write Math.max(el.scrollHeight, el.offsetHeight, el.clientHeight) will this always equal el.scrollHeight?

Generally, clientHeight <= offsetHeight <= scrollHeight. There are rare cases where clientHeight > offsetHeight for the html element, but I'm not sure if scrollHeight can ever be smaller than the other two.

dom javascript
1 Answers

The offsetHeight property includes the borders of elements so can definitely be greater than scrollHeight. E.g.

let test = document.getElementById('test');
console.log("clientHeight = " + test.clientHeight);
console.log("offsetHeight = " + test.offsetHeight);
console.log("scrollHeight = " + test.scrollHeight);
console.log("Max Height = " 
    + Math.max(test.scrollHeight, test.offsetHeight, test.clientHeight));
#test {
  height:20px;
  border:0px solid red;
  border-block-width: 20px;
  background-color:blue;
}
<div id="test"></div>

Alohci_425850
Related