jQuery Mobile的 - 当侧板被关闭只允许滚动？ [英] jQuery mobile - allow scrolling only when side panel is closed?

问题描述

我不希望用户滚动，当任何一方酒吧是开放的。他们应该滚动一旦关闭。

我已经低于code使用，但它不是工作的Andr​​oid移动设备

 的$（document）.bind（'panelopen'，函数（即数据）{
        $（身体）的CSS（溢出，隐藏）。
    }）;    （文档）$ .bind（'panelclose'，函数（即数据）{
        $（身体）的CSS（溢出，自动）。
    }）;
 

解决方案

的溢选项从来没有为我工作。我不得不依靠体的 touchmove 事件。我改变了你的 pageinit 事件这样的：

 的$（document）。在（pageinit，＃第1页功能（事件）{    $（＃defaultpanel）。在（panelopen功能（事件，UI）{
        //设置溢出：隐藏和具有约束力的touchmove与事件，返回false
        $（身体）的CSS（溢出，隐藏）上（touchmove，stopScroll）。
    }）;    $（＃defaultpanel）。在（panelclose功能（事件，UI）{
        //删除溢出：隐藏属性。此外，去掉touchmove事件。
        $（身体）的CSS（溢出，自动）关闭（touchmove）。;
    }）;    功能stopScroll（）{
        返回false;
    }
}）;
 

在面板打开所以，当在溢属性更改，之后 touchmove 事件势必体。在 stopScroll 功能，其中价值我们的触摸屏的对$ pvents默认动作，势必对身体的 touchmove 事件

在面板关闭时，你必须取消绑定的 touchmove 事件从身体来恢复您的滚动。

工程于银河S3，的Xperia S，的Nexus 4手机和Nexus 7平板电脑。

<大骨节病> 这里是在JSBin的code

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

这篇关于jQuery Mobile的 - 当侧板被关闭只允许滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！