使用 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; 喂結果。