没有固定高度的iOS div动量滚动（通过ajax加载的内容）？答案

【问题标题】：iOS div momentum scrolling without fixed height (content loaded via ajax)?没有固定高度的iOS div动量滚动（通过ajax加载的内容）？
【发布时间】：2012-02-08 05:35:18
【问题描述】：

我正在创建一个 iOS 网络应用程序，它有一个固定的 div（比如 200px 高度）并且里面的内容可以滚动。我不喜欢默认的 iOS 滚动，因为它不像您通过向下滑动网页找到的本机滚动（iOS 中的本机滚动有动力，而 overflow 的默认滚动没有动力）。

我尝试滚动的div 具有以下特性：

设置宽度
动态高度（内容通过 AJAX）

使用 jQuery AJAX 将内容从外部网站加载到 div 中，并且可以选择重新加载 AJAX 请求。这意味着，根据加载页面中的内容量，div 的高度会发生变化。

在div 没有设置的 iOS 中，我似乎找不到任何允许动量滚动的解决方案，我尝试了以下方法：

- webkit-overflow-scrolling: touch
iScroll

还有这些问题：

这是我的第一选择，因为它只是一个css 标签，通常工作正常。虽然它是新的并且有很多错误，包括我的网络应用程序的交易破坏者。如果您在input 元素上focus，页面会放大（即使meta 标记设置为user-scalable:no）并且在您在文本框中键入文本之前不会缩小，然后一切都关闭3px。
此解决方案滞后，需要固定高度。使用它的刷新功能太麻烦了，需要在AJAX请求重载、页面重载、元素是否隐藏等情况下调用。

TL;DR：除了-webkit-overflow-scrolling 和iScroll 之外，还有其他解决方案可以让我在 iOS 中使用动态高度（通过 AJAX 加载的内容）的 div 上的动量滚动吗？强>

【问题讨论】：

标签： javascript css ios jquery

【解决方案1】：

我目前解决动态高度问题的方法是在 DOM 更新后设置高度。我使用以下代码来做到这一点：

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

在这个例子中，主 DIV 是“内容”，我在该 DIV 上方有一个称为 loading 的跨度，它用作参考点，因为标题的大小会根据您所在的 webapp 的哪个部分而变化。下面是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];};

此外，我相信自 iOS 5.0.1 以来缩放已修复。

【讨论】：