Question

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

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

我尝试使用带有和不带iScrollView插件的iScroll 4来滚动JQuery Mobile幻灯片面板，但滚动在面板中不起作用，仅在页面内容中的元素上。面板的内容可以被推拉，但会弹回到它的起始位置（“橡皮筋”效果）。

我也尝试使用jScroll来定位由JQuery mobile创建的div（“.ui-panel-inner”），但结果相同。

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

我将忘记使用内置的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;
    }

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提供的解决方案。要防止在无法滚动时显示滚动，请更改;

overflow: scroll;

到

overflow: auto;

Answer 3

我和你有类似的情况。我需要左侧面板上的静态菜单。我不想要面板，滚动。

然后，我使用data-position-fixed="true"。

Answer 4

我认为您必须在面板打开时修复内容

检查面板是否打开，将此类添加到BODY .ui-panel.ui-panel-open

你必须设置位置：固定！重要;到.ui-panel.ui-panel-open

下的.ui-panel-wrapper

Answer 5

请使用上面的内部面板样式表，使用由panelbeforeopen / panelbeforeclose触发的动态css设置来参考我的解决方案。

$(document).on("panelbeforeopen", "#panel", function () { $(".ui-panel").css({ "overflow": "hidden" }); $(".ui-content").css({ "overflow": "hidden", "position": "fixed" }); }).on("panelbeforeclose", "#panel", function () { $(".ui-panel").css({ "overflow": "hidden" }); $(".ui-content").css({ "overflow": "scroll", "position": "absolute" }); });

http://jsfiddle.net/ohxdtwga/

粘贴页脚更新：

http://jsfiddle.net/u92m7u2n/

从内容中单独滚动JQuery Mobile Panel

5 个答案: