Bagaimanakah JavaScript Boleh Mengesan Limpahan Kandungan Elemen HTML Apabila `overflow: visible`?

Cara Mengesan Limpahan Kandungan Elemen dalam HTML dengan JavaScript

Anda telah menemui elemen HTML yang mempamerkan kandungan melimpah, walaupun mempunyai sifat limpahannya ditetapkan kepada "kelihatan" dan tiada bar skrol. Adakah terdapat cara untuk menentukan sama ada limpahan ini wujud menggunakan JavaScript?

Mengatasi Isu

Lazimnya, seseorang akan membandingkan clientHeight dan scrollHeight elemen (atau clientWidth dan scrollWidth) untuk mengesan limpahan. Walau bagaimanapun, limpahan mempunyai tetapan "kelihatan" memberikan cabaran.

Penyelesaian: Mengubah Suai Sementara Harta Limpahan

Untuk mengambil kira perkara ini, rutin pengesanan diperlukan. Fungsi berikut mengubah suai sementara gaya "limpahan" kepada "tersembunyi" dan menyemak limpahan:

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

Pelayar yang Disokong

Fungsi ini telah diuji pada Firefox 3 , Firefox 40.0.2, Internet Explorer 6 dan Chrome 0.2.149.30.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Mengesan Limpahan Kandungan Elemen HTML Apabila `overflow: visible`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!