Saving Scroll Postion with jQuery Mobile 1.3 List view

问题

I have quite a bit of research on this have not been able to find a solution. I am using jquery mobile 1.3

I have a dynamic nested list view that is populated from a database, as user is browsing the list view- user scrolls down, on clicking back, the user is not returned to the last position, it goes to top of the screen.

Is there any way I can get the scroll position when user is browsing the nested list view and save it so when user clicks back I can use that can call $.mobile.silentScroll.

Please advise,

Thanks,

Kris

回答1:

Solution

Here's a working example: http://jsfiddle.net/Gajotres/5zZzz/

// Detect click on a li element and store its coordinate, change page to another
$(document).on('pagebeforeshow', '#index', function(){  
    $('#test-list li').on('click', function(){   
        storePosition.topCoordinate =  $(this).offset().top;
        $.mobile.changePage('#second');
    });    
});

// If there's a stored position use silentscroll function and scroll to correct location
$(document).on('pageshow', '#index', function(){      
    if(storePosition.topCoordinate !== null) {
        $.mobile.silentScroll(storePosition.topCoordinate);
    }
});

// Store position location
var storePosition = {
    topCoordinate : null
}

Intro

Before I describe your other solutions you need to understand, this is not an error nor is there a perfect solution. The issue is that to animate the transition to another page the viewport has to be at the top of the page so that the current page and the page transitioning in are vertically lined-up.

If you were half-way down a long list on one page (say 1000px) and the page you are transferring to is only a few hundred pixels tall then the current page would animate off the screen properly but the new page would not be visible as it would be above the viewport.

There are 2 real viable solutions:

1. iScroll and its jQuery Mobile derivate iScrollview

iScroll homepage: http://cubiq.org/iscroll-4

iScrollview homepage: https://github.com/watusi/jquery-mobile-iscrollview

iScroll is a javascript that can scroll content in a window within a web browser with very similar behaviour to native scrolling on mobile devices such as iPhone and Android. This means you can scroll a window within the browser using native-like scrollbars and physics.

That is also a solution for our current problem. Because of iScroll implementation pages will occupy 100% of page height, no matter how far listview is scrolled. This is also a reason why on return listview will still stay at a same position.

Of course in case you want to implement this solution you should pick iScrollview implementation. You would still be able to implement iScroll, but it would take you much more time.

2. Silent scroll

Like in my top example:

Official documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

This jQuery Mobile functionality is also the same reason why we have this problem at the first place. Before a page transition is triggered original page is silently scrolled to the top.

In our case, when listview is selected, its position must be remembered (here you will find solutions of data/parameteres storing during the page transition, just search for the chapter: Data/Parameters manipulation between page transitions) before page is changes. In that case, when we return to the previous page we could use pagebefpreshow event to silently scroll to the bottom before page is shown.

//scroll to Y 100px
$.mobile.silentScroll(100);

And here's a working example of silent scroll: http://jsfiddle.net/Gajotres/2xfrM/

More info

If you want to find out more about this topic take a look at this article, you will also find working examples.

回答2:

Gajotres has the good answer, I just use this way (I marked pages with saveScrollTop class, where it is necessary) :

$(document).on('pageshow',function(){
    if ($.mobile.activePage.hasClass('saveScrollTop')
        && $.mobile.activePage.data('scroll')){
        $.mobile.silentScroll($.mobile.activePage.data('scroll'));
    } else {
        $.mobile.silentScroll(0);
    }
});

$(document).on('pagebeforechange',function(){
    if ($.mobile.activePage && $.mobile.activePage.hasClass('saveScrollTop')){
        $.mobile.activePage.data('scroll',$(window).scrollTop());
    }
});

Unfortunately jQuery scroll the window and not the content inside the page's div, thats the root of the problem. It save the last scrolled position and set it in the next page. It's works fine if you not scroll on the new page and go back. But if both pages are bigger than the screen, it's completly mess.

回答3:

You can track the position using .offset() in jQuery mobile. You may save the value to a sessionStorage and when user comes back to the page retrieve the value from sessionStorage and do a silentScroll.

Save as below

sessionStorage.pixelFromTop = $("#ordSrcCnt").offset();

and scroll as below once user is back

$.mobile.silentScroll(parseInt(sessionStorage.scrollToOrderRow));

Hope this is enough to get you started.

回答4:

what worked for me, as already mentioned above, is:

$(document).on("pageshow","#page",function (event) {
if (Listnumber>0)$.mobile.silentScroll($("#"+listnumber).offset().top-50);
});

i have a dynamic generated listview (from xml file) and every li-item get an id. I put the id in the var listnumber so i can retrieve it when i return to the listview page after i clicked on the listview to see the detail page. on first visit to the listviewpage the listnumer var is 0 so it wont do any scrolling. i do a -50 after the offset so i scroll to the list-item i clicked on, cos otherwise the list-item wouldnt be visible. hth cos it took me some hours to figure it out...

回答5:

Here is the best way to fix it.

Put this in the page header:

<script>
  $(function() { 
    $.mobile.defaultHomeScroll = 0;
  });
</script>

This way it till never scroll back to top.

来源：https://stackoverflow.com/questions/15353766/saving-scroll-postion-with-jquery-mobile-1-3-list-view

标签

jquery

jquery-mobile