如何将 textarea 滚动条默认设置为底部？答案

【问题标题】：How do I set textarea scroll bar to bottom as a default?如何将 textarea 滚动条默认设置为底部？
【发布时间】：2012-02-28 13:13:45
【问题描述】：

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

【问题讨论】：

How to have a textarea to keep scrolled to the bottom when updated的可能重复

标签： javascript css scroll textarea

【解决方案1】：

很简单，在原版 javascript 中：

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

【讨论】：

如果你只是在同一个代码块中加载了 textarea，这是行不通的。要使其正常工作，请将此代码放在一个单独的函数中，然后在加载新的 textarea 值后调用它。然后它将按需要工作。
在更新文本后每次都必须将scrollTop 分配为scrollHeight，这是一条重要信息。如果你不这样做，你将无法获得想要的效果。

【解决方案2】：

你可以在 jQuery 中使用它

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

【讨论】：

不太熟悉 jQuery。我是将其放入与 javascript 相同的区域还是需要创建一个新的
并添加
添加站点范围的依赖只是为了做一些你可以用普通 JS 做的事情听起来是个坏主意。仅仅因为你可以并不意味着你应该。

【解决方案3】：

在您的 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的代码放入一个单独的函数中。

【讨论】：

【解决方案4】：

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

【讨论】：