javascript - 没有固定高度的 iOS div 动量滚动(通过 ajax 加载的内容)？

Question

我正在创建一个 iOS 网络应用程序，它具有固定的 div(比如 200px 高度)和滚动条中的内容。我不喜欢默认的 iOS 滚动，因为它不像你通过向下滑动网页找到的 native 滚动(iOS 中的 native 滚动有动力，而 overflow 的默认滚动没有势头)。

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

1. 设置宽度
2. 动态高度(通过 AJAX 的内容)

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

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

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

还有这些问题:

1. 这是我的第一选择，因为它只是一个 css 标签，而且通常工作正常。它虽然是新的，但有很多错误，包括我的网络应用程序的交易破坏者。如果您关注 input 元素，页面会放大(即使 meta 标签设置为 user-scalable:no) 并且直到您在文本框中键入文本后才会缩小，然后所有内容都会关闭 3px。
2. 这个解决方案是滞后的，高度需要固定。使用它的刷新功能太麻烦了，因为需要在重新加载 AJAX 请求、重新加载页面、是否隐藏元素等时调用它。

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

Answer 1

我目前为克服动态高度问题所做的工作是在 DOM 更新后设置高度。我使用以下代码执行此操作:

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

在此示例中，主 DIV 是“内容”，我在该 DIV 正上方有一个名为加载的跨度，它用作引用点，因为 header 的大小会根据您所在的 Web 应用程序的哪个部分而变化。下面是 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 以来缩放已得到修复。