16

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?

orde
  • 5,233
  • 6
  • 31
  • 33
Kirkpatrick
  • 163
  • 1
  • 1
  • 5

5 Answers5

23

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;
    }
Big Tree Energy
  • 529
  • 4
  • 7
  • It always show the scroll bar even it not overflow how can I solve this. – Jongz Puangput Oct 13 '13 at 15:44
  • This solution doesn't work for me. If you have main page and panel overflow, both will scroll. – HP. Nov 23 '13 at 02:22
  • 3
    Make sure to add an element with class 'ui-panel-inner', cause thats not inserted by default – A F Jan 10 '14 at 20:39
  • I am using this, but unfortunately this will make the panel "bounce" when scrolling down. – Kallewallex Jul 18 '14 at 17:35
  • 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 – ThexBasic Nov 17 '17 at 00:00
8
  .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;
Diamond
  • 608
  • 7
  • 23
4

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

iqbal
  • 41
  • 2
0

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

Mejri Yassine
  • 99
  • 1
  • 8
0

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/

metamagikum
  • 1,307
  • 15
  • 19