Use jQuery to Detect Container Overflow?

Question

I've seen this question but feel like there has to be a "cleaner" jQuery method of doing this. I'm not even sure if this really works in all scenarios. Is there a way for jQuery to determine if a container has overflow without comparing dimensions?

For clarification, is there a method to test whether the CSS attribute overflow: hidden has kicked in and is hiding content?

Possible duplicate of [detect elements overflow using jquery](http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery) — Noyo, Oct 23 '15 at 17:10

score 12 · Accepted Answer · answered Nov 18 '10 at 20:19

$.fn.hasOverflow = function() {
    var $this = $(this);
    var $children = $this.find('*');
    var len = $children.length;

    if (len) {
        var maxWidth = 0;
        var maxHeight = 0
        $children.map(function(){
            maxWidth = Math.max(maxWidth, $(this).outerWidth(true));
            maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
        });

        return maxWidth > $this.width() || maxHeight > $this.height();
    }

    return false;
};

Example:

var $content = $('#content').children().wrapAll('<div>');
while($content.hasOverflow()){
    var size = parseFloat($content.css('font-size'), 10);
    size -= 1;
    $content.css('font-size', size + 'px');
}

This assumes that children are not inlined, in which case we might have to check the sum of all widths/heights. — Sujay, Jul 19 '13 at 09:32

score 5 · Answer 2 · answered Nov 22 '11 at 02:52

5

You may change the css attributes to fit your needs.

$.fn.hasOverflow = function() {
    $(this).css({ overflow: "auto", display: "table" });
    var h1 = $(this).outerHeight();

    $(this).css({ overflow: "hidden", display: "block" });
    var h2 = $(this).outerHeight();

    return (h1 > h2) ? true : false;
};

answered Nov 22 '11 at 02:52

user1058982

89
1
4

9

`return (h1 > h2) ? true : false;` is repetitive… `return h1 > h2;` should be enough ;) – Shikiryu May 03 '12 at 12:53

score 1 · Answer 3 · answered Jan 21 '10 at 20:11

1

There is no clean method. You could make it two wrappers, the outer wrapper having overflow: hidden, and comparing the two wrappers' dimensions, but anything you could possibly do would end up being hacky. If the functionality really is necessary, then you'll have to live with the hacks.

answered Jan 21 '10 at 20:11

Matchu

83,922
18
153
160

sigh... i suppose you're right. thanks for your help. i implemented a fairly painless `width` check. i'll let this run a bit to see if anyone has an actual solution before i accept. – Jason Jan 21 '10 at 20:30
Just came across this, looking to make a menu on a page which never has a scroll bar (i.e. the body is "fixed" to 100% width / height so that I can stick the footer to the bottom without overlapping the content). I would like to detect if the menu overflows and, if so, display a button to move down (rather than an 'orrible scroll bar, so it slides down smoothly using jQuery). Guess I'll just have to live with the hacks too, unless the other answer can do what I need. Anyway the reason I started commenting was simply to say @Jason that I think this has run for a lot **more** than a while!! – ClarkeyBoy Dec 18 '10 at 02:00

score 0 · Answer 4 · answered Jul 16 '13 at 14:51

0

A simple solution I have found is to detect the scrollWidth of the parent():

var totalWidth = $(this).parent()[0].scrollWidth;

...I think the 0 index is referring to the "root node" of the parent, obtaining the property from there.

answered Jul 16 '13 at 14:51

Ian Campbell

2,678
10
56
104

David Heidrich · Answer 5 · 2014-09-04T12:50:33.477

There exists another solution, (this example tests if the height overflows) it requires the overflowing container to be position:relative:

HTML

<div id="overflowing-container" style="position:relative">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>

Javascript

     var last = $('.children:last'), container=$('#overflowing-container')
         lastOffsetHeight = container.scrollTop() + last.outerHeight(true) + last.position().top;

     if (last[0] && lastOffsetHeight > container[0].getBoundingClientRect().height) {
       console.log("thisContainerOverflows")     
     }

Use jQuery to Detect Container Overflow?

5 Answers5

HTML

Javascript

Linked