Wie setze ich die Textbereich-Bildlaufleiste standardmäßig auf den unteren Rand?

90

Ich habe einen Textbereich, der dynamisch neu geladen wird, während Benutzereingaben gesendet werden. Er aktualisiert sich alle paar Sekunden. Wenn die Textmenge in diesem Textbereich die Größe des Textbereichs überschreitet, wird eine Bildlaufleiste angezeigt. Die Bildlaufleiste ist jedoch nicht wirklich verwendbar, da der Textbereich einige Sekunden später aktualisiert wird, wenn Sie mit dem Bildlauf nach unten beginnen, und die Bildlaufleiste wieder ganz nach oben bringt. Ich möchte die Bildlaufleiste so einstellen, dass standardmäßig der unterste Text angezeigt wird. Hat jemand eine Idee, wie das geht?

javascript css scroll textarea moesef
quelle
Mögliches Duplikat von Wie man einen Textbereich hat, um bei der Aktualisierung nach unten
gescrollt zu werden

Antworten:

182

ziemlich einfach, in Vanille-Javascript:

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
Will P.
quelle
53

Sie können dies mit jQuery verwenden

$(document).ready(function(){
    var $textarea = $('#textarea_id');
    $textarea.scrollTop($textarea[0].scrollHeight);
});
Mahfud Harun
quelle
nicht wirklich vertraut mit jQuery. Würde ich dies einfach in den gleichen Bereich wie Javascript stellen oder muss ich ein neues <script> -Element erstellen und einen neuen Typ angeben?
Moesef
1
und füge <script language = 'javascript' src = ' ajax.googleapis.com/ajax/libs/jquery/1.7.1/… > Tags hinzu :)
Will P.
8
Das Hinzufügen einer standortweiten Abhängigkeit, um etwas zu tun, das Sie in einfachem JS tun können, klingt nach einer schlechten Idee. Nur weil du kannst, heißt das nicht, dass du es solltest.
Emix
0

Ich hatte das gleiche Problem und fand heraus, dass es kein Attribut gibt, das anfänglich festgelegt werden kann, um das richtige Bildlaufverhalten zu erzielen. Sobald der Text jedoch in textArea aktualisiert wurde, können Sie unmittelbar danach in derselben Funktion den Fokus () auf textArea setzen, damit er nach unten scrollt. Sie können dann auch focus()ein anderes Eingabefeld aufrufen , damit der Benutzer in dieses Feld eingeben kann. Das funktioniert wie Charme:

function myFunc() {
    var txtArea = document.getElementById("myTextarea");
    txtArea.value += "whatever"; // doesn't matter how it is updated
    txtArea.focus();
    var someOtherElem = document.getElementById("smallInputBox");
    someOtherElem.focus();
}
Mitesh Raval
quelle