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

Question

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

为了给我的头痛提供一些背景 - 我们的应用程序有3个主面板 - 用户可以向左或向右滑动以显示包含通知/设置的第一个和第三个面板(如在Facebook应用程序中.所有3个外部面板都是固定位置.

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

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

有什么建议？

Answer 1

滚动分区

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,而是反弹整个页面并显示浏览器镶边.这是你需要一个javascript修复的地方.

请尝试此示例以获取可滚动性.