Scrolling in web application in iOS with iScroll

Question

I have a few web applications that were previously developed for use in Android apps, and we're trying to port them to iOS.

The first problem was that the ad we had was not staying in place, since position:fixed is no good in mobile Safari. So, I downloaded iScroll.

I figured out that iScroll doesn't play nice with our RSS feed reader (zRSSFeed for jQuery). In fact, when both are enabled on the same page, the iScroll functionality "works", but gets stuck at the top of the page.

I posted to the iScroll user group (https://groups.google.com/group/iscroll/browse_thread/thread/5dd274ff4159a672) but got no useful answers.

I even tried to change to a different RSS library, but it seems they all elicit this issue.

Has anyone had this issue before? Has anyone solved it? Should I just give up and put the ad at the bottom of the webapp, or what?

Thanks, all.

EDIT: I figured I should add in a bit of code.

Basic structure of web stuff:

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

Basic 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

In HTML5 based application, is always challenging.始终具有挑战性。 There are third parties libraries available to implement smooth scroller but there implementation is very complex. In this scroller library, user only need to add attribute in the scrollable division, then that div will scroll like smooth native scroller.属性，然后该 div 就会像原生滚动条一样滚动。 Please read readme.doc file first to start working on it

http://github.com/ashvin777/html5

1 No need the manually create scroller object.
2 Scroller will automatically refreshed in case of any data being changed in the scroller.
3 So no need to refresh manually.
4 Nested Scrolling content also possible with no dual scrolling issue.
5 Works for all webkit engines.
6 In case if user wants to access that scroller object then he can access it by writing “SElement.scrollable_wrapper”. scrollable_wrapper is id of the scrollable division which is defined in the html page.

Answer 2

I would suggest you first populate the #feedResults with your parsed rss and oncomplete of this action, you start the iScroll. Don't start both at same time nor use refresh() without setTimeout like Matteo said in iScroll4 documentation.

Considering the function() after stands for the onComplete, try something like this:

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

I think that will give time to the DOM to have your rss on it and then iscroll will calculate the correct height of your entire wrapper (appBody in this case).

Answer 3

I just had the exact same problem. The solution for me was to add position: absolute; to the element directly inside your wrapper, in your case you would need to add position: absolute; to feedResults.