20

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?

Pridkett
  • 4,883
  • 4
  • 30
  • 47

2 Answers2

11

[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.

jitter
  • 53,475
  • 11
  • 111
  • 124
  • Well, they can't be that proprietary. They seem to work in well in Firefox. Although, your comment prompted me to check in Chrome, where it's a no go. Is there a better way to get the dimensions of a div that has overflow with scroll bars? – Pridkett Dec 03 '09 at 03:26
  • Check expanded answers for citations about my statements – jitter Dec 03 '09 at 10:21
  • Okay, this looks like the answer, even if it isn't the answer to the question I was asking. In reality I was asking the wrong question and should be bludgeoned for using non-standard compliant extension. Thanks for the pointers. – Pridkett Dec 06 '09 at 15:01
  • 1
    I used this solution in my code and I had bad experience with performance. It turned out CPU usage was 100% using recursion requestAnimationFrame. Be aware of this. – Stwosch Mar 28 '18 at 14:11
  • Funny how my original answer was completely changed instead of providing a new answer. – jitter Nov 30 '19 at 09:34
  • 1
    Note, 10 years later, scrollHeight and scrollWidth are a part of a W3C spec: https://drafts.csswg.org/cssom-view/#dom-element-scrollheight – c.. Nov 11 '21 at 10:59
5

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...

Community
  • 1
  • 1
Val
  • 17,336
  • 23
  • 95
  • 144
  • 12
    This plugin doesn't actually _listen_ for mutations, but polls the DOM every 100ms: https://github.com/valtido/jQuery-mutate/blob/master/js/mutate.js#L44 Sorry to bring up an old plugin & thread. This way is very expensive. – arminrosu Jul 25 '16 at 11:26
  • @Val yeah, I know. Still appears pretty high in the google search results and has more upvotes than the official answer. Even so, haven't found a better way of doing this. – arminrosu Jul 25 '16 at 17:47
  • @arminrosu, Mind you, when I did this back then I don't think there was anything else to take advantage of (at least to my knowledge then), so this was the only way to do it. this is really not expensive either, it's an if statement away to close the loop, and only is active when a user interacts. even then it's not heavy. it would be interesting to test it though. which I have no time sadly. – Val Jul 26 '16 at 11:40