Periksa dengan jquery jika div memiliki elemen yang berlebihan

Saya memiliki div dengan ketinggian tetap dan overflow:hidden;

Saya ingin memeriksa dengan jQuery jika div memiliki elemen yang meluap melewati ketinggian tetap div tersebut. Bagaimana saya bisa melakukan ini?

Anda sebenarnya tidak memerlukan jQuery untuk memeriksa apakah ada overflow atau tidak. Menggunakan element.offsetHeight, element.offsetWidth, element.scrollHeightdan element.scrollWidthAnda dapat menentukan apakah elemen Anda memiliki konten yang lebih besar dari ukuran itu:

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

Lihat contoh dalam aksi: Fiddle

Tetapi jika Anda ingin tahu elemen apa di dalam elemen Anda yang terlihat atau tidak, Anda perlu melakukan lebih banyak perhitungan. Ada tiga negara bagian untuk elemen anak dalam hal visibilitas:

Jika Anda ingin menghitung item semi-terlihat itu adalah skrip yang Anda butuhkan:

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

}

Dan jika Anda tidak ingin menghitung semi-terlihat, Anda dapat menghitung dengan sedikit perbedaan.

Saya memiliki pertanyaan yang sama dengan OP, dan tidak ada jawaban yang sesuai dengan kebutuhan saya. Saya membutuhkan kondisi sederhana, untuk kebutuhan sederhana.

Inilah jawaban saya:

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

Juga, Anda dapat mengubah scrollWidthdengan scrollHeightjika Anda perlu untuk menguji kasus baik.

Jadi saya menggunakan perpustakaan jquery meluap: https://github.com/kevinmarx/overflowing

Setelah menginstal perpustakaan, jika Anda ingin menetapkan kelas overflowinguntuk semua elemen meluap, Anda cukup menjalankan:

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

Ini kemudian akan memberikan kelas overflowing, seperti pada <div class="targetElement overflowing">semua elemen yang meluap. Anda kemudian dapat menambahkan ini ke beberapa pengendali acara (klik, tetikus) atau fungsi lain yang akan menjalankan kode di atas sehingga pembaruan secara dinamis.

Sebagian didasarkan pada jawaban Mohsen (kondisi pertama yang ditambahkan mencakup kasus di mana anak disembunyikan di hadapan orang tua):

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

Maka lakukan saja:

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

Salah satu metode adalah memeriksa scrollTop terhadap dirinya sendiri. Berikan konten nilai gulir lebih besar dari ukurannya dan kemudian periksa untuk melihat apakah scrollTopnya adalah 0 atau tidak (jika bukan 0, ia telah meluap.)

http://jsfiddle.net/ukvBf/

Dalam bahasa Inggris biasa: Dapatkan elemen induk. Periksa ketinggiannya, dan simpan nilainya. Kemudian putar semua elemen anak dan periksa ketinggian masing-masing.

Ini kotor, tetapi Anda mungkin mendapatkan ide dasarnya: http://jsfiddle.net/VgDgz/

Ini solusi jQuery murni, tapi agak berantakan:

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
}

Ini adalah solusi jQuery yang bekerja untuk saya. offsetWidthdll tidak bekerja.

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

Jika ini tidak berhasil, pastikan bahwa induk elemen memiliki lebar yang diinginkan (secara pribadi, saya harus menggunakan parent().parent()). positionRelatif terhadap induk. Saya juga menyertakan extra_widthkarena elemen saya ("tag") berisi gambar yang membutuhkan waktu sedikit untuk memuat, tetapi selama panggilan fungsi mereka memiliki lebar nol, merusak perhitungan. Untuk menyiasatinya, saya menggunakan kode panggilan berikut:

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

Semoga ini membantu.

Saya memperbaikinya dengan menambahkan div lain di salah satu yang meluap. Kemudian Anda membandingkan ketinggian 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>

dan js

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

Ini terlihat lebih mudah ...