Jquery 移动对话框不随动态内容滚动答案

【问题标题】：Jquery mobile dialog doesn't scroll with dynamic contentJquery 移动对话框不随动态内容滚动
【发布时间】：2012-11-25 21:44:02
【问题描述】：

当我向 jQuery 移动对话框动态添加内容时，新内容超出了手机屏幕的底部边缘，我无法向下滚动对话框以查看新内容。但是，当我旋转我的设备以强制重绘屏幕上的任何内容时，向下滚动可以正常工作。

我在对话框元素和对话框内附加新内容的元素上尝试了 .page() 和 .trigger('create') - 不能解决问题。

如何更新我的对话框，以便在添加到其中的所有内容上滚动？

我正在使用 Jquery mobile 1.2.0、Phonegap 2.2.0、Android 4.0。

谢谢。

【问题讨论】：

我最终在我的对话框中使用了一个 jquery 移动列表视图。向其中添加动态内容适用于滚动。但我还没有弄清楚如何让其他类型的动态内容（例如
）在 JQM 对话框中正常工作。

【解决方案1】：

当您旋转屏幕时，使滚动开始起作用的不是重绘。 jQuery mobile 有一个窗口调整大小事件，它以像素为单位设置页面大小，这有时会导致大小在错误的时间发生变化。在大多数情况下，您可以在 css 中使用 !important 规则覆盖它。

如果您不想深入研究 jQuery 移动内部，一个更简单的选择可能是在对话框中放置一个固定大小的容器并在其上设置溢出：自动，这样对话框本身就不需要滚动。

【讨论】：

我不能使用固定大小的容器，因为我不知道对话框的绝对大小，而且我也不太热衷于使用 CSS 解决方法。此外，对话框应该是可滚动的，而不依赖于其内容的样式。对于第一次动态更新时添加的内容，它可以很好地滚动。仅在尝试再次更新时才会出现该错误。
在尝试让移动应用程序看起来完美时，您需要习惯丑陋的变通方法，尤其是在 Android 上。请注意，滚动容器可以相对于对话框而不是绝对固定 - 关键是它是由您的 css 而不是 jqm 对话框设置代码控制的容器。

【解决方案2】：

.trigger('updatelayout') 在 Chrome/webkit 和 iOS 上为我解决了这个问题。

每次添加新内容时都会调用它，例如：

jQuery("#" + id).append(paragraph).trigger('updatelayout');

【讨论】：