HTML/Javascript: recuerde desplazamiento independiente del tamaño de la ventana

Question

Tengo una página web para leer libros en línea. Me gustaría guardar la posición dentro del documento para que cuando un usuario reanude su lectura, comience en el punto donde estaba antes.

Puedo obtener el desplazamiento utilizando elementos como window.pageYOffset, pero esto depende del tamaño de la ventana del navegador. En otras palabras, si hace que su ventana sea más estrecha, el mismo texto estará en un desplazamiento diferente (vea la imagen para ver un ejemplo).

Así que tengo que encontrar una forma independiente de tamaño de ventana para medir el desplazamiento. ¿Algunas ideas?

Nota: Solo necesito esto para trabajar en los navegadores basados ​​en mozilla.

Gracias de antemano

Answer 1

Si mi suposición es correcto que el valor relativo scrollTop en relación a la altura del documento es siempre la misma, el problema podría resolverse simplemente en lugar.

En primer lugar establece una cookie con el porcentaje de lectura:

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=/' 

En la siguiente carga de la página se puede restaurar la posición estableciendo el valor scrollTop en el cuerpo:

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

Tenga en cuenta que read_cookie es no es una función del navegador. Tienes que implementarlo. Puede encontrar un ejemplo en http://www.quirksmode.org/js/cookies.html

Probé esto en una página grande y funcionó bastante bien.

Answer 2

Aaaaaaand mi versión es tarde ... otra vez ... pero por lo menos tengo una demo:

Mi método también utiliza porcentajes (posición de desplazamiento/(altura de desplazamiento - altura del contenedor))

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