Make panel and page content scroll independently

[jeremydenoun]

Hi,

This is a feature request and implementation proposal :

You have implemented nice panel (:+1:) but with a simple support of overflow... for obtain a Facebook Panel menu more realistic display when we openning panel, the panel and the panel content should fix to max window height, the panel content should overflow hidden and panel should overflow auto...

I try implementation proposal and it's work on Android/iOS 5-6/Web

$(document).bind('panelbeforeclose', function(e, data) {
    $(".ui-panel").scrollTop(0);
});

$(document).bind('panelbeforeopen', function(e, data) {
    top_pos = $(document).scrollTop();
    $(".ui-panel").css("top", top_pos);
});

$(document).bind('panelopen', function(e, data) {
    top_pos = $(document).scrollTop();

    if ((iOS && iOS <= 5.01)) {
        $(".ui-panel").css("overflow", "scroll");
        $(".ui-panel").css("-webkit-overflow-scrolling", "auto");
    } else {
        $(".ui-panel").css("overflow", "scroll");
        $(".ui-panel").css("-webkit-overflow-scrolling", "touch");
    }
    $(".ui-panel").height($(window).height() - $('.ui-page-active header').height());
    $(".ui-panel").css("top", 0);
    $(".ui-panel-content-wrap-open").css("overflow", "hidden");
    $(".ui-panel-content-wrap-open").height($(window).height() - $('.ui-page-active header').height());
    $(".ui-panel-content-wrap-open").scrollTop(top_pos);
    $(document).scrollTop(0);
});

$(document).bind('panelclose', function(e, data) {
    top_pos = $(".ui-panel-content-wrap-closed").scrollTop();
    $(".ui-panel").height('auto');
    $(".ui-panel-content-wrap-closed").height("auto");
    $(".ui-panel-content-wrap-closed").css("overflow", "auto");
    $(document).scrollTop(top_pos);
});

improvement possible :

• Header toolbar fixed effect
• Support Fixed Footer
• add swipe gesture support (opening and closing)
• support a global panel (without needed to add to each page)

Best

[arschmitz]

Thank you for the suggestion. Sadly at this time support for overflow on mobile browsers is very inconsistant and buggy which makes this impossible for us to do at the current time. We are looking into a way to do scrolling regions in the future and hoping support improves. There is already a feature request open for this so im going to close this. Thank you though for your suggestions.

[jaspermdegroot]

Going to use this ticket for panel overflow scrolling because it's more specific that the other ticket (#5449).
Changed the title. Original title "Panel Facebook Style Overflow".

[skchandail]

Sorry not workin can you please suggest where i can put this JS? Currently i am using this one of my JS file.

[jonas-db]

An interesting library we can possibly use is the following: http://filamentgroup.github.io/Overthrow

[RajeshKondapally]

where can i add this code to work for me....please help me asap.

[xb1itz]

Any news on this issue? It is still closed although used as feature request...

[RajeshKondapally]

We fixed this issue with following code. it may helps you.

html:
div align="center" data-role="panel" id="right-panel" style="overflow-y: scroll" data-display="overlay" data-position="right" data-theme="c">
div class="panel-wrapper">
"Your content here"

css:
.ui-panel {
width: 8em;
min-height: 100%;
max-height: none;
border-width: 0;
position: fixed;
top: 0;
display: block;
}

.panel-wrapper {
height: 760px;
right: 0;
}

.panel-wrapper div {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

hope it helps you...:)