This question is inaccurately answered here (Detect if the DIV have scroll bar or not [duplicate]) and in other questions on SO.
The answers don't take into account that the content of the div may have a float
that isn't cleared afterwards. The div.clientHeight
and div.scrollHeight
can't be used for detecting scrolling behaviour. Like in the following example:
window.addEventListener("load",function(){
var div = document.querySelector(".container");
document.querySelector(".clientHeight").innerHTML = div.clientHeight;
document.querySelector(".scrollHeight").innerHTML = div.scrollHeight;
});
.container{
width: 50px;
min-height: 20px;
border: 1px solid red;
}
.floated{
float: left;
}
<table><thead><tr><th>clientHeight</th><th>scrollHeight</th></tr></thead><tbody><tr><td class="clientHeight"></td><td class="scrollHeight"></td></tr></tbody></table><div class="container"><div class="floated">Lorem ipsum dolor sit amet blah blah blah blah blah</div></div>