Utilizzare jQuery per rilevare l’overflow del contenitore?

Ho visto questa domanda ma sento che ci deve essere un metodo jQuery “più pulito” per farlo. Non sono nemmeno sicuro che funzioni davvero in tutti gli scenari. C’è un modo per jQuery per determinare se un contenitore ha un overflow senza confrontare le dimensioni?

Per chiarimenti, c’è un metodo per testare se l’ overflow: hidden dell’attributo CSS overflow: hidden ha preso a calci e sta nascondendo il contenuto?

 $.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; }; 

Esempio:

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

È ansible modificare gli attributi css in base alle proprie esigenze.

 $.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; }; 

Non esiste un metodo pulito. Potresti renderlo due wrapper, il wrapper esterno che ha overflow: hidden e confrontando le dimensioni dei due wrapper, ma qualsiasi cosa tu possa fare potrebbe finire per essere hacky. Se la funzionalità è davvero necessaria, allora dovrai convivere con gli hack.

Una soluzione semplice che ho trovato è di rilevare lo scrollWidth del parent() :

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


… Penso che l’indice 0 si riferisca al “nodo radice” del genitore, ottenendo la proprietà da lì.

Esiste un’altra soluzione, (questo esempio verifica se l’altezza trabocca) richiede che il contenitore traboccante sia 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") }