Sprawdź w jquery, czy div ma przepełnione elementy

Mam element div o stałej wysokości i overflow:hidden;

Chcę sprawdzić w jQuery, czy element div zawiera elementy, które przekraczają ustaloną wysokość elementu div. Jak mogę to zrobić?

W rzeczywistości nie potrzebujesz żadnego jQuery, aby sprawdzić, czy występuje przepełnienie, czy nie. Korzystanie z element.offsetHeight, element.offsetWidth, element.scrollHeighti element.scrollWidthmożna sprawdzić, czy dany element nie ma zawartość większy niż jej rozmiar:

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

Zobacz przykład w akcji: Fiddle

Ale jeśli chcesz wiedzieć, który element wewnątrz Twojego elementu jest widoczny, czy nie, musisz wykonać więcej obliczeń. Istnieją trzy stany elementu podrzędnego pod względem widoczności:

Jeśli chcesz liczyć elementy częściowo widoczne, będzie to skrypt, którego potrzebujesz:

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

}

A jeśli nie chcesz liczyć częściowo widocznych, możesz obliczyć z niewielką różnicą.

Miałem to samo pytanie co OP i żadna z tych odpowiedzi nie odpowiadała moim potrzebom. Potrzebowałem prostego warunku na prostą potrzebę.

Oto moja odpowiedź:

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

Możesz również zmienić scrollWidth, scrollHeightjeśli chcesz przetestować jeden z przypadków.

Więc użyłem przepełnionej biblioteki jquery: https://github.com/kevinmarx/overflowing

Po zainstalowaniu biblioteki, jeśli chcesz przypisać klasę overflowingdo wszystkich przepełnionych elementów, po prostu uruchom:

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

To da klasę overflowing, podobnie jak w <div class="targetElement overflowing">przypadku wszystkich elementów, które są przepełnione. Możesz następnie dodać to do jakiejś obsługi zdarzeń (kliknięcie, najechanie myszą) lub innej funkcji, która uruchomi powyższy kod, aby aktualizował się dynamicznie.

Częściowo na podstawie odpowiedzi Mohsena (dodany pierwszy warunek obejmuje przypadek, w którym dziecko jest ukryte przed rodzicem):

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

Następnie po prostu wykonaj:

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

Jedną z metod jest sprawdzenie scrollTop względem siebie. Nadaj zawartości wartość przewijania większą niż jej rozmiar, a następnie sprawdź, czy jej scrollTop ma wartość 0, czy nie (jeśli nie jest równa 0, ma przepełnienie).

http://jsfiddle.net/ukvBf/

Mówiąc prostym językiem: pobierz element nadrzędny. Sprawdź jego wysokość i zapisz tę wartość. Następnie przejrzyj wszystkie elementy potomne i sprawdź ich indywidualne wysokości.

To jest brudne, ale możesz mieć podstawowy pomysł: http://jsfiddle.net/VgDgz/

Oto czyste rozwiązanie jQuery, ale jest raczej niechlujne:

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
}

To jest rozwiązanie jQuery, które zadziałało dla mnie. offsetWidthitp. nie działały.

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

Jeśli to nie zadziała, upewnij się, że element nadrzędny ma żądaną szerokość (osobiście musiałem użyć parent().parent()). positionJest względem rodzica. Uwzględniłem również, extra_widthponieważ moje elementy („tagi”) zawierają obrazy, których load, ale podczas wywołania funkcji mają zerową szerokość, co psuje obliczenia.Aby to obejść, używam następującego kodu wywołującego:

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

Mam nadzieję że to pomoże.

Naprawiłem to, dodając kolejny element div w tym, który się przepełnia. Następnie porównujesz wysokości dwóch elementów 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>

i js

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

To wygląda na łatwiejsze ...