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;

Answer 3

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

Answer 4

I think you have to fix the content when the panel is open

to check if the panel is open , u have this class added to BODY .ui-panel.ui-panel-open

You have to set position : fixed !important; to the .ui-panel-wrapper under the .ui-panel.ui-panel-open

Answer 5

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/