2

我不希望用户在任何侧栏打开时滚动。一旦关闭，他们应该滚动。

我使用了下面的代码，但它不适用于 android 移动设备

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

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

4 回答 4

10

该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函数绑定到touchmovebody的事件。

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

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

Here's the code at JSBin

于 2013-08-03T13:46:08.973 回答
2

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

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

你能试试吗？它可以使用该on()方法而不是旧bind()方法来工作。此外，也许您可​​以将溢出更改绑定到 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. 这样可行。

于 2013-07-30T12:47:12.930 回答
1

只需使用：

$('#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');
    }
});
于 2014-01-29T19:46:14.843 回答
0

添加这个 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"

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

于 2014-12-18T15:45:29.007 回答