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

【问题标题】：jQuery mobile - allow scrolling only when side panel is closed?jQuery mobile - 仅在侧面板关闭时允许滚动？
【发布时间】：2013-07-30 11:37:10
【问题描述】：

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

我使用了下面的代码，但它不能在安卓移动设备上运行

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

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

【问题讨论】：

当你说它不工作时，你是什么意思？
@shanabus 表示当侧面板打开时它正在滚动。它不应该是滚动的。

标签： android jquery-mobile jquery-mobile-panel

【解决方案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函数绑定到body的touchmove事件。

当面板关闭时，您必须从body 发送unbind 那个touchmove 事件来恢复您的滚动。

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

Here's the code at JSBin

【讨论】：

有没有办法仅将其应用于面板后面的内容？因为这里是停止面板及其背后的内容滚动，但我希望面板能够在背景滚动被禁用时滚动。我试图将“body”更改为“content”以及我的内容所在的 div 的 id，但它不起作用。
补充一点我的意思是它在移动设备上不起作用，它似乎在桌面浏览器上。

【解决方案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。这行得通。

【讨论】：

是的，我也检查过了.... $( "#sidebar" ).on( "panelbeforeopen", function( event, ui ) { $('html body').css( "overflow", "hidden"); });....但它不起作用
请查看带有工作示例的更新答案。在 Galaxy S3 中测试。
我已经实现了这样，但它仍然滚动。我已经在 micromax canvas 2 中测试过...
奇怪的是它在我的桌面上工作。它也适用于以前的解决方案。
太棒了！这让我可以在其他地方使用滑动事件并防止面板滚动。正是我需要的。谢谢

【解决方案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');
    }
});

【讨论】：

【解决方案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"

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

【讨论】：