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)

Answer 1

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.

Answer 2

Another way to achieve this is to check whether there are scrollbars present using scrollLeft or scrollTop:

//nudge the scrollbar away from its starting position

$('#your_selector').scrollLeft(1);

//A value of 0 is assigned if the scrollbars are at their default position, 
//or are abscent

if($('#your_selector').scrollLeft() !== 0) return true;

//put the scrollbar back to its starting position

$('#your_selector').scrollLeft(0);

Answer 3

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.