jQuery移动固定页脚，iOS Web视图和scrollTop问题 [英] jQuery mobile fixed footer, iOS web view, and scrollTop issue

问题描述

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

I have a mobile application running Backbone.js and jQuery mobile. Because I have Backbone.js and for performance reasons I have disabled all the JQM routing and transitions. I understand that storing scroll location is a feature available in JQM, but I am unable to utilize that (as far as I know).

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

I have a list view with a potentially long list of items. When the user taps one on the mobile device, it stores the current scroll position and renders a new view. When the user taps the "back" button, it goes back one in the history.

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

render: ->
    ...

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

这在桌面Safari上可以正常工作，但是当我在iOS Safari(模拟器和真实对象)上尝试使用它时，固定页脚导航栏就会出现问题.

This works as desired on desktop Safari, but when I try it using it on iOS Safari (both simulator and the real thing), there is an issue with the fixed footer navbar.

如果用户向后轻击，则列表视图会按预期向下滚动，但是如果他们轻敲页脚导航栏，就好像他们在其下方轻按一样，它下面的任何列表项都将被激活.如果用户在点按导航栏之前滚动了一点，则一切正常.

If the user taps back, the listview is scrolled down as intended, but then if they tap the footer navbar, it is as if they tapped under it, whatever list item is under it will be activated instead. If the user scrolls a little bit before tapping the navbar, everything works fine.

有人有什么想法吗?也许有一种更好的方法可以完全避免这个问题.

Does anyone have any ideas? Perhaps there is a better approach that would avoid this issue all together.

预先感谢您的帮助.

推荐答案

Chad Smith回答了

Chad Smith Answered this Mobile Safari bug on fixed positioned button after scrollTop programmatically changed...?

他的方法最适合我.这是他的回应:

His method worked best for me. Here is his response:

我通过添加101％的高div来解决这个问题，然后(几乎)立即将其删除.

I got around it by adding a 101% high div then (almost) immediately removing it.

尝试:

<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一起使用.

It also works with jQuery.scrollTo.

在此处中查看示例.

这篇关于jQuery移动固定页脚，iOS Web视图和scrollTop问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！