在页面重新加载</textarea>上恢复<textarea>滚动条位置

Question

在使用JavaScript搜索StackOverflow恢复滚动条位置时，我从https://stackoverflow.com/a/3812235/1101391

中看到了这个建议

    document.getElementById("invoice_incomplete").scrollTop = 200px;

如果我没弄错的话，这段代码与我真正想要实现的内容有些相关。如何在重新加载页面后实际保存/记住/恢复滚动条在<textarea>上的位置，而不仅仅是设置首选滚动条位置？

就像在<textarea>上键入一些段落并重新加载页面一样，在重新加载页面之前，滚动条应位于相同的位置。

修改 使用onunload事件和不可见的<input>标记结束，按照先生。 @ ruakh的建议。

Answer 1

您可以将值保存在不起作用的不可见文本字段中：

<input style="display:none" id="scrollTop" />

你可以使用window.onunload事件（上面提到katspaugh的评论）来设置

document.getElementById('scrollTop').value = textarea.scrollTop;

和要设置的window.onload事件

textarea.scrollTop = document.getElementById('scrollTop').value;

（以上假设textarea是一个引用textarea的变量。）

当浏览器重新加载页面时，如果它恢复了表单内容，那么它将恢复不可见文本字段的内容以及textarea的内容。

Answer 2

您可以将滚动条的位置存储在浏览器的会话存储中，然后在刷新/重新加载页面时进行查询。使用window.sessionStorage。

Answer 3

在每次滚动更改时（例如在onscroll事件处理程序中）将当前的scrollTop保存到cookie或localStorage中，然后在页面加载时将其恢复。