即使沒有可見的捲軸，JavaScript 如何偵測 HTML 元素中的溢出內容？

使用JavaScript 檢測HTML 元素中的溢出內容

在Web 開發中，確保元素的內容不會溢出超出其範圍至關重要邊界，即使滾動條不可見。例如，在具有固定大小且「溢出」屬性設定為「可見」的元素中，可能會出現此問題。

要確定元素是否溢出其內容，您可以利用 JavaScript。標準方法涉及將元素的 client[Height|Width] 與其滾動[Height|Width] 進行比較。但是，當溢出屬性設定為「可見」時，這些值將是相同的。

要解決此問題，需要更複雜的偵測例程，如以下JavaScript 函數所示：

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

該函數暫時將元素的“overflow”樣式設定為“hidden” ，以正確計算scrollHeight和scrollWidth值。計算完成後，恢復原來的溢位樣式。透過將這些值與元素的 clientHeight 和 clientWidth 進行比較，可以確定元素是否垂直或水平溢出。

此方法已在各種瀏覽器中進行了測試，包括 Firefox 3、Firefox 40.0.2、Internet Explorer 6、Chrome 0.2.149.30。

以上是即使沒有可見的捲軸，JavaScript 如何偵測 HTML 元素中的溢出內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！