Is there a way to get IE 10+ to fire an event when the overflow of an element changes?

Question

I want to test if a div is overflowing. The following code works for webkit and FF.

    var div = $("#myDivWithOverflow")[0];
    var OnOverflowChanged = function(){
        alert("OnOverflowChanged");
    }

    if (div.addEventListener) {
        // webkit
        div.addEventListener ('overflowchanged', OnOverflowChanged, false);
        // firefox
        div.addEventListener ('overflow', OnOverflowChanged, false);
    }

As far as I can see IE10+ has support for the addEventListener method, but does not react on either of the above events.

Is there a way to achieve this in IE?

Update : I've created a fiddle which illustrates clearer what I want to achieve: http://jsfiddle.net/AyKarsi/sB36r/1/ Unfortunately, the fiddle does not work at all in IE due to some security restrictions

Answer 1

Currently, overflowchanged are only supported on Webkit browsers.

A work around can be to check for mutation events (notably DOMAttrModified ) and check if the overflow changed.

div.addEventListener("DOMAttrModified", function() {
  // check overflow value
}, false);

This won't trigger on screen resize, so it may not do exactly what you're looking for. But it's somewhere you can dig for a solution.

On MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events
On Microsoft site: http://msdn.microsoft.com/en-us/library/ie/dn265032(v=vs.85).aspx