HTML/Javascript：记住滚动不依赖于窗口大小

我有一个网上看书的网页。我想将这个位置保存在文档中，所以当用户恢复阅读时，他会从他以前的位置开始。HTML/Javascript：记住滚动不依赖于窗口大小

我可以使用诸如window.pageYOffset之类的东西来获得滚动，但这取决于浏览器窗口大小。换句话说，如果你让你的窗口变窄，相同的文本将会以不同的方式滚动（例如查看图像）。

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

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

Problem example

在此先感谢

来源

2011-09-19 user683887

+1，我见过的最好的问题！ – Brad

我在职位上看不到太多差异。什么是你见过的最大偏差？ –

另请参阅：http://stackoverflow.com/questions/7331701/how-to-know-what-lines-chars-are-currently-visible-in-a-textarea如果你可以弄清楚，在下次加载时可以放入锚点或其他元素，并执行scrollTo。 – Brad

如果我的假设是正确的，相对于文件的高度相对scrollTop的值总是相同的，这个问题可以简单而解决。

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

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

注意read_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的值恢复位置不是浏览器功能。你必须执行它。示例可在http://www.quirksmode.org/js/cookies.html

我在一个大页面上测试了它，它工作得很好。

来源

2011-09-19 21:37:15 topek

Aaaaaaand我的版本是晚了......再......但至少我有一个演示：

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

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()) 
     ); 
})

来源

2011-09-19 21:41:21

HTML/Javascript：记住滚动不依赖于窗口大小

回答

相关问题