Scrollbar appear / disappear event in jQuery?

Question

Is there a simple way in jQuery to detect when scrollbars appear and disappear on a div that has overflow:auto? (Like an event? Fingers crossed...)

(I'd prefer not to have to look at the height of the content of the div)

Thanks!

Answer 1

As far as i know, there is not event for that. However, you "could" write your own special event for that, I guess you have to check for the height and width.

It should be possible to detect scrollbars if the .innerHeight exceds the .outerHeight value of an element.

Kind Regards,

--Andy

Answer 2

As others have said, there is no easy way. Here's some code I've used in the past to detect if a scrollbar is present.

// Used like $('#my-id').hasScrollbar();

jQuery.fn.hasScrollbar = function() {
    var scrollHeight = this.get(0).scrollHeight;

    //safari's scrollHeight includes padding
    if ($.browser.safari)
        scrollHeight -= parseInt(this.css('padding-top')) + parseInt(this.css('padding-bottom'));

    if (this.height() < scrollHeight)
        return true;
    else
        return false;
}

You'll manually need to call this after adding or removing content from the div and it probably will only work if you call it on visible elements, but it's better than starting from scratch.