使用滚动条伪装textarea并更新内容

Question

因为我无法在标签内标记内容，所以我想创建自己的“自定义”文本框。 文本框应该作为一种控制台，记录战斗的进度（即）。 我首先尝试在每个日志的div内使用一个div内的div，但是当外部div中的div超过max-height时，它们会忽略周围的div。

示例：

即使这样可行，我仍然遇到问题，没有滚动条，因为它不是<textarea>。

我搜索了很多内容，但我发现了动态馈线阅读器的压倒性教程等唯一的东西。

我正在寻找的是一个简单的“文本框”，也就是带有滚动条的“控制台”，内容确实尊重该控制台的边框。 完成了jQuery。

非常感谢！

解决方案：

之前

<div id="battleLog" style="max-height:100px;height:100px;min-height:100px;">
    <div style="padding:2px 2px 2px 2px;">
        //content
    </div>
</div>

后

<div id="battleLog" style="max-height:100px;height:100px;min-height:100px;overflow-x:hidden;overflow-y:scroll;">
    <div style="padding:2px 2px 2px 2px;">
        //content
    </div>
</div>

Answer 1

尝试在你的div上设置这个css

overflow-x:hidden;
overflow-y:scroll;

Answer 2

overflow: auto;
overflow-x: hidden;
overflow-y: auto;

然后在你的jQuery中，当div的内容改变时：

$('#theDiv').get(0).scrollTop = 10000000;

我不确定这是不是最好的方式，但这就是我的工作方式。

Answer 3

好吧，您可以通过更改overflow-y属性

为您的div添加滚动条

#div{
overflow-y: scroll;

}

我认为这是一个比textarea更好的选择，因为你也可以格式化文本。