jquery-mobile：如何使页面具有两个独立的可滚动区域

Question

我正在使用jquery-mobile，并希望将页面分成两个区域：列表和详细信息。所以我用两列网格来做。但有时列表或/和细节区域对于屏幕来说太长了，我想要对这两个区域进行独立滚动，最好使用jquery-tools，这样滚动一个区域不会影响另一个区域。

有没有人有想法？

Answer 1

解决方案1 ​​

直接在data-role="content"下创建内容div data-role="page。设置max-height值和overflow-y: scroll;。

.ui-content {
  max-height: 150px !important;
  overflow-y: scroll;
}

  

<强> Demo

解决方案2

在主要内容div data-role="content"内，添加内容div并覆盖其max-height和overlfow-y，而不是父内容div。

.ui-content .ui-content {
  max-height: 150px !important;
  overflow-y: scroll;
}

  

<强> Demo