JSFiddle - React, Tailwind, and code Playground

HTML

<div id="my_div1" style="width: 100px; height:100px; overflow:auto;" class="my_class"> 
  * content 1
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

<div id="my_div2" style="width: 100px; height:100px; overflow:auto;" class="my_class"> 
  * content 2
    <br /><br /><br /><br /><br />
</div>

CSS

div {
    border: 1px solid red;
    overflow: hidden;
    padding: 10px;
}

JavaScript

$(function(){
    alert('content 1: height: ' + $('#my_div1').hasScrollBarH() + ' innerHeight: ' + $('#my_div1').hasScrollBarIH());
    alert('content 2: height: ' + $('#my_div2').hasScrollBarH() + ' innerHeight: ' + $('#my_div2').hasScrollBarIH());
});

(function($) {
    $.fn.hasScrollBarH = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

(function($) {
    $.fn.hasScrollBarIH = function() {
        return this.get(0).scrollHeight > this.innerHeight();
    }
})(jQuery);