Controlla con jquery se div ha elementi traboccanti

Ho un div con un'altezza fissa e overflow:hidden;

Voglio verificare con jQuery se il div ha elementi che traboccano oltre l'altezza fissa del div. Come posso fare questo?

In realtà non è necessario alcun jQuery per verificare se si verifica un overflow. Usando element.offsetHeight, element.offsetWidth, element.scrollHeighted element.scrollWidthè possibile determinare se il vostro elemento ha contenuto più grande di quanto le sue dimensioni:

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element have overflow
} else {
    // your element doesn't have overflow
}

Vedi esempio in azione: violino

Ma se vuoi sapere quale elemento all'interno del tuo elemento è visibile o meno, devi fare più calcoli. Esistono tre stati per un elemento figlio in termini di visibilità:

Se vuoi contare elementi semi-visibili sarebbe lo script che ti serve:

var invisibleItems = [];
for(var i=0; i<element.childElementCount; i++){
  if (element.children[i].offsetTop + element.children[i].offsetHeight >
      element.offsetTop + element.offsetHeight ||
      element.children[i].offsetLeft + element.children[i].offsetWidth >
      element.offsetLeft + element.offsetWidth ){

        invisibleItems.push(element.children[i]);
    }

}

E se non vuoi contare semi-visibile puoi calcolare con una piccola differenza.

Avevo la stessa domanda del PO e nessuna di quelle risposte rispondeva alle mie esigenze. Avevo bisogno di una condizione semplice, per un'esigenza semplice.

Ecco la mia risposta:

if ($("#myoverflowingelement").prop('scrollWidth') > $("#myoverflowingelement").width() ) {
  alert("this element is overflowing !!");
}
else {
 alert("this element is not overflowing!!");
}

Inoltre, è possibile modificare scrollWidthda scrollHeightse avete bisogno di testare la entrambi i casi.

Quindi ho usato la libreria jquery traboccante: https://github.com/kevinmarx/overflowing

Dopo aver installato la libreria, se si desidera assegnare la classe overflowinga tutti gli elementi di overflow, è sufficiente eseguire:

$('.targetElement').overflowing('.parentElement')

Questo darà quindi la classe overflowing, come in <div class="targetElement overflowing">tutti gli elementi che traboccano. È quindi possibile aggiungere questo ad alcuni gestori di eventi (clic, passaggio del mouse) o altre funzioni che eseguiranno il codice sopra riportato in modo che si aggiorni in modo dinamico.

Parzialmente basato sulla risposta di Mohsen (la prima condizione aggiunta copre il caso in cui il bambino è nascosto davanti al genitore):

jQuery.fn.isChildOverflowing = function (child) {
  var p = jQuery(this).get(0);
  var el = jQuery(child).get(0);
  return (el.offsetTop < p.offsetTop || el.offsetLeft < p.offsetLeft) ||
    (el.offsetTop + el.offsetHeight > p.offsetTop + p.offsetHeight || el.offsetLeft + el.offsetWidth > p.offsetLeft + p.offsetWidth);
};

Quindi fai semplicemente:

jQuery('#parent').isChildOverflowing('#child');

Un metodo consiste nel verificare scrollTop contro se stesso. Assegna al contenuto un valore di scorrimento maggiore della sua dimensione e quindi controlla se il suo scrollTop è 0 o meno (se non è 0, ha un overflow).

http://jsfiddle.net/ukvBf/

In parole povere: ottieni l'elemento genitore. Controlla la sua altezza e salva quel valore. Quindi scorrere tutti gli elementi figlio e verificarne le singole altezze.

Questo è sporco, ma potresti avere l'idea di base: http://jsfiddle.net/VgDgz/

Ecco una soluzione jQuery pura, ma è piuttosto disordinata:

var div_height = $(this).height();
var vertical_div_top_position = $(this).offset().top;
var lastchild_height = $(this).children('p:last-child').height();
var vertical_lastchild_top_position = $(this).children('p:last-child').offset().top;
var vertical_lastchild_bottom_position = lastchild_height + vertical_lastchild_top_position;
var real_height = vertical_lastchild_bottom_position - vertical_div_top_position;

if (real_height > div_height){
    //overflow div
}

Questa è la soluzione jQuery che ha funzionato per me. offsetWidthecc. non ha funzionato.

function is_overflowing(element, extra_width) {
    return element.position().left + element.width() + extra_width > element.parent().width();
}

Se questo non funziona, assicurati che il genitore degli elementi abbia la larghezza desiderata (personalmente, ho dovuto usarlo parent().parent()). positionÈ relativo al genitore. Ho anche incluso extra_widthperché i miei elementi ("tag") contengono immagini che impiegano poco tempo per caricare, ma durante la chiamata di funzione hanno larghezza zero, rovinando il calcolo. Per aggirare questo, uso il seguente codice chiamante:

var extra_width = 0;
$(".tag:visible").each(function() {
    if (!$(this).find("img:visible").width()) {
        // tag image might not be visible at this point,
        // so we add its future width to the overflow calculation
        // the goal is to hide tags that do not fit one line
        extra_width += 28;
    }
    if (is_overflowing($(this), extra_width)) {
        $(this).hide();
    }
});

Spero che questo ti aiuti.

Ho risolto questo aggiungendo un altro div in quello che trabocca. Quindi si confrontano le altezze dei 2 div.

<div class="AAAA overflow-hidden" style="height: 20px;" >
    <div class="BBBB" >
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

e il js

    if ($('.AAAA').height() < $('.BBBB').height()) {
        console.log('we have overflow')
    } else {
        console.log('NO overflow')
    }

Sembra più facile ...