ios - 在 HTML5 phonegap IOS 应用程序中创建一个滚动 Div - 没有高度

Question

是否可以在高度需要动态的 html5 IOS 应用程序中创建滚动 div？

为了让我头疼一点背景知识——我们的应用程序有 3 个主面板——用户可以向左或向右滑动以显示包含通知/设置的第一个和第三个面板(就像在 Facebook 应用程序中一样。所有 3 个外部面板位置固定。

主面板包含 6 个页面——它们都是绝对定位的 div，它们通过菜单选择隐藏和显示。每个显示的 div(或页面)都需要滚动，但所有内容都是动态的 - 所以我无法设置高度。

我找到了几种固定高度的解决方案 - 但到目前为止还没有找到动态高度的解决方案..

有什么建议吗？

Answer 1

滚动 Div

iOS 5+ 的另一个新特性是 div 终于可以滚动了。要制作 div 滚动，您只需添加以下内容(此示例具有固定的标题，但可以调整位置以适合您的应用):

.scrollable {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

这里的技巧是将 -webkit-overflow-scrolling 添加到您通常设置溢出的任何地方。 Apple 实现的缺点是，当您已经位于绝对顶部或底部时，div 不会像您希望的那样弹跳。它不是弹跳正在滚动的 div，而是弹跳整个页面并显示浏览器 chrome。这是您需要 javascript 修复的地方。

请试试这个example可滚动性。