javascript jQuery Mobile 在页面转换前防止滚动到顶部？

jQuery Mobile prevent scroll-to-top before page transition?

提问by fishbaitfood

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.

这个问题在jQM 1.2中出现过，在新发布的1.3版本中依然没有修复。

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.

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

采纳答案by Gajotres

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.

如果您在一页（例如 1000 像素）上的长列表的中途，并且您要传输到的页面只有几百像素高，那么当前页面将正确地在屏幕外设置动画，但新页面将不可见它将在视口上方。

There are 2 viable solutions:

有两种可行的解决方案：

1. iScroll and its jQuery Mobile derivate iScrollview

1. iScroll 及其 jQuery Mobile 派生 iScrollview

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

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

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

iScrollview 主页：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.

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

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.

这也是我们当前问题的解决方案。因为 iScroll 实现页面将占据页面高度的 100%，无论列表视图滚动多远。这也是返回时列表视图仍将保持在同一位置的原因。

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.

当然，如果你想实现这个解决方案，你应该选择 iScrollview 实现。您仍然可以实现 iScroll，但需要花费更多时间。

2. Silent scroll

2. 静音卷轴

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

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

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

In our case, when listview is selected, its position must be remembered (hereyou 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 pagebefpreshowevent to silently scroll to the bottom before page is shown.

In our case, when listview is selected, its position must be remembered ( hereyou 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. 在这种情况下，当我们返回上一页时，我们可以使用pagebefpreshow事件在页面显示之前静默滚动到底部。

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

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

这是一个无声滚动的工作示例：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.

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

回答by Moises Kirsch

I was able to fix this (for iOS) in the following way:

我能够通过以下方式解决这个问题（对于 iOS）：

1. Add a extra container div for the scrolling part. Usually surrounding the scrolling part of your page. In my case right after the header and before the footer code.

2. Add the following CSS:

   .extracontainer {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: 0;
     padding: 0;
     overflow: auto;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
   }
   

1. 为滚动部分添加一个额外的容器 div。通常围绕页面的滚动部分。就我而言，就在页眉之后和页脚代码之前。

2. 添加以下 CSS：

   .extracontainer {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: 0;
     padding: 0;
     overflow: auto;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
   }
   

Some of the CSS might be extra but in my case it was to avoid any issues with some other styles that I have using negative margins, paddings, etc.

一些 CSS 可能是额外的，但在我的情况下，它是为了避免我使用负边距、填充等其他一些样式的任何问题。

Also make sure to have the -webkit-overflow-scrolling: touch;to have smooth scrolling.

还要确保有-webkit-overflow-scrolling: touch; 平滑滚动。

I hope this helps.

我希望这有帮助。

回答by Arthur Shiriev

  $( document ).on( "mobileinit", function() {
        var silentScroll = $.mobile.silentScroll;
          $.mobile.silentScroll = function( ypos ) {
        if ( $.type( ypos ) !== "number" ) {
            // FIX : prevent auto scroll to top after page load
            return;
        } else {
            silentScroll.apply(this, arguments);
        }
    }
  }

回答by Nick Babkin

For Jquery Mobile 1.4.5 i fixed that by changing this line in jquery.mobile-1.4.5.min.js:

对于 Jquery Mobile 1.4.5，我通过更改 jquery.mobile-1.4.5.min.js 中的这一行来解决这个问题：

a.mobile.hideUrlBar&&g.load(a.mobile.silentScroll)

a.mobile.hideUrlBar&&g.load(a.mobile.silentScroll)

to this:

对此：

a.mobile.hideUrlBar

a.mobile.hideUrlBar

回答by Edye Chan

try to use scrollstartto detect window scroll event in jquery mobile, in case you need :)

尝试使用scrollstart来检测 jquery mobile 中的窗口滚动事件，以防万一：)

回答by Jose Antonio Sánchez Pujante

Solution to prevent scrool to top is:

防止滚动到顶部的解决方案是：

body onload="$.mobile.silentScroll(window.scrollY);"

body onload="$.mobile.silentScroll(window.scrollY);"