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的{{1}}事件。我将您的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的{{1}}事件才能恢复您的滚动。

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

Here's the code at JSBin

Answer 2

最新的jQuery Mobile API文档说要使用

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

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

http://api.jquerymobile.com/panel/#event-open

<强>更新

以下是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"

将解决问题。（它对我有用）

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

4 个答案: