La forma más reciente recomendada para detectar cambios en elementos es la utilización de MutationObservers que son la propuesta para substituir a los Mutation Events. Para ser notificado de los cambios en el contenido de un elemento es necesario observar la propiedad childList
.
Por ejemplo si tienes un div
así en html:
<div id="divid">
Contenido del div
</div>
Javascript:
// Seleccionar nodo a observar
var nodoObservado = document.getElementById('divid');
// Lista de propiedades a observar
var cambiosaobservar = {childList: true};
// Funcion que se ejecuta cuando se notifica la mutación
var callback = function(listaDeCambios) {
for (var cambio of listaDeCambios) {
if (cambio.type == 'childList') {
// Comprobar overflow en el elemento
if (nodoObservado.offsetHeight < nodoObservado.scrollHeight || // overflow vertical
nodoObservado.offsetWidth < nodoObservado.scrollWidth) { // overflow horizontal
alert('overflow');
}
}
}
};
// Crear el observador con la función que ha de ejecutar
var observador = new MutationObserver(callback);
// Observar el elemento
observador.observe(nodoObservado, cambiosaobservar);
// Si despues se quiere dejar de observar el elemento
// observador.disconnect();
Ejemplo: https://jsfiddle.net/wallek876/x6yzygvw/
Aunque la utilización de DOMSubtreeModified
o Mutation Events en general ha sido definida como obsoleta por los últimos estándares web, por temas de rendimiento y compatibilidad entre navegadores, dejo la respuesta original como referencia aunque no se recomienda su uso.
Puedes usar el evento DOMSubtreeModified
para añadir un disparador que se ejecute cuando se modifica el contenido del elemento, y comprobar entonces si hay overflow
, tanto horizontal como vertical:
$("#divid").on('DOMSubtreeModified', function() {
if (this.offsetHeight < this.scrollHeight || // overflow vertical
this.offsetWidth < this.scrollWidth) { // overflow horizontal
alert('overflow');
}
});
Ejemplo: https://jsfiddle.net/wallek876/qusab0r9/