从内容中单独滚动JQuery Mobile Panel

Question

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

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

我已经尝试使用iScroll 4使用和不使用iScrollView插件滚动JQuery Mobile滑动面板,但滚动在面板中不起作用,仅在页面内容中的元素上.面板的内容可以被推拉,但会弹回到其起始位置("橡皮筋"效果).

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

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

我即将忘记使用内置的JQuery Mobile幻灯片来实现这项功能,有没有人知道一个独立于内容div滚动JQuery Mobile面板的解决方案？

Answer 1

这也让我发疯了.我在这个论坛上使用了解决方案

在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;
    }

Answer 2

  .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;
}

这是Alison Tinker提供的解决方案.要防止Scroll在没有任何内容滚动时显示,请更改;

overflow: scroll;

至

overflow: auto;