Scroll JQuery Mobile Panel Separately From Content

Question

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.

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.

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).

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.

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

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?

Answer 1

This was driving me crazy as well. I used the solution on this forum response

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

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

This is the solution provided by Alison Tinker. To prevent the Scroll from showing when there is nothing to scroll, change;

overflow: scroll;

to

overflow: auto;