Jquery ile div'in taşan öğeleri olup olmadığını kontrol edin

Sabit yüksekliğe sahip bir div'im var ve overflow:hidden;

JQuery ile div öğesinin div'in sabit yüksekliğini aşan öğeleri olup olmadığını kontrol etmek istiyorum. Bunu nasıl yapabilirim?

Aslında bir taşma olup olmadığını kontrol etmek için herhangi bir jQuery'ye ihtiyacınız yoktur. Kullanılması element.offsetHeight, element.offsetWidth, element.scrollHeightve element.scrollWidthsenin eleman 's boyutundan daha içerik büyük varsa belirleyebilirsiniz:

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

Eylemdeki örneğe bakın: Fiddle

Ancak, öğenizin içindeki hangi öğenin görünür olup olmadığını bilmek istiyorsanız, o zaman daha fazla hesaplama yapmanız gerekir. Görünürlük açısından bir alt öğe için üç durum vardır:

Yarı görünür öğeleri saymak istiyorsanız, ihtiyacınız olan komut dosyası olacaktır:

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

}

Yarı görünür saymak istemiyorsanız, küçük bir farkla hesaplayabilirsiniz.

OP ile aynı soruyu sordum ve bu yanıtların hiçbiri ihtiyaçlarıma uymuyordu. Basit bir ihtiyaç için basit bir duruma ihtiyacım vardı.

İşte cevabım:

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

Ayrıca, değiştirebilir scrollWidthtarafından scrollHeightya durumda test etmek gerekirse.

Bu yüzden taşan jquery kitaplığını kullandım: https://github.com/kevinmarx/overflowing

Kitaplığı kurduktan sonra, sınıfı overflowingtüm taşan öğelere atamak isterseniz , şunu çalıştırmanız yeterlidir:

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

Bu daha sonra , taşan tüm öğelerde olduğu overflowinggibi sınıfı verecektir <div class="targetElement overflowing">. Daha sonra bunu bir olay işleyicisine (tıklama, fareyle üzerine gelme) veya yukarıdaki kodu çalıştıracak başka bir işleve ekleyebilirsiniz, böylece dinamik olarak güncellenir.

Kısmen Mohsen'in cevabına dayanmaktadır (eklenen ilk koşul, çocuğun ebeveynden önce gizlendiği durumu kapsar):

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

O zaman yap:

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

Bir yöntem, scrollTop'u kendisine karşı kontrol etmektir. İçeriğe boyutundan daha büyük bir kaydırma değeri verin ve ardından scrollTop değerinin 0 olup olmadığını kontrol edin (0 değilse, taşması vardır.)

http://jsfiddle.net/ukvBf/

Düz İngilizce: Ana öğeyi alın. Yüksekliğini kontrol edin ve bu değeri kaydedin. Ardından tüm alt unsurları gözden geçirin ve bireysel yüksekliklerini kontrol edin.

Bu kirli, ancak temel fikre sahip olabilirsiniz: http://jsfiddle.net/VgDgz/

İşte saf bir jQuery çözümü, ancak oldukça karmaşık:

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
}

Bu benim için çalışan jQuery çözümü. offsetWidthvb işe yaramadı.

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

Bu işe yaramazsa, öğelerin ebeveyninin istenen genişliğe sahip olduğundan emin olun (kişisel olarak, kullanmak zorunda kaldım parent().parent()). positionEbeveyne göre. extra_widthÖğelerim ("etiketler") de kısa zaman alan resimler içerdiği için de dahil ettim yük, ancak işlev çağrısı sırasında sıfır genişliğe sahipler, bu da hesaplamayı bozuyor. Bunu aşmak için aşağıdaki çağrı kodunu kullanıyorum:

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

Bu yardımcı olur umarım.

Bunu, taşan birine başka bir div ekleyerek düzelttim. Sonra 2 div'in yüksekliklerini karşılaştırırsınız.

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

ve js

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

Bu daha kolay görünüyor ...