16

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

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

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

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

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

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

4

5 回答 5

23

这也让我发疯。我在这个论坛回复中使用了解决方案

在 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;
    }
于 2013-06-19T17:30:50.897 回答
8 
  .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;
于 2013-10-31T08:42:03.333 回答
4

I have similar case with you. I need a static menu at the left-side panel. I don't want the panel, scrolling.

Then, i use data-position-fixed="true".

于 2013-05-28T08:10:02.620 回答
0

Please refer my solution using dynamic css settings triggered with panelbeforeopen/panelbeforeclose using the above stylesheet for inner panel.

$(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/

Sticked footer update:

http://jsfiddle.net/u92m7u2n/

于 2014-11-12T12:10:56.853 回答
0

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

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

你必须设置位置：fixed !important; 到 .ui-panel.ui-panel-open 下的 .ui-panel-wrapper

于 2014-08-06T09:36:01.463 回答