Javascript 如何将自动滚动设置为文本区域

我已经编写了一个HTML表单，其中包含一个文本区域、文本框和一个按钮。单击按钮时，我在文本框中键入的内容将附加到文本区域。现在，我的问题是当文本区域完全填满时，新到达的文本出现在底部，我必须手动向下滚动以查看此文本。javascript中是否有任何方法可以使到达的文本始终可见，而无需向下滚动…请帮助

我不确定这是否是您想要的，但请查看以下内容：

---

您可以在此处找到详细信息：

此示例随着内容文本的添加而增加文本区域的大小

Javascript

var txt = $('#comments'),
    hiddenDiv = $(document.createElement('div')),
    content = null;

txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');

$('body').append(hiddenDiv);

txt.on('input', function () {

    content = $(this).val();

    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content + '<br class="lbr">');

    $(this).css('height', hiddenDiv.height());

});

txt.trigger('input');

---

要使textarea具有自动滚动功能，请在您试图查看textbox内容的位置末尾添加以下代码：

 var console = $('#area');
 console.scrollTop(
 console[0].scrollHeight - console.height());

---

希望这对您有所帮助：）

这可以通过javascript或jquery实现。您的浏览器不知道您想查看此文本，但可能会重复此文本

body {
     margin: 20px;
}

p {
    margin-bottom: 14px;
}

textarea {
    color: #444;
    padding: 5px;
}

.txtstuff {
    resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
    overflow: hidden;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}

/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
}

.lbr {
    line-height: 3px;
}

 var console = $('#area');
 console.scrollTop(
 console[0].scrollHeight - console.height());