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

Hier ist, was ich auf meiner Seite benutze:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

Answer 2

Dies ist viel einfacher, wenn Sie jQuery scrollTop verwenden:

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

Answer 3

Probieren Sie den folgenden Code aus:

const scrollToBottom = (id) => {
    const element = document.getElementById(id);
    element.scrollTop = element.scrollHeight;
}

Sie können auch Jquery verwenden, um das Scrollen sanft zu gestalten:

const scrollSmoothlyToBottom = (id) => {
    const element = $(`#${id}`);
    element.animate({
        scrollTop: element.prop("scrollHeight")
    }, 500);
}

Hier ist die Demo

So funktioniert es:

Ref: scrollTop, scrollHeight, clientHeight

Answer 4

Mit jQuery animate verwenden:

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

Answer 5

Neuere Methode, die in allen aktuellen Browsern funktioniert:

this.scrollIntoView(false);