[英]iOS div momentum scrolling without fixed height (content loaded via ajax)?
I am creating an iOS web app that has a fixed div (say 200px
height) and the content inside of that scrolls. 我正在创建一个具有固定div(例如
200px
高度)和其中滚动内容的iOS Web应用。 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). 我不喜欢默认的iOS滚动,因为它不像您通过向下滑动网页即可找到的本机滚动(iOS中的本机滚动具有动量,而
overflow
的默认滚动没有动量)。
The div
I am trying to scroll in has the following qualities: 我尝试滚动的
div
具有以下品质:
The content is loaded from an external website into a div
using jQuery AJAX, and there is an option to reload the AJAX request. 使用jQuery AJAX将内容从外部网站加载到
div
,并且有一个选项可以重新加载AJAX请求。 This means that, depending on the amount of content in the loaded page, the height of the div
will change. 这意味着,根据加载页面中内容的数量,
div
的高度将改变。
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: 我似乎找不到能在没有
div
设置的iOS中进行动量滚动的解决方案,并且我尝试了以下方法:
And the problems with these: 和这些问题:
css
tag and usually works fine. css
标签,通常可以正常工作。 It's new though and has a lot of bugs, including a deal breaker one for my web app. 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
. focus
于input
元素,则页面会放大(即使将meta
标记设置为user-scalable:no
)也不会缩小,直到您在文本框中键入文本,然后所有内容才会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? TL; DR:除了
-webkit-overflow-scrolling
和iScroll
,还有其他解决方案可让我在iOS中以动态高度(通过AJAX加载的内容)在div上使用动量滚动吗?
What I currently do to overcome the dynamic height issue is setting the height after the DOM is updated. 我目前要解决的动态高度问题是在DOM更新后设置高度。 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. 在此示例中,主要DIV为“内容”,我在DIV上方有一个跨距,称为加载,它用作参考点,因为标题的大小会根据您所使用的Web应用程序的哪个部分而变化。 Below is the getPosition function:
下面是getPosition函数:
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. 另外,我认为缩放比例自iOS 5.0.1起已得到修复。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.