jquery-mobile - 与内容分开滚动 JQuery Mobile 面板

Question

我正在使用 JQuery Mobile 开发 HTML 5 移动应用程序。该设计需要一个可以独立于主要内容滚动的侧边栏菜单，例如，您可以滚动页面上的某个位置，打开菜单并在该菜单内滚动，而页面内容不会滚动。

为了实现菜单，JQuery Mobile 滑动面板是一个明显的选择。但是，我无法让它们与内容分开滚动。

我试过在有和没有 iScrollView 的情况下使用 iScroll 4用于滚动 JQuery Mobile 滑动面板的插件，但滚动在面板中不起作用，仅适用于页面内容中的元素。面板的内容可以被推拉，但会弹回其起始位置(“橡皮筋”效果)。

我也试过使用 jScroll定位由 JQuery mobile (".ui-panel-inner") 创建的 div，但结果相同。

调用 refresh()在显示面板后的 iScroll 对象上也不起作用。

我即将忘记使用内置的 JQuery Mobile 滑动面板来完成这项工作，有没有人知道独立于内容 div 滚动 JQuery Mobile 面板的解决方案？

Answer 1

这也让我发疯。我在 this forum response 上使用了解决方案

在 JQueryMobile 样式表之后添加此 CSS:

    .ui-panel.ui-panel-open {
        position:fixed;
    }
    .ui-panel-inner {
        position: absolute;
        top: 1px;
        left: 0;
        right: 0;
        bottom: 0px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }