Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)

like image 719
Travis Avatar asked Apr 05 '10 11:04

Travis


3 Answers

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);
like image 155
notreadbyhumans Avatar answered Sep 20 '22 15:09

notreadbyhumans


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.

like image 42
timmfin Avatar answered Sep 24 '22 15:09

timmfin


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.

like image 25
jAndy Avatar answered Sep 22 '22 15:09

jAndy