HTML/Javascript: nhớ di chuyển độc lập với kích thước cửa sổ

Question

Tôi có một trang web để đọc sách trực tuyến. Tôi muốn lưu vị trí bên trong tài liệu để khi người dùng tiếp tục đọc, anh ta bắt đầu ở điểm mà trước đây anh ấy đã từng làm.

Tôi có thể cuộn bằng các thứ như window.pageYOffset, nhưng điều này phụ thuộc vào kích thước cửa sổ trình duyệt. Nói cách khác, nếu bạn làm cho cửa sổ của bạn hẹp hơn, cùng một văn bản sẽ ở một cuộn khác (xem hình ảnh cho một ví dụ).

Vì vậy, tôi cần phải đưa ra một cách độc lập với kích thước cửa sổ để đo cuộn. Bất kỳ ý tưởng?

Lưu ý: Tôi chỉ cần điều này để làm việc trên trình duyệt dựa trên mozilla.

Cảm ơn trước

Answer 1

Nếu giả định của tôi là đúng rằng giá trị scrollTop tương đối liên quan đến chiều cao tài liệu luôn luôn là như nhau, vấn đề có thể được giải quyết khá đơn giản.

Đầu tiên thiết lập một cookie với tỷ lệ đọc:

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

Trên tải trang tiếp theo bạn có thể khôi phục vị trí bằng cách thiết lập giá trị scrollTop trên cơ thể:

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

Lưu ý rằng read_cookie là không phải là một chức năng của trình duyệt. Bạn phải thực hiện nó. Ví dụ có thể được tìm thấy trên http://www.quirksmode.org/js/cookies.html

Tôi đã thử nghiệm điều này trên một trang lớn và nó hoạt động khá tốt.

Answer 2

Aaaaaaand phiên bản của tôi là muộn ... một lần nữa ... nhưng ít nhất tôi có một bản demo:

Phương pháp của tôi cũng sử dụng phần trăm (vị trí cuộn/(cuộn chiều cao - chiều cao thùng chứa))

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