Propiedad scrollHeight en FireFox

Question

Estoy trabajando en una función para detectar si el texto dentro de un elemento DIV se desbordará. En este sentido, tengo una función que funciona tanto en Chrome como en IE que compara el scroll del elemento con los atributos de clientHeight.

Sin embargo, en FireFox ambos atributos (así como offsetHeight) siempre informan el mismo número que resulta ser el alto del elemento div.

Obtengo resultados precisos de la propiedad scrollHeight si agrego 'overflow: auto' al estilo div. Pero mostrar la barra de desplazamiento no es una solución aceptable para el proyecto en el que estoy trabajando.

¿Alguna sugerencia?

Answer 1

Eso está documentado el comportamiento:

Cuando el contenido de un elemento no generar una barra de desplazamiento vertical, entonces su propiedad scrollHeight es igual a su propiedad clientHeight.

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

---

Yo sé que no es limpia, pero podría hacer algo como esto?

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

El usuario no puede ver eso porque la página solo se vuelve a dibujar cuando no se está ejecutando javascript.

Answer 2

Kartikaya Gupta explica el comportamiento de Firefox en a blog post on the scrollWidth/scrollHeight properties.

La recomendación de detectar si un elemento se desbordará es hacer que sea desplazable y establecer scrollLeft/scrollTop en 1 temporalmente. Cuando al menos scrollWidth o scrollHeight mantiene su valor, el elemento se desbordará.
Para evitar que la verificación sea visible para el usuario, es posible que desee realizar la comprobación en un elemento clonado que se coloca en la parte superior o izquierda negativa de la ventana gráfica.

Answer 3

En la versión actual de Firefox esto ya no es un problema porque la propiedad scrollHeight funciona incluso sin el overflow = truco "scroll" apuntado aquí. Pero en algunas versiones anteriores todavía sucede así que ...

muchas gracias @thejh, ¡su pista fue muy útil para mí!