Javascript 如何防止文本区域在其值更改时滚动到顶部？

考虑以下示例：（）

HTML:

JS:

单击

#按钮

时，

textarea

值会发生变化，出于某种原因，滚动条会转到顶部（我在Firefox中选中了此项，不确定其他浏览器）

为什么会这样

我怎样才能解决这个问题

---

我找到了一个可能的解决方案，但不知是否还有其他解决方案。

您可以保存scrollTop偏移量，设置该值，然后将scrollTop重置为旧偏移量：

var $textarea = ...;
var top = $textarea.scrollTop();
$textarea.val('foo');
$textarea.scrollTop(top);

请在此处尝试：

另一种解决方案（由于没有独特的跨浏览器方式，因此更难暗示）：

---

不要更改textarea的值，而是为textarea的内容创建一个textRange并修改文本范围。

供您参考，这在Chrome中不会发生。

textarea {
    height: 80px;
    width: 150px;
    background-color: #bbb;
    resize: none;
    border: none;
}
#button {
    width: 150px;
    background-color: #333;
    color: #eee;
    text-align: center;
}

$(function() {
    var textarea = $("textarea");

    textarea.val("Hello\nStack\nOverflow!\nThere\nAre\nLots\nOf\nGreat\nPeople\nHere");

    $("#button").click(function() {
        textarea.val(textarea.val() + "!");
    });

    textarea.scrollTop(9999).focus(); // Arbitrary big enough number to scroll to the bottom
});

var $textarea = ...;
var top = $textarea.scrollTop();
$textarea.val('foo');
$textarea.scrollTop(top);