how to check if overflow:hidden html class has cut out from view content using jquery or javascript?

Question

<div class="scrollable" style="overflow: hidden"> </div>

$(function() {
    if($(".scrollable").hasElementsInsideItThatAreCutOffByOverflowHidden == false){
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });
    }   
}


<a onClick="isHidingMyStuff"> check if your stuff is hidden <a>

this doesnt work

Answer 1

We wrap the contents in a div so we can get a height from it and compare to the .scrollable height (which is not scrollable..)

function isHidingMyStuff(){
    var $s = $('.scrollable');
    
    $s.wrapInner('<div />'); // wrap inner contents
    var hidden = $s.height() < $s.children('div').height();
    
    $s.children('div').replaceWith( $s.children('div').html() ); //unwrap
    
    return hidden;
}

demo :

function isHidingMyShit() {
  var $s = $('.scrollable');

  $s.wrapInner('<div />'); // wrap inner contents
  var hidden = $s.height() < $s.children('div').height();

  $s.children('div').replaceWith($s.children('div').html()); //unwrap

  return hidden;
}

.scrollable {
  height: 50px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollable" style="overflow:hidden;">
  test testtest testtest testtest<br /> testtest testtest testtest testtest<br /> testtest testtest testtest testtest<br /> testtest test TOST
</div>


<a href="#" onClick="alert(isHidingMyShit())"> check if your shit is hidden <a>