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

Question

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

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

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

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

提前致谢

Answer 1

Aaaaaa和我的版本迟到了......但至少我有一个演示：

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

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

上找到

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