2012-01-14 3 views
2

Я использую JQuery плагин jScrollPane.jScrollPane Как сохранить положение прокрутки?

Клиент спросил меня, если пользователь прокручивает список элементов и нажимает на них, а затем заходит в свой браузер или возвращается на эту страницу из меню, может ли поле прокрутки находиться в одной позиции. : S

Это означало бы сохранение атрибута «top» css, вычисленного плагином, в файл cookie на mouseUp (когда они отпускают слайдер, сохраняют значение «top»), а затем, когда они возвращаются, я могу проверить для этого файла cookie и установите его в это положение.

Это идея, я даже не знаю, с чего начать.

Благодарим за любые ответы. :)

+1

_just начать реализацию своей идеи. «coz, в то время как он довольно глупый, - его хорошо стоит первоначальное требование клиента;) если вы хотите« улучшить его »- используйте« localStorage »вместо« cookie »и« onunload », чтобы сделать страницу перезагрузки браузера на обратной кнопке вместо используя кешированную версию. Но если серьезно, попробуйте убедить своего клиента в том, что это не совсем хорошая идея. Вместе с исполненным jScrollPane .. – c69

+0

Теоретическое решение (которое должно работать): используйте http://benalman.com/projects/jquery-bbq-plugin/, чтобы добавить хеш (#) к URL-адресу с численным положением полосы прокрутки , Затем используйте jquery, чтобы захватить этот хэш из URL-адреса и использовать его для перехода к правильной позиции. В качестве альтернативы вы можете использовать историю HTML5 api + js, чтобы изменить URL-адрес https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history –

ответ

3

Вот мое решение.

Позиция полосы прокрутки сохраняется в localstorage, а затем, когда страница загружается снова, обновляясь или возвращаясь с другой страницы, если localstorage имеет значение больше 0, которое представляет верхнюю часть полосы прокрутки (по умолчанию нераспределенная позиция), он прокручивается до этой позиции.

var element = $(".scroll-pane").jScrollPane({showArrows:true}); 
if(element != undefined) { 
    var api = element.data("jsp"); 
    $(function() { 
    if(parseInt(localStorage.getItem("ScrollPosition")) > 0) { 
     api.scrollToY(parseInt(localStorage.getItem("ScrollPosition"))) 
    } 
    $(".scroll-pane").bind("jsp-scroll-y", function(event, scrollPositionY, isAtTop, isAtBottom) { 
     localStorage.setItem("ScrollPosition", scrollPositionY) 
    }).jScrollPane() 
    }) 
} 
; 
+0

Отлично! Благодаря ;) – RevConcept

Смежные вопросы