弹出菜单滚动与 jquerymobile 中的页面答案

【问题标题】：Popup menu scroll with the page in jquerymobile弹出菜单滚动与 jquerymobile 中的页面
【发布时间】：2013-07-03 07:41:48
【问题描述】：

我在我的应用程序中创建了一个弹出菜单，问题是当我打开弹出菜单然后滚动页面时，即使我尝试使用 data-dismissible="false"，弹出菜单也会随着页面向上滚动，但没有仍然发生问题仍然存在。提前致谢。

【问题讨论】：

标签： android jquery-mobile cordova-2.0.0

【解决方案1】：

这个问题有一个简单的解决方法。只是在弹出窗口处于活动状态时防止页面滚动。

工作jsFiddle示例：http://jsfiddle.net/Gajotres/aJChc/

为此，弹出窗口需要有一个属性：data-dismissible="false"，当在弹出窗口外部单击时，它将防止弹出窗口关闭。可以使用另一个属性：data-overlay-theme="a"，它将为弹出覆盖 div 着色。那是一个 DIV，它在弹出窗口打开时覆盖屏幕并防止弹出窗口关闭。

这个 javascript 将适用于所有可能的弹出窗口：

$(document).on('popupafteropen', '[data-role="popup"]' ,function( event, ui ) {
    $('body').css('overflow','hidden');
}).on('popupafterclose', '[data-role="popup"]' ,function( event, ui ) {
    $('body').css('overflow','auto');
});

【讨论】：

谢谢，我在 HTC 设备上运行此应用程序时还有一个问题，但它无法正常运行，但当我在三星上运行时，它运行良好，这是 ma 问题的链接stackoverflow.com/q/17439797/2307391

【解决方案2】：

对我来说，这种方法不起作用，它适用于浏览器，但不适用于 Phone Gap 应用程序。所以我是这样解决的：

$('#Popup-id').on({
   popupbeforeposition: function(){
      $('body').on('touchmove', false);
   },
   popupafterclose: function(){
      $('body').off('touchmove'); 
  }
});

希望对你有帮助！

【讨论】：

【解决方案3】：

如果没有阻止正文滚动，请尝试以下操作。就我而言，我使用的是boilerplate.css，因此阻止正文滚动不起作用。

 popupafteropen: function (e) {
               $('html').css('overflow', 'hidden');
            },
            popupafterclose: function (e) {
                $('html').css('overflow', 'auto');              
            }

【讨论】：