使用 iScroll 在 iOS 中的 Web 应用程序中滚动答案

【问题标题】：Scrolling in web application in iOS with iScroll使用 iScroll 在 iOS 中的 Web 应用程序中滚动
【发布时间】：2011-08-12 16:59:52
【问题描述】：

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

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

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

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

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

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

谢谢大家。

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

网络资料的基本结构：

....
<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);

【问题讨论】：

标签： javascript ios web-applications

【解决方案1】：

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

考虑到 function() 后代表 onComplete，试试这样：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

库链接

http://github.com/ashvin777/html5

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

【讨论】：