Bagaimanakah Saya Boleh Mengesan Limpahan Kandungan HTML Tanpa Bar Skrol?

Mengesan Limpahan Kandungan dalam Elemen HTML Tanpa Bar Tatal

Ramai pembangun menghadapi cabaran untuk menentukan bila kandungan elemen HTML melangkaui sempadan yang boleh dilihat, terutamanya jika bar skrol tiada. Tugas ini menjadi lebih kompleks apabila sifat limpahan elemen ditetapkan kepada "kelihatan."

Penyelesaian

Penyelesaian terletak pada membandingkan dimensi klien elemen ([Ketinggian|Lebar ]) dengan dimensi tatalnya ([Ketinggian|Lebar]). Walau bagaimanapun, apabila limpahan kelihatan, nilai ini akan menjadi sama. Untuk mengambil kira perkara ini, kami boleh mengubah suai sementara gaya limpahan kepada "tersembunyi", semak keadaan limpahan, dan kemudian memulihkan nilai limpahan asal.

Pelaksanaan

The coretan kod di bawah menyediakan fungsi JavaScript, checkOverflow(), yang melaksanakannya pengesanan:

// Determine if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

Penggunaan

Panggil fungsi checkOverflow() pada elemen sasaran untuk menentukan sama ada ia mempunyai kandungan yang melimpah. Fungsi ini mengembalikan nilai Boolean yang menunjukkan sama ada limpahan wujud atau tidak.

Pengujian

Rutin ini telah berjaya diuji dalam Firefox 3, Firefox 40.0.2, Internet Explorer 6 dan Chrome 0.2.149.30.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Limpahan Kandungan HTML Tanpa Bar Skrol?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!