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

Mein Szenario: Ich hatte eine Liste von Zeichenfolgen, in die ich eine Zeichenfolge, die von einem Benutzer angegeben wurde, anhängen musste und automatisch ans Ende der Liste scrollen musste. Ich hatte eine feste Höhe der Anzeige der Liste, nach der es überlaufen sollte.

Ich habe @Jeremy Rutens Antwort ausprobiert, sie hat funktioniert, aber sie hat zum (n-1)-ten Element gescrollt. Wenn jemand auf dieses Problem stößt, kann er den setTimeOut() Trick verwenden. Du musst den Code wie unten angepasst:

setTimeout(() => {
    var objDiv = document.getElementById('div_id');
    objDiv.scrollTop = objDiv.scrollHeight
}, 0)

Hier ist der StcakBlitz-Link, den ich erstellt habe, der das Problem und seine Lösung zeigt: https://stackblitz.com/edit/angular-ivy-x9esw8

Answer 2

Wenn Ihr Projekt auf moderne Browser abzielt, können Sie jetzt CSS Scroll Snap verwenden, um das Scrollverhalten zu steuern, z. B. um ein dynamisch generiertes Element am unteren Rand zu halten.

    .wrapper > div {
        background-color: white;
        border-radius: 5px;
        padding: 5px 10px;
        text-align: center;
        font-family: system-ui, sans-serif;
    }

    .wrapper {
        display: flex;
        padding: 5px;
        background-color: #ccc;
        border-radius: 5px;
        flex-direction: column;
        gap: 5px;
        margin: 10px;
        max-height: 150px;

        /* Steuern Sie das Scrollen von hier */
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scroll-snap-type: y mandatory;
    }

    .wrapper > div:last-child {
        scroll-snap-align: start;
    }

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10

Answer 3

Java Skript:

document.getElementById('messages').scrollIntoView(false);

Scrollt zur letzten Zeile des vorhandenen Inhalts.

Answer 4

Sie können die HTML DOM scrollIntoView-Methode wie folgt verwenden:

var element = document.getElementById("scroll");
element.scrollIntoView();

Answer 5

JavaScript oder jQuery:

var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});

CSS:

 .messages
 {
      height: 100%;
      overflow: auto;
  }