jQuery mobile 固定页脚、iOS web 视图和 scrollTop 问题答案

【问题标题】：jQuery mobile fixed footer, iOS web view, and scrollTop issuejQuery mobile 固定页脚、iOS web 视图和 scrollTop 问题
【发布时间】：2012-04-23 14:06:53
【问题描述】：

我有一个运行 Backbone.js 和 jQuery mobile 的移动应用程序。因为我有 Backbone.js，并且出于性能原因，我禁用了所有 JQM 路由和转换。我知道存储滚动位置是 JQM 中提供的一项功能，但我无法利用它（据我所知）。

我有一个列表视图，其中包含可能很长的项目列表。当用户在移动设备上点击一个时，它会存储当前滚动位置并呈现一个新视图。当用户点击“返回”按钮时，它会返回历史记录。

clickLink: ->
    window.lastScroll = $(window).scrollTop()

render: ->
    ...

    if window.lastScroll
        $.mobile.silentScroll window.lastScroll
        window.lastScroll = undefined

这在桌面 Safari 上可以正常工作，但是当我在 iOS Safari（模拟器和真实的东西）上尝试使用它时，固定页脚导航栏存在问题。

如果用户点击返回，列表视图会按预期向下滚动，但是如果他们点击页脚导航栏，就好像他们点击了它，它下面的任何列表项都将被激活。如果用户在点击导航栏之前稍微滚动一下，一切正常。

有人有什么想法吗？也许有更好的方法可以一起避免这个问题。

提前感谢您的帮助。

【问题讨论】：

Chad Smith 的这个解决方法对我来说效果最好：stackoverflow.com/questions/8752220/…

标签： jquery-mobile

【解决方案1】：

会不会和这个bug有关？

Form elements can lose click hit area in position: fixed containers

（从这里链接JQuery Mobile 1.1.0 docs ）

我看到第一个链接中有一个解决方法 - 值得一试吗？

【讨论】：

【解决方案2】：

Chad Smith 回答了这个Mobile Safari bug on fixed positioned button after scrollTop programmatically changed...?

他的方法最适合我。这是他的回应：

我通过添加一个 101% 高的 div 然后（几乎）立即删除它来解决它。

试试：

<style>
.iosfix {
  height: 101%;
  overflow: hidden;
}
</style>

当你滚动时：

window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
  $('.iosfix').remove();
}, 500);

它也适用于 jQuery.scrollTo。

查看示例here。

【讨论】：