Question

我有一个textarea，正在发送用户输入时动态重新加载。它每隔几秒刷新一次。当此textarea中的文本量超过textarea的大小时，将出现滚动条。但是滚动条实际上并不可用，因为如果你开始向下滚动，几秒钟之后textarea会刷新并将滚动条右回到顶部。我想将滚动条设置为默认显示最底部的文本。任何人都知道如何这样做？

Answer 1

非常简单，在vanilla javascript中：

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;

Answer 2

你可以在jQuery中使用它

$(document).ready(function(){
    var $textarea = $('#textarea_id');
    $textarea.scrollTop($textarea[0].scrollHeight);
});

Answer 3

我遇到了同样的问题，发现没有可以最初设置的属性来获得正确的滚动行为。但是，一旦在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();
}

Answer 4

在您的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设置为单独的函数。

如何将textarea滚动条设置为默认值？

4 个答案: