jQuery Mobile 在页面转换前防止滚动到顶部? [英] jQuery Mobile prevent scroll-to-top before page transition?

问题描述

当我点击一个列表项去另一个页面时，当前页面会在跳转到下一页之前跳到屏幕顶部.

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.

这个问题出现在jQM 1.2中，在新发布的1.3版本中仍未修复.

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.

我在 iPhone 4S 和 iOS 6.1.2 上将它用作网络应用程序.

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.

如果您在一个页面(比如 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.

有两种可行的解决方案:

There are 2 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%，无论列表视图滚动多远.这也是返回时listview仍会停留在同一位置的原因.

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.

官方文档: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.

In our case, when listview is selected, its position must be remembered (here you will find solutions of data/页面转换期间存储的参数，只需在页面更改之前搜索章节:页面转换之间的数据/参数操作).在这种情况下，当我们返回上一页时，我们可以使用 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 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);

这是一个无声滚动的工作示例:http://jsfiddle.net/Gajotres/5zZzz/

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

如果您想了解有关此主题的更多信息，请查看此 文章，您还将找到工作示例.

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屋！