滚动jQuery Mobile的小组分别从内容(Scroll JQuery Mobile Panel

我正在使用jQuery Mobile的一个HTML 5移动应用程序。 该设计需要一个工具栏菜单，可以独立滚动的主要内容，因此，例如，你可以在网页上滚动的地方，打开菜单和菜单中没有滚动页面内容滚动。

为了实现菜单，jQuery Mobile的滑动板是一个显而易见的选择。 不过，我一直无法让他们与内容分开滚动。

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

我已经使用也试着jScroll目标由jQuery Mobile的（“的.ui用面板内”）创建的格，但有相同的结果。

调用refresh()显示面板也没有工作后iScroll对象。

我对如何使用内置的jQuery Mobile的滑动面板，以使这项工作给忘了，没有人知道一个解决方案，从内容DIV独立滚动一个jQuery Mobile的面板？

Answer 1:

这是推动我疯了也。 我用在解决这个论坛响应

添加这个CSS的样式表JQueryMobile后：

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

这是通过艾利森廷克提供的解决方案。 为了防止滚动时触发没有什么可滚动，更改;

overflow: scroll;

至

overflow: auto;

Answer 3:

我跟你类似的案件。 我需要在左侧面板中的静态菜单。 我不想面板，滚动。

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

Answer 4:

我认为你必须修复内容时​​，面板打开

以检查面板打开，u必须该类增加身体的.ui-panel.ui面板开

你必须设置位置：固定很重要; 到下的.ui用面板包装的.ui-panel.ui面板开

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/

文章来源: Scroll JQuery Mobile Panel Separately From Content