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选项对我来说从来都不起作用。我不得不依赖body的touchmove事件。我将您的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事件。

当面板关闭时，您必须从body中unbind该touchmove事件才能恢复滚动。

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

这是JSBin的代码

Answer 2

最新的jQuery Mobile API文档称使用

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

你能试试吗？它可以使用on()方法而不是旧的bind()方法来工作。此外，也许您可以将overflow更改绑定到body的子元素，而不是body元素。如果没有看到更多的代码，很难给出更具体的解决方案。

http://api.jquerymobile.com/panel/#event-打开

更新

这里有一个链接到jsbin和工作解决方案：http://jsbin.com/azavup/2/

使用的确切JS如下：

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

因此，也许您只需要将panelopen/panelclose绑定更改为实际的面板选择器，而不是document。这很管用。

Answer 3

简单使用：

$('#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

添加此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;
}

并将此属性添加到元素中：

data-position-fixed="true"

将解决问题。（对我来说确实如此）