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

Wrongly closed, this isn't about detecting display, its about detecting if the height of elements inside the overflow controlled area exceed the parent height, hence triggering scrolls. — dmp, Jan 26 '11 at 20:45
voted for re-opening because the OP is asking for scroll-hidding.. whether or not there is more content hidden due to `overflow:hidden` **not** `display:none` or `visibility:hidden` — Gabriele Petrioli, Jan 26 '11 at 20:48
I don't know any dedicated solution, but maybe you could measure the element width and cache it to a variable. Then disable the height or width property (the one that matters or both)(or set it to auto) and measure it again. Now you can undo your css changes and check measures. If the new was greater, you have hidden content. If the question opens again I'll post as answer — sidyll, Jan 26 '11 at 20:56
Here is my solution http://www.jsfiddle.net/gaby/ApZP2/ Will post as answer if/when the it gets re-opened.. — Gabriele Petrioli, Jan 26 '11 at 21:01

score 15 · Accepted Answer · edited May 09 '21 at 09:14

15

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>

edited May 09 '21 at 09:14

Erfan Bahramali

335
10

answered Jan 26 '11 at 21:04

Gabriele Petrioli

173,972
30
239
291

yup, that's the way to go, +1 – dmp Jan 26 '11 at 21:14
2

Why don't u simply use `.unwrap()`? – meo Jan 26 '11 at 21:29
1

@meo, because `unwrap` removes the parent element. In this case i want to remove the inner wrapper and there is no way to go deeper than that. – Gabriele Petrioli Jan 27 '11 at 09:06
oh ok. But does your replaceWith not replace all div's that are inside .scrollable ? – meo Jan 27 '11 at 10:43
@meo, the `filter` finds the immediate children (*one level down*), and the only one that exists is the one i put there with `wrapInner`. – Gabriele Petrioli Jan 27 '11 at 15:58

score 4 · Answer 2 · answered Oct 20 '11 at 05:36

Using javascript and if div has id then

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


function check_string_is_hidden_due_to_overflow(div_id) {
        var s_h = document.getElementById(div_id).scrollHeight;
        var c_h = document.getElementById(div_id).clientHeight;
        if(s_h != c_h) {
            return true; // Means some content is hidden due to overflow hidden
        } else {
            return false; // Whole content is displayed.
        }

}

check_string_is_hidden_due_to_overflow("scrollable");

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

2 Answers2