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

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

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