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

moe*_*sef 81 javascript css scroll textarea

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

Wil*_* P. 166

非常简单,在香草javascript:

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
Run Code Online (Sandbox Code Playgroud)

  • 如果您刚刚在同一代码块中加载文本区域,则这不起作用。为了使其正常工作,请将此代码放入单独的函数中,然后在加载新的文本区域值后调用它。然后它将按预期工作。 (4认同)
  • 这是一条重要的信息,每次更新文本后都必须将“scrollTop”指定为“scrollHeight”。如果不这样做,就不会达到预期的效果。 (2认同)

Mah*_*run 51

你可以在jQuery中使用它

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

  • 添加站点范围的依赖性只是为了做一些你可以用简单的JS声音做的事情,就像一个坏主意.只是因为你不能意味着你应该这样做. (8认同)

bli*_*web 5

在你的 HTML 中...

<textarea id="logTextArea" style="width:600px;height:200px;"></textarea>
Run Code Online (Sandbox Code Playgroud)

在你的 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>
Run Code Online (Sandbox Code Playgroud)

我发现在将新值加载到文本区域后,您需要将设置滚动高度的代码放入单独的函数中。