Nach unten scrollen im Div?

Question

Ich erstelle einen Chat mit Ajax-Anfragen und versuche, das Nachrichten-Div zum unteren Rand zu scrollen, ohne viel Glück zu haben.

Ich wickle alles in dieses Div ein:

#scroll {
    height:400px;
    overflow:scroll;
}

Gibt es eine Möglichkeit, es standardmäßig mit JS zum unteren Rand zu scrollen?

Gibt es eine Möglichkeit, es nach einer Ajax-Anfrage zum unteren Rand scrollen zu lassen?

Answer 1

Alternative Lösung

function scrollToBottom(element) {
  element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
}

Answer 2

var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

Funktioniert ab jQuery 1.6

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/

Answer 3

Sanftes Scrollen mit Javascript:

document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });

Answer 4

Wenn Sie sich nicht auf scrollHeight verlassen möchten, hilft der folgende Code:

$('#scroll').scrollTop(1000000);

Answer 5

Methode ohne erforderliches JavaScript (2023)

Hier ist eine Methode, die überhaupt kein JavaScript erfordert und reines (Flexbox) CSS verwendet. Ich habe die Methode etwas genauer hier erklärt.

Der Trick besteht darin, die Elemente in ein 'content'-Element zu setzen, das innerhalb eines column-reverse Flexbox-Elements verpackt ist, das als 'Scroller' fungiert. Da sich die Elemente in einem anderen ('content') Container befinden, werden sie nicht 'umgedreht', sondern immer am unteren Rand ausgerichtet. Dadurch wird der Scroller immer dann zum unteren Rand gescrollt, wenn neue Elemente hinzugefügt werden.

Vorteile dieser Methode

Abgesehen davon, dass diese Methode nicht auf JavaScript angewiesen ist, besteht ein großer Vorteil darin, dass die Bildlaufposition fixiert bleibt, sobald der Benutzer begonnen hat, durch die Liste zu scrollen. Dies verhindert ein lästiges Springen des Inhalts, wenn neue Elemente hinzugefügt werden. Sobald der Benutzer wieder zum unteren Rand scrollt, bleibt die Liste beim Aktualisieren am unteren Rand gescrollt.

Demo

Hinweis: Das JavaScript in der folgenden Demo ist nur für die Demo selbst erforderlich (um Elemente zur Liste hinzuzufügen und zu sehen, was passiert).

let scrollerContent = document.getElementById('scrollerContent');

document.getElementById('addItems').addEventListener('click', function() {
  let newChild = scrollerContent.lastElementChild.cloneNode(true);
  newChild.innerHTML = "Element " + (scrollerContent.children.length + 1);
  scrollerContent.appendChild(newChild);
});

.scroller {
  overflow: auto;
  height: 100px;
  display: flex;
  flex-direction: column-reverse;
}

.scroller .scroller-content .item {
  height: 20px;
  transform: translateZ(0); /* behebt einen Fehler in Safari iOS, wo der Scroller nicht aktualisiert wird */
}

    Element 1
    Element 2
    Element 3
    Element 4
    Element 5
    Element 6
    Element 7
    Element 8
    Element 9
    Element 10

Weitere Elemente hinzufügen