Desplazamiento de DIV desbordados con JavaScript

Question

Tengo un div que usa desbordamiento: automático para mantener los contenidos dentro del div mientras se redimensiona y arrastra alrededor de la página. Estoy usando algunos ajax para recuperar líneas de texto del servidor, y luego las agrego al final del div, por lo que el contenido está creciendo hacia abajo. Cada vez que esto sucede, me gustaría usar JS para desplazar el div al fondo, de modo que el contenido agregado más recientemente sea visible, similar a la forma en que funcionaría una sala de chat o una consola de línea de comando.

Hasta ahora he estado utilizando este fragmento de hacerlo (También estoy usando, por lo tanto, la función $() de jQuery):

$("#thediv").scrollTop = $("#thediv").scrollHeight; 

Sin embargo me ha estado dando resultados inconsistentes. A veces funciona, a veces no, y deja de funcionar por completo si el usuario alguna vez cambia el tamaño del div o mueve la barra de desplazamiento manualmente.

El navegador de destino es Firefox 3, y se está implementando en un entorno controlado, por lo que no necesita funcionar en IE en absoluto.

¿Alguna idea, chicos? Este me tiene perplejo. ¡Gracias!

Answer 1

scrollHeight debe ser la altura total del contenido. scrollTop especifica la compensación de píxeles en ese contenido que se mostrará en la parte superior del área del cliente del elemento.

Por lo que realmente quieren (aún usando jQuery):

$("#thediv").each(function() 
{ 
    // certain browsers have a bug such that scrollHeight is too small 
    // when content does not fill the client area of the element 
    var scrollHeight = Math.max(this.scrollHeight, this.clientHeight); 
    this.scrollTop = scrollHeight - this.clientHeight; 
}); 

... que permitirá establecer el desplazamiento a la última clientHeight valor de contenido de desplazamiento.

Answer 2

Usar un ciclo para iterar sobre un jQuery de un elemento es bastante ineficiente. Al seleccionar una ID, puede recuperar el primer y único elemento de jQuery usando get() o la notación [].

var div = $("#thediv")[0]; 

// certain browsers have a bug such that scrollHeight is too small 
// when content does not fill the client area of the element 
var scrollHeight = Math.max(div.scrollHeight, div.clientHeight); 
div.scrollTop = scrollHeight - div.clientHeight; 

Answer 3

scrollIntoView

Los scrollIntoView rollos método, el elemento a la vista.

Answer 4

$("#thediv").scrollTop($("#thediv")[0].scrollHeight); 

Answer 5

que tenían un div envolver 3 divs que fueron flotante a la izquierda, y cuyos contenidos estaban siendo redimensionada. Ayuda a activar bordes/fondos de colores funky para el envoltorio div cuando intentas resolver esto. El problema era que el contenido div redimensionado se estaba desbordando fuera del contenedor div (y sangrado debajo del área de contenido debajo del contenedor).

Se resolvió utilizando la respuesta de @ Shog9 anterior. Tal como se aplica a mi situación, este fue el diseño HTML:

<div id="div-wrapper"> 
    <div class="left-div"></div> 
    <div id="div-content" class="middle-div"> 
    Some short/sweet content that will be elongated by Jquery. 
    </div> 
    <div class="right-div"></div> 
</div> 

Ésta era la de mi jQuery para cambiar el tamaño de la div-envoltorio:

<script> 
$("#div-content").text("a very long string of text that will overflow beyond the width/height of the div-content"); 
//now I need to resize the div... 
var contentHeight = $('#div-content').prop('scrollHeight') 
$("#div-wrapper").height(contentHeight); 
</script> 

Tomar nota, $ ('# div de contenido') .prop ('scrollHeight') produce la altura a la que la envoltura necesita cambiar el tamaño. Además, no conozco ninguna otra forma de obtener scrollHeight una función jQuery real; Ni $ ('# div-content'), scrollTop() y $ ('# div-content'). Height generarían los valores reales de altura de contenido. Espero que esto ayude a alguien por ahí!