CODEWITHSUNDEEP
javascriptjquery
Nikolay Dyankov
Nikolay Dyankov

Reputation: 7234

Is it possible to determinate if an element is currently overflowing its container?

I want to check if a horizontal scrollbar is applied to a div like this:

if (box.width() < box.get(0).scrollWidth)

This is always true, even when there isn't any scrollbar, because box.get(0).scrollWidth returns 203px, while .width() returns 200.

Here I have an example, please look at the first box. $('.box0')

Example : http://www.nikolaydyankov.com/Dev/lionbars/

Upvotes: 1

Views: 106

Answers (1)

Manse
Manse

Reputation: 38147

I just this to determine if a div is overflowing - ie scrollable :

$.fn.hasScrollBar = function() {
    var _elm = $(this)[0];
    var _hasScrollBar = false; 
    if ((_elm.clientHeight < _elm.scrollHeight) || (_elm.clientWidth < _elm.scrollWidth)) {
        _hasScrollBar = true;
    }
    return _hasScrollBar;
}

usage : $('#<id>').hasScrollBar(); returns true / false

*from SO originally I think

Upvotes: 2

Related Questions