与内容分开滚动 JQuery Mobile 面板 [英] Scroll JQuery Mobile Panel Separately From Content

问题描述

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

I'm working on an HTML 5 mobile app using JQuery Mobile. The design calls for a sidebar menu that can scroll independently of the main content, so for example you could scroll somewhere on the page, open the menu and scroll within that menu without the page contents scrolling.

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

To implement the menu, JQuery Mobile slide panels were an obvious choice. However, I haven't been able to get them to scroll separately from the content.

我试过使用 iScroll 4 和不使用 iScrollView 插件来滚动 JQuery Mobile 滑动面板，但是滚动在面板中不起作用，只能在页面内容中的元素上起作用.面板的内容可以推拉，但会弹回其起始位置(橡皮筋"效果).

I've tried using iScroll 4 with and without the iScrollView plugin to scroll a JQuery Mobile slide panel, but the scrolling does not work in the panel, only on elements in the page content. The panel's contents can be pushed and pulled, but will snap back to its starting position (the "rubber band" effect).

我也尝试使用 jScroll 来定位由JQuery 移动版(.ui-panel-inner")，但结果相同.

I've also tried using jScroll to target the div that is created by JQuery mobile (".ui-panel-inner"), but that had the same results.

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

Calling refresh() on the iScroll object after showing the panel also did not work.

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

I'm about to forget about using the built in JQuery Mobile slide panels in order to make this work, does anyone know of a solution to scroll a JQuery Mobile panel independently from the content div?

推荐答案

这也让我发疯.我在这个论坛回复

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

Add this CSS after the JQueryMobile stylesheet:

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

这篇关于与内容分开滚动 JQuery Mobile 面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！