使用 iScroll 在 iOS 中的 web 应用程序中滚动

Question

我有一些 web 应用程序以前开发用于 Android 应用程序，我们正在尝试将它们移植到 iOS。

第一个问题是我们的广告没有留在原地，因为 position:fixed 在移动端 Safari 中不好用。 所以，我下载了 iScroll。

我发现 iScroll 不能与我们的 RSS 提要阅读器（jQuery 的 zRSSFeed）配合使用。 事实上，当两者都在同一页面上启用时，iScroll 功能“工作”，但卡在页面顶部。

我发布到 iScroll 用户组 (https://groups.google.com/group/iscroll/browse_thread/thread/5dd274ff4159a672) 但没有得到有用的答案。

我什至尝试更改为不同的 RSS 库，但似乎它们都引发了这个问题。

以前有人遇到过这个问题吗？ 有人解决了吗？ 我应该放弃并将广告放在网络应用程序的底部，还是什么？

谢谢大家。

编辑：我想我应该添加一些代码。

web东西的基本结构：

....
<div id="appBody">
    <div id="feedResults">
        <!-- rss entries go here -->
    </div>
</div>
<div id="appAdvertisements">
    <!-- admob JS stuff goes here -->
</div>
....

基本JS：

var scroll;
document.addEventListener('touchmove', function (e) { e.preventDefault();}, false);
function loaded() {
    scroll = new iScroll('appBody');
    $('#feedResults').rssfeed('<feedurl>', {<options>}, function() { scroll.refresh() });
}
document.addEventListener('DOMContentLoaded', loaded, false);

Answer 1

在基于 HTML5 的应用程序中，平滑滚动始终具有挑战性。 有第三方库可用于实现平滑滚动，但实现非常复杂。 在这个滚动库中，用户只需要在可滚动分区中添加scrollable=true属性，然后该 div 就会像原生滚动条一样滚动。 请先阅读 readme.doc 文件以开始处理

图书馆链接

http://github.com/ashvin777/html5

优点：
1 无需手动创建滚动条 object。
2 如果滚动条中的任何数据发生更改，滚动条将自动刷新。
3 因此无需手动刷新。
4 嵌套滚动内容也可能没有双重滚动问题。
5 适用于所有 webkit 引擎。
6 如果用户想要访问该滚动条 object，那么他可以通过编写“SElement.scrollable_wrapper”来访问它。 scrollable_wrapper 是在 html 页面中定义的可滚动分区的 id。

Answer 2

我建议您首先使用解析的 rss 填充#feedResults，并在完成此操作后启动 iScroll。 不要同时启动两者，也不要像 Matteo 在 iScroll4 文档中所说的那样在没有 setTimeout 的情况下使用 refresh() 。

考虑到代表 onComplete 之后的 function()，请尝试以下操作：

var scroll;
function loaded() {
    $('#feedResults').rssfeed('<feedurl>', {<options>}, function() { 
        scroll = new iScroll('appBody');
    });
}
document.addEventListener('touchmove', function (e) { e.preventDefault();}, false);
document.addEventListener('DOMContentLoaded', loaded, false);

我认为这会给 DOM 时间让你的 rss 放在上面，然后 iscroll 将计算整个包装器的正确高度（在这种情况下为 appBody）。

Answer 3

我只是遇到了完全相同的问题。 我的解决方案是添加 position: absolute; 到包装器内的元素，在您的情况下，您需要添加 position: absolute; 喂结果。