CODEWITHSUNDEEP
javascriptjqueryscrollscrollbarjquery-events
Travis
Travis

Reputation: 2021

Scrollbar appear / disappear event in jQuery?

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)

Upvotes: 16

Views: 18001

Answers (3)

jAndy
jAndy

Reputation: 236022

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.

Upvotes: 1

notreadbyhumans
notreadbyhumans

Reputation: 617

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);

Upvotes: 7

timmfin
timmfin

Reputation: 2055

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.

Upvotes: 6

Related Questions