Scrollbar appear / disappear event in jQuery?
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.
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);
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.