2010-12-06 69 views
8

我正在研究一個函數來檢測DIV元素中的文本是否會溢出。在這方面,我有一個可以在Chrome和IE中使用的函數,它將元素的scrollHeight和clientHeight屬性進行比較。FireFox中的scrollHeight屬性

但是在FireFox中,這兩個屬性(以及offsetHeight)總是報告恰好是div元素高度的相同數字。

如果我將'overflow:auto'添加到div樣式中,我會從scrollHeight屬性獲得準確的結果。但是顯示滾動條對於我正在開發的項目來說不是一個可以接受的解決方案。

有什麼建議嗎?

回答

12

這是記錄的行爲:

當一個元素的內容不 產生垂直滾動條,然後 其scrollHeight屬性屬性等於 其clientHeight屬性。

https://developer.mozilla.org/en/DOM/element.scrollHeight


我知道這是不乾淨的,但你可以做這樣的事情?

e.style.overflow = "scroll"; 
var scrollHeight = e.scrollHeight; 
e.style.overflow = "hidden"; 

用戶看不到,因爲當沒有javascript當前正在運行時,頁面纔會重新繪製。

+1

即使jQuery必須執行CSS字段的交換技巧才能正確計算尺寸。請注意,通常應先保存該值,然後進行恢復,而不是假設它已隱藏。 – Orbling 2010-12-06 19:45:21

+0

我以爲我閱讀了這個規範,但是如果我錯過了這個規範,顯然還不夠接近。感謝您爲我指出。順便說一句,在jQuery中有什麼功能呢? – Linus 2010-12-07 15:27:29

3

Kartikaya Gupta解釋了Firefox在a blog post on the scrollWidth/scrollHeight properties中的行爲。

檢測元素是否溢出的建議是使其可滾動並將scrollLeft/scrollTop臨時設置爲1。當至少scrollWidthscrollHeight保持其值時,該元素將溢出。
爲了防止檢查對用戶可見,您可能需要對位於視口負向頂部或左側的克隆元素執行檢查。

0

在實際的Firefox版本中,這不再是問題,因爲即使沒有overflow =「scroll」技巧,scrollHeight屬性也可以工作。但在一些舊版本中,它仍然發生...

非常感謝@thejh,你的提示對我非常有用!