Überprüfen Sie mit jquery, ob div überlaufende Elemente hat

Ich habe ein div mit einer festen höhe und overflow:hidden;

Ich möchte mit jQuery prüfen, ob das Div Elemente enthält, die über die feste Höhe des Div hinaus überlaufen. Wie kann ich das machen?

Sie benötigen keine jQuery, um zu überprüfen, ob ein Überlauf auftritt oder nicht. Mit element.offsetHeight, element.offsetWidth, element.scrollHeightund element.scrollWidthSie können feststellen , ob Ihr Element Gehalt größer als seine Größe:

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

Siehe Beispiel in Aktion: Geige

Wenn Sie jedoch wissen möchten, welches Element in Ihrem Element sichtbar ist oder nicht, müssen Sie weitere Berechnungen durchführen. In Bezug auf die Sichtbarkeit gibt es drei Zustände für ein untergeordnetes Element:

Wenn Sie halb sichtbare Elemente zählen möchten, ist dies das Skript, das Sie benötigen:

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]);
    }

}

Und wenn Sie nicht halb sichtbar zählen möchten, können Sie mit einem kleinen Unterschied rechnen.

Ich hatte die gleiche Frage wie das OP, und keine dieser Antworten entsprach meinen Bedürfnissen. Ich brauchte eine einfache Bedingung für eine einfache Notwendigkeit.

Hier ist meine Antwort:

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

Außerdem können Sie ändern , scrollWidthindem an scrollHeightwenn Sie den beiden Fällen zu testen.

Also habe ich die überlaufende JQuery-Bibliothek verwendet: https://github.com/kevinmarx/overflowing

Wenn Sie nach der Installation der Bibliothek die Klasse overflowingallen überlaufenden Elementen zuweisen möchten , führen Sie einfach Folgendes aus:

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

Dies gibt dann die Klasse overflowing, wie in <div class="targetElement overflowing">allen Elementen, die überlaufen. Sie können dies dann einem Ereignishandler (Klicken, Mouseover) oder einer anderen Funktion hinzufügen, die den obigen Code ausführt, damit er dynamisch aktualisiert wird.

Teilweise basierend auf Mohsens Antwort (die hinzugefügte erste Bedingung deckt den Fall ab, in dem das Kind vor dem Elternteil versteckt ist):

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);
};

Dann machen Sie einfach:

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

Eine Methode besteht darin, scrollTop gegen sich selbst zu prüfen. Geben Sie dem Inhalt einen Bildlaufwert, der größer als seine Größe ist, und überprüfen Sie dann, ob sein scrollTop 0 ist oder nicht (wenn er nicht 0 ist, hat er einen Überlauf.)

http://jsfiddle.net/ukvBf/

Im Klartext: Holen Sie sich das übergeordnete Element. Überprüfen Sie die Höhe und speichern Sie diesen Wert. Durchlaufen Sie dann alle untergeordneten Elemente und überprüfen Sie ihre individuellen Höhen.

Das ist schmutzig, aber Sie könnten die Grundidee bekommen: http://jsfiddle.net/VgDgz/

Hier ist eine reine jQuery-Lösung, aber sie ist ziemlich chaotisch:

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
}

Dies ist die jQuery-Lösung, die für mich funktioniert hat. offsetWidthusw. hat nicht funktioniert.

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

Wenn dies nicht funktioniert, stellen Sie sicher, dass das übergeordnete Element die gewünschte Breite hat (persönlich musste ich es verwenden parent().parent()). Ist positionrelativ zum übergeordneten extra_widthElement . Ich habe es auch hinzugefügt, da meine Elemente ("Tags") Bilder enthalten, für die nur wenig Zeit erforderlich ist Laden, aber während des Funktionsaufrufs haben sie eine Breite von Null, was die Berechnung beeinträchtigt. Um dies zu umgehen, verwende ich den folgenden Aufrufcode:

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();
    }
});

Hoffe das hilft.

Ich habe dies behoben, indem ich ein weiteres Div in das überlaufende Div eingefügt habe. Dann vergleichen Sie die Höhen der 2 Divs.

<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>

und die js

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

Das sieht einfacher aus ...