jQuery Mobile防止在页面转换之前滚动到顶部？ [英] jQuery Mobile prevent scroll-to-top before page transition?
问题描述
当我点击列表项时，要转到另一个页面，当前页面会跳转到屏幕顶部，然后再转换到下一页。
这个问题发生在jQM 1.2中，并且在新发布的1.3版本中仍然不是固定的。
有人知道如何防止滚动到顶部，使用返回按钮时滚动位置？
这种令人讨厌的行为是不可接受的，打破了整个应用程式的体验。
在我描述你的可用的解决方案，你需要理解，这不是一个错误，也没有一个完美的解决方案。问题是，为了动画转换到另一个页面，视口必须在页面的顶部，以便当前页面和转换的页面是垂直排列的。
如果你在一个页面（例如1000像素）上的长列表中，而你正在传输到的页面只有几百像素高，那么当前页面将正常运行屏幕，但新的页面不会
有两个可行的解决方案：
1。 iScroll及其jQuery Mobile派生iScrollview
iScroll主页： http： //cubiq.org/iscroll-4
iScrollview主页： https://github.com/watusi/jquery-mobile-iscrollview
iScroll是一个可以滚动内容的javascript在Web浏览器中的窗口中，与移动设备（如iPhone和Android）上的本机滚动行为非常相似。这意味着您可以使用原生滚动条和物理滚动浏览器中的窗口。
这也是我们当前问题的解决方案。因为iScroll实现页面将占据100％的页面高度，无论列表视图滚动多远。这也是为什么on return listview仍然保持在同一位置的原因。
当然，如果你想实现这个解决方案，你应该选择iScrollview实现。你仍然可以实现iScroll，但它会花更多的时间。
2。静音滚动
官方文档： http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
这个jQuery Mobile的功能也是同样的原因，为什么我们有这个问题在第一位。
在我们的例子中，当选择listview时，它的位置必须被记住（在这里，您将在页面转换期间找到存储数据/参数的解决方案，只需搜索以下章节：页面转换之间的数据/参数操作）。在这种情况下，当我们返回上一页时，我们可以使用 pagebefpreshow 事件静默滚动到底部
//滚动到Y 100px
$ .mobile.silentScroll（100）;
这里有一个静音滚动的工作示例： http://jsfiddle.net/Gajotres/5zZzz/
更多信息
如果您想了解有关此主题的更多信息，请查看此 文章 ，您还可以找到工作示例。
When I click on a list-item, to go to another page, the current page jumps to the top of the screen before transitioning to the next page.
This problem occured in jQM 1.2, and is still not fixed in the newly released 1.3 version.
Does anybody know how to prevent the scroll-to-top, and remember the scroll position when using the back button?
This annoying behaviour is unacceptable, and breaks the whole app experience.
I'm using it as a webapp, on an iPhone 4S, with iOS 6.1.2.
Before I describe your available 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 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
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 changed. 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/5zZzz/
More info
If you want to find out more about this topic take a look at this article, you will also find working examples.
这篇关于jQuery Mobile防止在页面转换之前滚动到顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
