在沒有滾動條的情況下檢測HTML 元素中的內容溢出
許多開發人員面臨著確定HTML 元素的內容何時超出其可見邊界的挑戰,特別是如果滾動條不存在的話。當元素的溢出屬性設定為「可見」時,此任務變得更加複雜。
解決方案
解決方案在於比較元素的客戶端尺寸([高度|寬度] ])及其滾動尺寸([高度|寬度])。但是,當溢出可見時,這些值將相等。為了解決這個問題,我們可以暫時將溢出樣式修改為“隱藏”,檢查溢出情況,然後恢復原來的溢位值。
實作
下面的程式碼片段提供了一個JavaScript 函數checkOverflow(),它執行此操作檢測:
// 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; }
用法
對目標元素呼叫checkOverflow()函數以確定是否有溢出內容。該函數傳回布林值,指示是否存在溢出。
測試
此程式已在 Firefox 3、Firefox 40.0.2、Internet Explorer 中成功測試6、Chrome 0.2.149.30。
以上是如何在沒有捲軸的情況下偵測 HTML 內容溢位?的詳細內容。更多資訊請關注PHP中文網其他相關文章!