Question

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/

Answer 1

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