jQuery mobile - allow scrolling only when side panel is closed?

Question

I don't want user to scroll when any side bar is open. They should scroll once it closed.

I've use below code but its not working on android mobile device

$(document).bind('panelopen', function (e, data) {     
        $('body').css("overflow", "hidden");
    });

    $(document).bind('panelclose', function (e, data) {         
        $('body').css("overflow", "auto");
    });

@shanabus means when side panel is open it is scrolling. it should not be scroll. — Viral Solani, Jul 30 '13 at 12:54

krishwader · Accepted Answer · 2015-03-16T08:07:26.370

The overflow option never worked for me. I had to rely on the touchmove event of the body. I changed your pageinit event to this :

$(document).on("pageinit", "#page1", function (event) {   

    $("#defaultpanel").on("panelopen", function (event, ui) { 
        //setting overflow : hidden and binding "touchmove" with event which returns false
        $('body').css("overflow", "hidden").on("touchmove", stopScroll);
    });

    $("#defaultpanel").on("panelclose", function (event, ui) {
        //remove the overflow: hidden property. Also, remove the "touchmove" event. 
        $('body').css("overflow", "auto").off("touchmove");
    });

    function stopScroll() {
        return false;
    }    
});

So when the panel opens, the overflow property is changed, after which the touchmove event is bound to body. The stopScroll function, which prevents default action of our touch screen, is bound to the touchmove event of body.

When the panel closes, you'll have to unbind that touchmove event from body to restore your scroll.

Works on Galaxy S3, Xperia S, Nexus 4 phones and Nexus 7 tablet.

Here's the code at JSBin

Is there a way to apply this to the content behind the panel only? As it is here is is stopping the panel and the content behind it from scrolling but I want the panel to be able to scroll while the background scrolling is disabled. I have tried to change 'body' to 'content' and to the id of the div my content is within but it doesn't work. — Donal Rafferty, May 13 '14 at 11:21
To add to this I mean it doesn't work on mobile devices, it seems to on a desktop browser. — Donal Rafferty, May 13 '14 at 12:21

shanabus · Answer 2 · 2013-07-30T13:26:23.113

2

The latest jQuery Mobile API docs say to use

$( ".selector" ).on( "panelopen", function( event, ui ) {} );

Could you try that? It may work using the on() method instead of the older bind() approach. Also, perhaps you could bind the overlflow change to a child of body instead of the body element. Its hard to give a more specific solution without seeing more of your code.

http://api.jquerymobile.com/panel/#event-open

UPDATE

Here is a link to the jsbin with working solution: http://jsbin.com/azavup/2/

The exact JS used is below:

$( document ).on( "pageinit", "#page1", function( event ) {

  $( "#defaultpanel" ).on( "panelopen", function( event, ui ) {
    //console.log("i am open");
    $('body').css("overflow", "hidden");
  } );

  $( "#defaultpanel" ).on( "panelclose", function( event, ui ) {
    //console.log("i am close");
    $('body').css("overflow", "auto");
  } );

});

So maybe you just need to change your panelopen/panelclose binding to the actual panel selector, not the document. That works.

edited Jul 30 '13 at 13:26

answered Jul 30 '13 at 12:47

shanabus

12,989
6
52
78

yes I've checked that also.... $( "#sidebar" ).on( "panelbeforeopen", function( event, ui ) { $('html body').css("overflow", "hidden"); });....but its not working – Viral Solani Jul 30 '13 at 12:54
Please see updated answer with working example. Tested in galaxy S3. – shanabus Jul 30 '13 at 13:26
I've implemented like that but it still scrolls. I've tested in micromax canvas 2... – Viral Solani Jul 30 '13 at 13:53
Strange thing is its working on my Desktop. it was also working with previous solution. – Viral Solani Jul 30 '13 at 13:56
Awesome! This lets me use swipe events elsewhere and keep the panel from scrolling. Exactly what I needed. Thanks – stackexchange12 Sep 30 '15 at 20:58

score 1 · Answer 3 · edited Jan 29 '14 at 20:09

1

Simply use:

$('#nav-panel').panel({
    open: function(event, ui) {
        //check the event alert('kpl');
        $('body').bind('touchmove', function(e){e.preventDefault()});
    },
    close: function(event, ui) {
        //check the event alert('kpl1');
        $('body').unbind('touchmove');
    }
});

edited Jan 29 '14 at 20:09

MasterAM

16,283
6
45
66

answered Jan 29 '14 at 19:46

Kapil Chhabra

415
5
7

score 0 · Answer 4 · answered Dec 18 '14 at 15:45

Adding this CSS :

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

and adding this attribute to your element :

data-position-fixed="true"

will fix the problem. (It did for me)

jQuery mobile - allow scrolling only when side panel is closed?

4 Answers4

Linked