Question

I am creating an iOS web app that has a fixed div (say 200px height) and the content inside of that scrolls. I don’t like the default iOS scrolling, as it’s not like the native scrolling you find by just swiping down through a webpage (the native scrolling in iOS has momentum, while the default one for overflow is without momentum).

The div I am trying to scroll in has the following qualities:

1. Set width
2. Dynamic height (content via AJAX)

The content is loaded from an external website into a div using jQuery AJAX, and there is an option to reload the AJAX request. This means that, depending on the amount of content in the loaded page, the height of the div will change.

I can’t seem to find any solutions that allow momentum scrolling in iOS where the div doesn’t have a set with, and I’ve tried the following:

1. - webkit-overflow-scrolling: touch
2. iScroll

And the problems with these:

1. This was my first choice, as it’s just a css tag and usually works fine. It’s new though and has a lot of bugs, including a deal breaker one for my web app. If you focus on an input element, the page zooms in (even with the meta tag set to user-scalable:no) and doesn’t zoom out until you type text in the text box, and then everything is off by 3px.
2. This solution is laggy and the height needs to be fixed. Using it’s refresh function is too cumbersome as it needs to be called when the AJAX request is reloaded, when the page is reloaded, if elements are hidden, etc.

TL;DR: Are there any solutions other than -webkit-overflow-scrolling and iScroll that will allow me to use momentum scrolling on a div with a dynamic height (content loaded in via AJAX) in iOS?

Answer 1

What I currently do to overcome the dynamic height issue is setting the height after the DOM is updated. I do this by using the following code:

document.getElementById('content').style.height = window.innerHeight - getPosition('loading')[1] + "px";

In this example the main DIV is ‘content’ and I have a span right above that DIV called loading which it uses as a reference point since the header changes in size depending on what part of the webapp you are on. Below is the getPosition function:

function getPosition(who){
var e = document.getElementById(who);
var position = {x:0,y:0};
while (e) {
    position.x += e.offsetLeft;
    position.y += e.offsetTop;
    e = e.offsetParent;
}
return [position.x , position.y];};

Additionally, I believe the zoom has been fixed since iOS 5.0.1.