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?

Barbados

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

Chinese

It always show the scroll bar even it not overflow how can I solve this. – Extracellular

This solution doesn't work for me. If you have main page and panel overflow, both will scroll. – Hennery

Make sure to add an element with class 'ui-panel-inner', cause thats not inserted by default – Amphibious

I am using this, but unfortunately this will make the panel "bounce" when scrolling down. – Alius

I know this is old a.f. but it works perfectly when you do overflow=auto instead of scroll always. it will appear when necessary and also re-scale & position the content which's place it may take. ||| Maybe this will be usefu for someone – Tibiotarsus

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;

Isolate

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

Saccharine

I believe this solves the opposite problem — scrolling the page while fixing the panel. – Lastly

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

Swabber

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/

Michelsen