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

Answer 1

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

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

Answer 3

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

Answer 4

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)