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

[datoxxl]

I've something, that may help:
https://forum.jquery.com/topic/implementation-of-panel-only-and-content-only-scroll-with-fixed-header

[dt1973]

What's the status of overflow / momentum scrolling in 2015? Doesn't majority of mobile users now use modern touch devices that support this?

[kallekoivisto]

What about in 2016? The feature would be very super welcome. :)

[jeremydenoun]

In 2016 mobile browser support position:fixed much better than before.

For my side I remove old mobile compatibility and for locking content scroll I add transparent full screen div fixed before open menu (and remove on close) and this work perfectly.

Good luck

JD (iPhone)

Le 27 sept. 2016 à 23:43, Kalle Koivisto [email protected] a écrit :

What about in 2016?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[kallekoivisto]

@jeremydenoun thanks for the idea. Any chance you could clarify it with a short code snippet as an example? Cheers!

[jeremydenoun]

https://fiddle.jshell.net/gmfzbnx6/5

work correctly on desktop and ios 10 safari