HTML/Javascript：记住滚动与窗口大小无关

Question

我有一个在线阅读书籍的网页。我想保存文档中的位置，以便当用户继续阅读时，他会从之前所在的位置开始。

我可以使用 window.pageYOffset 之类的东西来获得滚动，但这取决于浏览器窗口的大小。换句话说，如果您使窗口变窄，相同的文本将出现在不同的滚动条上（参见图片中的示例）。

所以我需要想出一种独立于窗口大小的测量滚动的方法。有什么想法吗？

注意：我只需要它在基于 mozilla 的浏览器上工作。

提前致谢

Answer 1

啊啊啊啊，我的版本又晚了……但至少我有一个演示：

我的方法还使用百分比（滚动位置/（滚动高度 - 容器高度））

http://jsfiddle.net/wJhFV/show

$(document).ready(function(){
    var container = $("#container")[0];
    container.scrollTop =
        Number(localStorage["currentPosition"]) *
        (container.scrollHeight - $(container).height())

})

$("#container").scroll(function(){
    console.log("set to: ")
        console.log(
        localStorage["currentPosition"] =
            (this.scrollTop) /
            (this.scrollHeight - $(this).height())
        );
})

Answer 2

如果我的假设是正确的，即相对于文档高度的相对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

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