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:
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:
- webkit-overflow-scrolling: touch
And the problems with these:
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
. 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?
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.