Как установить полосу прокрутки текстового поля вниз по умолчанию?

97

У меня есть текстовое поле, которое динамически перезагружается по мере отправки пользовательского ввода. Оно обновляется каждые пару секунд. Когда объем текста в этом текстовом поле превышает размер текстового поля, появляется полоса прокрутки. Однако полосу прокрутки на самом деле нельзя использовать, потому что, если вы начнете прокручивать вниз, через пару секунд текстовое поле обновится и вернет полосу прокрутки вверх. Я хочу, чтобы полоса прокрутки по умолчанию отображала самый нижний текст. Кто-нибудь знает, как это сделать?

javascript css scroll textarea Moesef
источник
Возможный дубликат Как сделать так, чтобы текстовое поле оставалось прокрученным вниз при обновлении
LoganMzz

Ответы:

190

довольно просто, в ванильном javascript:

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
Уилл П.
источник
Если вы просто загрузили текстовое поле в том же блоке кода, это не сработает. Чтобы он работал правильно, поместите этот код в отдельную функцию, а затем вызовите ее после загрузки нового значения textarea. Тогда все будет работать по желанию.
Blissweb
55

Вы можете использовать это с jQuery

$(document).ready(function(){
    var $textarea = $('#textarea_id');
    $textarea.scrollTop($textarea[0].scrollHeight);
});
Махфуд Харун
источник
не очень знаком с jQuery. Могу ли я просто поместить это в ту же область, что и javascript, или мне нужно создать новый элемент <script> и указать новый тип?
moesef
1
и добавьте теги <script language = 'javascript' src = ' ajax.googleapis.com/ajax/libs/jquery/1.7.1/… > :)
Уилл П.
8
Добавление зависимости для всего сайта просто для того, чтобы делать что-то, что вы можете сделать на простом JS, звучит как плохая идея. То, что вы можете, не означает, что вы должны.
emix
0

У меня была такая же проблема, и я обнаружил, что нет атрибута, который можно было бы изначально установить для правильного поведения прокрутки. Однако, как только текст обновляется в textArea, сразу после этого в той же функции вы можете установить focus () на textArea, чтобы он прокручивался вниз. Затем вы можете вызвать focus()другое поле ввода, чтобы пользователь мог вводить данные в это поле. Это работает как шарм:

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();
}
Митеш Раваль
источник
0

В вашем HTML ...

<textarea id="logTextArea" style="width:600px;height:200px;"></textarea>

В вашем Javascript ...

<script language="javascript">

    function loadLog(logValue) {
        logTa = document.getElementById("logTextArea")
        logTa.value = logValue;
        scrollLogToBottom()
    }

    function scrollLogToBottom() {
        logTa = document.getElementById("logTextArea")
        logTa.scrollTop = logTa.scrollHeight;
    }

    loadLog("This is my really long text block from a file ... ")

</script>

Я обнаружил, что вам нужно поместить код для установки scrollHeight в отдельную функцию после загрузки нового значения в текстовую область.

блаженство
источник