Bagaimanakah JavaScript Dapat Mengesan Kandungan Limpahan dalam Elemen HTML, Walaupun Tanpa Bar Skrol yang Kelihatan?

Mengesan Kandungan Limpahan dalam Elemen HTML Menggunakan JavaScript

Dalam pembangunan web, adalah penting untuk memastikan kandungan elemen tidak melimpah melebihi kandungannya sempadan, walaupun bar skrol tidak kelihatan. Isu ini boleh timbul, contohnya, dalam elemen dengan saiz tetap dan sifat "limpahan" ditetapkan kepada "kelihatan."

Untuk menentukan sama ada elemen telah melimpah kandungannya, anda boleh memanfaatkan JavaScript. Pendekatan standard melibatkan membandingkan klien elemen [Tinggi|Lebar] dengan tatalnya[Tinggi|Lebar]. Walau bagaimanapun, apabila sifat limpahan ditetapkan kepada "kelihatan", nilai ini akan menjadi sama.

Untuk menangani masalah ini, rutin pengesanan yang lebih terperinci diperlukan, seperti yang ditunjukkan oleh fungsi JavaScript berikut:

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

Fungsi ini menetapkan sementara gaya "limpahan" elemen kepada "tersembunyi" untuk mengira nilai scrollHeight dan scrollWidth dengan betul. Selepas pengiraan, ia memulihkan gaya limpahan asal. Dengan membandingkan nilai ini dengan clientHeight dan clientWidth elemen, ia boleh menentukan sama ada elemen melimpah sama ada secara menegak atau mendatar.

Pendekatan ini telah diuji dalam pelbagai penyemak imbas, termasuk Firefox 3, Firefox 40.0.2, Internet Explorer 6 dan Chrome 0.2.149.30.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Dapat Mengesan Kandungan Limpahan dalam Elemen HTML, Walaupun Tanpa Bar Skrol yang Kelihatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!