3

No se si no estoy buscando bien o que a nadie ha necesitado algo así nunca.

El caso es que estoy intentando que cuando un div con tamaño fijo y overflow: auto; se llene y necesite scroll, me muestre una alerta para saberlo. Realmente no es una alerta lo que voy a mostrar, si no un div que informa que hay scroll. Pero por no complicar la cosa, con un simple alert me puedo hacer una idea.

No tengo nada de código escrito para que os podáis hacer una idea, porque no he encontrado absolutamente nada relacionado con esto. Con mostrar algo al llegar un punto el scroll si. Pero yo solo necesito que si el div necesita scroll que me lo diga.

Muchas gracias a todos por vuestra ayuda

2 respuestas 2

4

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/

4
  • que currado el script XD... voy a intentar hacerlo funcionar en mi codigo
    – Killpe
    el 30 dic. 2017 a las 10:03
  • hace super lenta la carga del contenido y hacer scroll :(
    – Killpe
    el 30 dic. 2017 a las 10:08
  • la lentitud es culpa de mi div, que lleva una animación y lo vuelve lentisimo... el script va perfecto. Mil gracias
    – Killpe
    el 30 dic. 2017 a las 10:52
  • +1 No conocia DOMSubtreeModified
    – ESCM
    el 30 dic. 2017 a las 19:49
2

Solo debería comparar dos opciones para scroll horizontal y vertical.

Para scroll horizontal compararía scrollWidth (retorna el ancho en pixels del contenido de un elemento) con clientWidth ( Retorna el ancho de un elemento en pixels, incluyendo la anchura de relleno (padding) pero no la anchura de la barra de desplazamiento vertical) , esto se podría validar en el evento DOMSubtreeModified pero no se recomienda emplear ya que se encuentra deprecated , en su lugar podría emplear MutationObserver

Scroll Horizontal ,Ejemplo

var btn = document.getElementById('addText');
var contenido = document.getElementById('contenido');
btn.onclick = function(){
  let cadena = "Esta es Una cadena de Prueba";
  contenido.innerHTML+=cadena ;
};


var observer = new MutationObserver(function(mutations) {
    let div = document.getElementById('contenido');
    if(div.scrollWidth > div.clientWidth){
      alert('Scroll Horizontal');
    }
});
observer.observe(contenido,{ childList: true , attributes : true });
#contenido{
	width: 400px;
	height: 150px;
	white-space: nowrap;
	overflow-x: auto;
	background: red;
}
<div id="contenido"></div>
<button id="addText">Agregar Texto</button>

Scroll Vertical

var btn = document.getElementById('addText');
var contenido = document.getElementById('contenido');
btn.onclick = function(){
  let cadena = "Esta es Una cadena de Prueba que se añadirá al Div Lorem";
  contenido.innerHTML+=cadena ;
};


var observer = new MutationObserver(function(mutations) {
    let div = document.getElementById('contenido');
    //Comparación
    if(div.scrollHeight > div.clientHeight){
      alert('Scroll Vertical');
    }
});
observer.observe(contenido,{ childList: true , attributes : true });
#contenido{
	width: 200px;
	height: 200px;
	overflow: auto;
	background: red;
}
<div id="contenido"></div>
<button id="addText">Agregar Texto</button>

También se podría validar esto antes de añadir o eliminar contenido del elemento, como normalmente se hace a través de eventos muy usados.

var btn = document.getElementById('addText');
btn.onclick = function(){
  if(div.scrollHeight > div.clientHeight){...}
};
1
  • Esta debería ser la respuesta aceptada... Y quien use un MO, asegúrese de leer bien cómo establecer los filtros, ya que puede ser bastante intensivo en el uso de recursos si no se filtra bien.
    – Mariano
    el 4 ene. 2018 a las 23:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.