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

Posted 2023-03-15

【中文标题】在 HTML5 phonegap IOS 应用程序中创建滚动 Div - 没有高度

【英文标题】：Create a scrolling Div within HTML5 phonegap IOS app - without height

【发布时间】：2012-12-03 10:50:19

【问题描述】：

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

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

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

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

有什么建议吗？

【参考方案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 的可滚动性。

【讨论】：

这比其他答案好得多，它甚至在 jquery 移动对话框中都不起作用。

好的，所以如果我有两个相邻的具有滚动内容的 div，我该如何做到这一点，以便如果用户只执行“滚动到顶部”操作（点击状态栏）他们点击的一侧下方的 div 滚动到顶部？

【参考方案2】：

请看this Link

iScroll 是一个有助于良好滚动的派对库。

它有一个不提供高度的滚动。 我们只需要在添加滚动的dom元素时调用refresh方法即可。