Desplazamiento de DIV desbordados con JavaScript

Question

Tengo un div que usa overflow:auto para mantener el contenido dentro del div a medida que se cambia de tamaño y se arrastra por la página.Estoy usando algo de ajax para recuperar líneas de texto del servidor y luego las agrego al final del div, para que el contenido crezca hacia abajo.Cada vez que esto sucede, me gustaría usar JS para desplazar el div hacia la parte inferior para que el contenido agregado más recientemente sea visible, de manera similar a como funcionaría una sala de chat o una consola de línea de comandos.

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 en absoluto.

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

Answer 1

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

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

Answer 2

scrollIntoView

El desplácese a la vista El método desplaza el elemento a la vista.

Answer 3

Usar un bucle para iterar sobre 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 4

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

Answer 5

Se puede hacer en JS simple.El truco consiste en establecer scrollTop en un valor igual o mayor que la altura total del elemento (scrollHeight):

const theDiv = document.querySelector('#thediv');
theDiv.scrollTop = Math.pow(10, 10);

De MDN:

Si se establece en un valor mayor que el máximo disponible para el elemento, ScrollTop se asienta al valor máximo.

Mientras que el valor de Math.pow(10, 10) Hizo el truco usando un valor demasiado alto como Infintiy o Number.MAX_VALUE restablecerá scrollTop a 0 (Firefox 66).

Answer 6

Tenía un div que envolvía 3 divs que flotaban a la izquierda y cuyo contenido estaba cambiando de tamaño.Es útil activar los bordes/fondos de colores originales para el contenedor div cuando intentas resolver este problema.El problema era que el contenido div redimensionado se desbordaba fuera del contenedor div (y sangraba debajo del área de contenido debajo del contenedor).

Resuelto usando la respuesta anterior de @ Shog9.Aplicado 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 div-wrapper:

<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 el contenedor debe cambiar de tamaño.Además, no conozco ninguna otra forma de obtener scrollHeight como una función jQuery real;Ninguno de $('#div-content').scrollTop() y $('#div-content').height produciría los valores reales de altura del contenido.¡Espero que esto ayude a alguien!