Scrollen Übergelaufen DIVs mit JavaScript

Question

Ich habe eine div, die verwendet overflow:auto halten die Inhalt innerhalb des div wie es ist in der Größe verändert und verschoben die Seite.Ich bin mit einigen ajax abrufen Zeilen text vom server, dann fügen Sie an das Ende der div, sodass der Inhalt wächst nach unten.Jedes mal, wenn dies geschieht, ich möchte in JS einen Bildlauf wird das div auf der Unterseite, so das zuletzt hinzugefügte Inhalt ist sichtbar, ähnlich wie in einem chat-Raum oder in der Befehlszeile der Konsole arbeiten würde.

So weit ich habe mit diesem snippet, um es zu tun (ich benutze auch jQuery, daher der $ () - Funktion):

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

Allerdings ist es schon geben von mir inkonsistente Ergebnisse.Manchmal funktioniert es, manchmal nicht, und es ganz aufhört zu funktionieren, wenn der Nutzer überhaupt die Größe des div oder verschiebt die Bildlaufleiste manuell.

Der target browser ist Firefox 3, und es ist eingesetzt in einer kontrollierten Umgebung, so dass Sie nicht brauchen, um im IE funktioniert auf allen.

Irgendwelche Ideen Jungs?Dieser hat mich ratlos.Vielen Dank!

Answer 1

scrollHeight sollte die Gesamthöhe der Inhalte. scrollTop gibt das pixel-offset in, dass Inhalte angezeigt werden, die oben am element client-Bereich.

Also wollen Sie wirklich (immer noch mit 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;
});

...die den Bildlauf-offset der letzten clientHeight Wert der Inhalte.

Answer 2

scrollIntoView

Die scrollIntoView Methode scrollt das element in den Blick.

Answer 3

Die Verwendung einer Schleife zur Iteration über ein jQuery ein element ist ziemlich ineffizient.Wenn Sie eine ID haben, können Sie nur abrufen, die erste und einzige element von jQuery unter Verwendung von get() oder die [] - notation.

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

Es kann getan werden, in plain JS.Der trick ist, zu setzen scrollTop auf einen Wert gleich oder größer als die Gesamthöhe des Elements (scrollHeight):

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

Von MDN:

Wenn der Wert größer als die maximale verfügbar für das element, scrollTop siedelt sich die maximale Wert.

Während der Wert von Math.pow(10, 10) hat den trick mit einer zu hohen Wert wie Infintiy oder Number.MAX_VALUE wird reset zu scrollTop 0 (Firefox 66).

Answer 6

Ich hatte ein div Verpackung 3 divs, die schweben Links, und deren Inhalte wurden geändert.Es hilft, um funky-colored borders/hintergrund für die div-wrapper, wenn Sie versuchen, diese zu lösen.Das problem war, dass die Größe angepasst-div-content-war überfüllt, die außerhalb des div-wrapper (und geblutet, um unter dem Bereich Inhalt unter den wrapper).

Gelöst durch die Verwendung von @Shog9 die Antwort von oben.Wie er auf meine situation war dies die HTML-layout:

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

Dies war meine jQuery, um die Größe des 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>

Zu beachten, $('#div-content').prop('scrollHeight') produziert die Höhe, dass der wrapper muss, um die Größe zu.Auch ich bin nichts von jedem anderen Weg, um die scrollHeight eine eigentliche jQuery-Funktion;Weder der $('#div-content').scrollTop() und $('#div-content').Höhe produzieren würde, den wirklichen Inhalt-Höhe.Hoffe, das hilft jemandem da draußen!