javascript - outerheight - scrolltop

jQuery.height() que emite el mismo valor que.scrollHeight en div con overflow: auto(IE8)

Question

Después de enrutar alrededor de muchas otras preguntas, no encontré una respuesta que corrige mi problema.

Estoy escribiendo un guión para descubrir si el div se está desbordando. Pero al intentar recuperar la altura visible con jQuery.height() , jQuery.innerHeight() o JavaScripts offsetHeight . Se me ha dado el valor de todo el div (incluida la parte que se desborda), es decir, el mismo valor que scrollHeight.

El estilo que contiene DIVs:

{
    overflow-x: hidden;
    overflow-y: auto;
    width: 73%;
    bottom: 0px;
    float: left;
    height: 100%;
    top: 0px;
}

He creado una maqueta del escenario en jsFiddle: http://jsfiddle.net/Lukedturnbull/L2bxmszv/3/ (Asegúrese de hacer que la pantalla de vista previa sea más pequeña para crear la barra de desplazamiento)

Answer 1

Ahora he encontrado una solución para mi problema, aunque no entiendo completamente por qué lo está haciendo.

Esto no es HTML y código que he escrito y simplemente estaba escribiendo una corrección para ver si aparece la barra de desplazamiento. Pero descubrí que obtener ScrollHeight y Height del padre del contenedor resolvió mi problema. Comparando para ver si el scrollHeight es mayor que la altura, me permitió resolver el problema.

Answer 2

La barra de desplazamiento que está viendo se encuentra realmente en el elemento .structureContent y no en .content . Esta es la razón .content cual .content devuelve todo el mismo valor. .content no está truncado.

Answer 3

Todo parece estar bien, jQuery.height() y jQuery.innerHeight() no tienen nada que ver con la propiedad de desbordamiento. Devolverán alturas, no solo la parte visible.

Si desea conocer la altura del contenido, debe usar scrollHeight . Este scrollHeight es una propiedad regular de javascript que no tiene que usar jQuery

document.getElementById("wrapper").scrollHeight;

O puede usar el selector jQuery

$(''#wrapper'')[0].scrollHeight;

Ver el jsfiddle de trabajo: http://jsfiddle.net/scgz7an5/1/

Darse cuenta de

$(''#wrapper'').scrollHeight;

devuelve indefinido.

ACTUALIZAR

Olvidaste la parte más importante de los elementos flotantes. Te olvidaste de limpiarlos.

Echa un vistazo a este jsfiddle, es una edición tuya pero con elementos flotantes borrados. Ahí puede ver diferentes valores para scrollHeight y jQuery.height() . Observe que .structureContent es el que tiene la barra de desplazamiento, no .content ni .width100 .

.structureContent tiene overflow:auto y la barra de desplazamiento que ve proviene de él.

http://jsfiddle.net/L2bxmszv/5/

Agregué esta clase para borrar tus elementos flotantes.

.clearfix:before,
.clearfix:after, {
  content: ''/0020'';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.clearfix:after {
  clear: both; }
.clearfix {
  zoom: 1; }

El resultado fue esto:

.content
324 for scrollHeight
324 for clientHeight
324 for jQuery.height()
.structureContent
324 for scrollHeight
276 for clientHeight
276 for jQuery.height()

Vea un excelente artículo sobre elementos flotantes y elimínelos aquí: http://css-tricks.com/all-about-floats/