jQuery mobile - 仅在侧面板关闭时才允许滚动？

Question

当任何侧栏打开时,我不希望用户滚动.它们应该在关闭时滚动.

我使用下面的代码,但它不适用于Android移动设备

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

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

Answer 1

这个overflow选择从来没有对我有用.我不得不依赖于touchmove事件body.我把你的pageinit活动改成了这个:

$(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;
    }    
});

因此,当面板打开时,overflow属性会更改,然后touchmove绑定事件body.该stopScroll功能可以防止触摸屏的默认操作,它与touchmove身体事件绑定.

当面板关闭时,您将必须从unbind该touchmove事件body恢复您的滚动.

适用于Galaxy S3,Xperia S,Nexus 4手机和Nexus 7平板电脑.

Here's the code at JSBin