HTML / Javascript: помните, что прокрутка не зависит от размера окна - PullRequest
Новая
       15

HTML / Javascript: помните, что прокрутка не зависит от размера окна

9 голосов
/ 20 сентября 2011

У меня есть веб-страница для чтения книг в Интернете. Я хотел бы сохранить позицию внутри документа, чтобы, когда пользователь возобновляет чтение, он начинает с того места, где он был ранее.

Я могу получить прокрутку, используя такие вещи, как window.pageYOffset, но это зависит от размера окна браузера. Другими словами, если вы сделаете ваше окно уже, тот же текст будет на другой прокрутке (см. Изображение для примера).

Так что мне нужно придумать независимый от размера окна способ измерения прокрутки. Есть идеи?

Примечание. Это необходимо только для работы в браузерах на базе Mozilla.

Problem example

Заранее спасибо

Ответы [ 2 ]

2 голосов
/ 20 сентября 2011

А-а-а-а-а, моя версия опоздала ... опять ... но, по крайней мере, у меня есть демо:

Мой метод также использует проценты (позиция прокрутки / (высота прокрутки - высота контейнера))

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())
        );
})
1 голос
/ 20 сентября 2011

Если мое предположение верно, что относительное значение 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

Я проверил это на большой странице, и она работала вполне нормально.

...