HTML/Javascript: ricorda lo scroll indipendentemente dalla dimensione della finestra

Question

Ho una pagina web per leggere libri online. Mi piacerebbe salvare la posizione all'interno del documento in modo che quando un utente riprende la sua lettura, inizia nel punto in cui era precedentemente.

Posso ottenere lo scroll usando cose come window.pageYOffset, ma questo dipende dalla dimensione della finestra del browser. In altre parole, se riduci la finestra, lo stesso testo si troverà su una pergamena diversa (vedi l'immagine per un esempio).

Quindi ho bisogno di un modo indipendente per misurare la dimensione della finestra. Qualche idea?

Nota: ho solo bisogno di questo per lavorare su browser basati su Mozilla.

Grazie in anticipo

Answer 1

Se la mia ipotesi è giusto che il relativo valore scrollTop in relazione all'altezza documento è sempre lo stesso, il problema potrebbe essere risolto piuttosto semplice.

Prima impostare un cookie con la percentuale di lettura:

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

Sul prossimo caricamento della pagina è possibile ripristinare la posizione impostando il valore scrollTop sul corpo:

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

noti che read_cookie è non una funzione del browser. Devi implementarlo. L'esempio può essere trovato su http://www.quirksmode.org/js/cookies.html

Ho provato questo su una pagina grande e ha funzionato abbastanza bene.

Answer 2

Aaaaaaand la mia versione è in ritardo ... di nuovo ... ma almeno ho un demo:

mio metodo utilizza anche percentuali (posizione di scorrimento/(altezza scroll - altezza del contenitore))

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