使用jQuery Mobile 1.3列表视图保存滚动位置 [英] Saving Scroll Postion with jQuery Mobile 1.3 List view

问题描述

我对此有相当多的研究未能找到解决方案. 我正在使用jquery mobile 1.3

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.

当用户浏览嵌套列表视图并保存它时，有什么方法可以获取滚动位置，以便当用户单击时可以调用$ .mobile.silentScroll.

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.

请告知，

谢谢

克里斯

推荐答案

解决方案

这是一个工作示例: 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.

如果您在一页上的一长串列表(例如1000像素)的中途，而要传输的页面只有几百个像素，那么当前页面将在屏幕上进行适当的动画处理，但是新页面不会在视口上方可见.

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.

有2种切实可行的解决方案:

There are 2 real viable solutions:

iScroll主页: http://cubiq.org/iscroll-4

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

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

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

iScroll是一种JavaScript，可以在Web浏览器中的窗口中滚动内容，其行为与在iPhone和Android等移动设备上进行本地滚动非常相似.这意味着您可以使用类似本机的滚动条和物理原理在浏览器中滚动窗口.

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.

这也是我们当前问题的解决方案.由于iScroll实现，无论列表视图滚动到多远，页面都将占据页面高度的100％.这也是为什么在返回列表视图时仍将停留在相同位置的原因.

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.

当然，如果要实施此解决方案，则应选择iScrollview实施.您仍然可以实现iScroll，但这将花费更多时间.

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.

就像我最喜欢的例子一样:

Like in my top example:

官方文档: http://jquerymobile.com/demos/1.1. 0-rc.1/docs/api/methods.html

此jQuery Mobile功能也与我们首先遇到此问题的原因相同.在触发页面转换之前，原始页面会静默滚动到顶部.

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.

在我们的情况下，选择列表视图时，其位置必须记住的(在这里你会发现数据/parameteres网页过渡期间存储的解决方案，只是搜索的一章:页面过渡之间的数据/参数操作)之前页面变化.在这种情况下，当我们返回上一页时，可以使用pagebefpreshow事件在显示页面之前静默滚动到底部.

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

这是静音滚动的一个工作示例: http://jsfiddle.net/Gajotres/2xfrM/

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

如果您想了解有关此主题的更多信息，请查看此

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

这篇关于使用jQuery Mobile 1.3列表视图保存滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！