当 URL 栏更改可见性时页面滚动到顶部

Question

在构建适合移动设备的网站时，我在 Android 上使用 Google Chrome。我正在使用 jQuery Mobile 的面板功能在我的站点左侧添加一个可隐藏菜单。当菜单被隐藏时，我可以毫无问题地上下滚动页面，这样做会导致浏览器顶部的 URL 栏进出视图。这按预期工作。

但是，一旦我展开隐藏的菜单面板并向下滚动，每次 URL 栏更改可见性时，页面都会自行滚动回顶部。如果我向下滚动（向上推页面）并隐藏栏，它会滚动回顶部。现在该栏已隐藏，我可以毫无问题地向下滚动。一旦我再次向上滚动（向下拉页面，显示 URL 栏），页面再次捕捉到顶部。现在我位于页面顶部（过去我想滚动到的位置）我必须再次向下滚动，这再次隐藏了 URL 栏，并将页面捕捉到顶部。只要我的滚动使 URL 栏在可见和不可见之间交替，这种情况就会重复。真气人。

我怀疑这与设备视口大小的变化有关，但我无法确定。有谁知道是什么原因造成的，或者更重要的是，如何解决？

这是我的代码的要点：

<div id="container" class='' align="left" data-role="page" data-ajax="false">
    <div data-role="header"><!-- my header --></div>
    <div id="myHiddenPanel" class='ui-panel' data=role="panel" data-position="left" data-display="reveal"><!-- Tall menu options --></div>
    <div id="mainContent" class="ui-content"><!-- Tall Main content --></div>
</div>

请注意，我也在为这个网站使用 Bootstrap，但它并没有专门用于这些元素。

Answer 1

好吧，令我惊讶的是，我能够找到解决此问题的方法。

根据this post，这可能是jQuery Mobile 中的一个错误。通过编辑 .js 文件或通过添加您自己的版本来覆盖小部件，可以轻松解决此问题。

我使用的是缩小版，所以我可以通过替换这段代码来修复它

...e.resetActivePageHeight(d)),b&&this.window[0].scrollTo(0,a.mobile.defaultHomeScroll)):c._fixPanel()},_bi...

有了这个

...e.resetActivePageHeight(d)),b/*&&this.window[0].scrollTo(0,a.mobile.defaultHomeScroll)*/):c._fixPanel()},_bi...

只需在 Minified jQuery Mobile 中搜索该 sn-p 即可替换它，或者如果您使用的是非压缩版本，请按照链接页面上的说明进行操作。