div - javascript change text

Desplazamiento de DIV desbordados con JavaScript

Question

Tengo un div que usa overflow: auto para mantener los contenidos dentro del div a medida que 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 usando este fragmento para hacerlo (también estoy usando jQuery, de ahí la función $ ()):

$("#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.

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

Answer 1

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 2

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.

Entonces realmente quieres (sigue 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 establecerá el desplazamiento de desplazamiento al último valor de contenido del clientHeight .

Answer 3

scrollIntoView

El método scrollIntoView desplaza el elemento a la vista.

Answer 4

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

Answer 5

Tenía un div envolviendo 3 divs que flotaban a la izquierda, y cuyos contenidos estaban siendo redimensionados. 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 resuelve usando la respuesta de @ Shog9 anterior. Como se aplica a mi situación, este era 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>

Este fue mi jQuery para cambiar el tamaño del envoltorio div:

<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>

Para tener en cuenta, $ (''# div-content''). 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í!