Use jQuery para detectar el desbordamiento del contenedor?

He visto esta pregunta, pero siento que tiene que haber un método jQuery “más limpio” para hacer esto. Ni siquiera estoy seguro de si esto realmente funciona en todos los escenarios. ¿Hay alguna manera para que jQuery determine si un contenedor tiene desbordamiento sin comparar dimensiones?

Para aclarar, ¿existe un método para probar si el overflow: hidden atributos CSS overflow: hidden ha activado y está ocultando contenido?

 $.fn.hasOverflow = function() { var $this = $(this); var $children = $this.find('*'); var len = $children.length; if (len) { var maxWidth = 0; var maxHeight = 0 $children.map(function(){ maxWidth = Math.max(maxWidth, $(this).outerWidth(true)); maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); }); return maxWidth > $this.width() || maxHeight > $this.height(); } return false; }; 

Ejemplo:

 var $content = $('#content').children().wrapAll('
'); while($content.hasOverflow()){ var size = parseFloat($content.css('font-size'), 10); size -= 1; $content.css('font-size', size + 'px'); }

Puede cambiar los atributos CSS para que se ajusten a sus necesidades.

 $.fn.hasOverflow = function() { $(this).css({ overflow: "auto", display: "table" }); var h1 = $(this).outerHeight(); $(this).css({ overflow: "hidden", display: "block" }); var h2 = $(this).outerHeight(); return (h1 > h2) ? true : false; }; 

No hay un método limpio Podrías hacer dos envoltorios, el envoltorio externo teniendo overflow: hidden , y comparando las dimensiones de los dos envoltorios, pero cualquier cosa que pudieras hacer terminaría siendo un hacky. Si la funcionalidad realmente es necesaria, entonces tendrás que vivir con los hacks.

Una solución simple que he encontrado es detectar el scrollWidth de parent() :

 var totalWidth = $(this).parent()[0].scrollWidth; 


… Creo que el índice 0 se refiere al “nodo raíz” del padre, obteniendo la propiedad desde allí.

Existe otra solución (este ejemplo prueba si la altura se desborda) requiere que el contenedor desbordado esté en position:relative :

HTML

 

Javascript

  var last = $('.children:last'), container=$('#overflowing-container') lastOffsetHeight = container.scrollTop() + last.outerHeight(true) + last.position().top; if (last[0] && lastOffsetHeight > container[0].getBoundingClientRect().height) { console.log("thisContainerOverflows") }