HTML/Javascript:记住滚动独立于窗口大小

Question

我有一个在线阅读书籍的网页.我想保存文档中的位置,这样当用户恢复阅读时,他就会从以前的位置开始.

我可以使用window.pageYOffset之类的东西来获取滚动,但这取决于浏览器窗口的大小.换句话说,如果您使窗口更窄,则相同的文本将在不同的滚动条上(有关示例,请参见图像).

所以我需要提出一种窗口大小的独立测量滚动方式.有任何想法吗？

注意:我只需要在基于Mozilla的浏览器上工作.

提前致谢

Answer 1

如果我的假设是正确的，即相对于文档高度的相对scrollTop值始终相同，那么问题就可以相当简单地解决。

首先设置一个带有读取百分比的cookie：

var read_percentage = document.body.scrollTop / document.body.offsetHeight;
document.cookie = 'read_percentage=' + read_percentage + '; expires=Thu, 2 Aug 2021 20:47:11 UTC; path=/'

在下一页加载时，您可以通过设置正文上的scrollTop值来恢复位置：

var read_percentage = read_cookie('read_percentage');
document.body.scrollTop = document.body.offsetHeight * read_percentage

请注意，read_cookie 不是浏览器功能。你必须实施它。示例可以在http://www.quirksmode.org/js/cookies.html上找到

我在一个大页面上对此进行了测试，效果非常好。