Is there an event that fires on changes to scrollHeight or scrollWidth in jQuery?

Question

I'm using JQuery to design an application where the user can drag elements inside of a div that automatically adds scrollbars and expands the scrollHeight/scrollWidth as needed. I need to fire off an even when the scrollHeight and scrollWidth of the container div are changed.

No, don't want to use the scroll event because 1) scroll doesn't get fired when you just start dragging an element to the edge and the scrollHeight/scrollWidth change. 2) scroll fires when the scrollHeight/scrollWidth doesn't change.

Any hints?

Answer 1

[DISCLAIMER] Note that some parts of this answer are no longer accurate. scrollHeight and scrollWidth are now part of the CSSOM Spec and have much broader support 1 2

---

I don't think there is support for such a task. And why should there be one?

scrollHeight and scrollWidth are not part of any W3C specification or technical recommendation and AFAIK are MSIE proprietary DHTML object model extensions.

You can check for yourself even the MSDN pages state it that there is not standard for this MSDN scrollWidth property, MSDN: scrollHeight property.

Most browsers seem to support it, but as actually nobody "really" knows how IE implements them, you could get different behavior depending on browser.

Most browsers probably took an educated guess at what IE does and afterwards fix "bugreports" of users. But especially Opera (and now Chrome?) is(are) known to report "incorrect" values for this two properties.

Answer 2

I have answered this question here, which may seem irrelevant however it does support scrollHeight Change too and scrollWidth.

Detecting when a div's height changes using jQuery

Plugin:

http://www.jqui.net/jquery-projects/jquery-mutate-official/

Demo:

$('.selector').mutate('scrollHeight',function (){
    alert('it has changed the scroll height do something about it...');
});

This plugin also should work cross browser as it is using intervals (setTimeout) to check for such changes, it can also be extended should you need it :)

hope it helps...