Question

我有一个运行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（模拟器和真实的东西）上使用它时，固定的页脚导航栏会出现问题。

如果用户点击回来，列表视图会按预期向下滚动，但如果他们点击页脚导航栏，就好像他们在其下方点击一样，无论其下面的列表项是什么，都会被激活。如果用户在点击导航栏之前滚动一点，一切正常。

有没有人有任何想法？也许有一种更好的方法可以避免这个问题。

提前感谢您的帮助。

Answer 1

它可能与此错误有关吗？

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

（从此处链接JQuery Mobile 1.1.0 docs ）

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

Answer 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。

jQuery移动固定页脚，iOS Web视图和scrollTop问题

2 个答案: