Jquery Mobile 面板随内容滚动

使用 Jquery Mobile，我有一个面板 div 来创建导航系统并将其高度设置为浏览器的 100%。如果内容超出面板的高度，则 css Overflow-y 属性可让用户滚动查看隐藏的内容。很简单吧？

现在我遇到了一些麻烦，虽然 css Overflow-y 属性在 iOS 设备上工作正常，但 Android 却给我带来了一些麻烦。虽然用户可以滚动面板来查看隐藏内容，但实际内容 div (div data-role="content）也滚动。因此，如果我必须在面板中滚动到 10 个项目，则主要内容 div 也会滚动，直到到达末尾。
这是演示的链接 http://jsfiddle.net/pHtxe/1/
如果您在 Android 设备上查看此内容，您就会看到我正在讨论的问题。我想知道这是 Android、Jquery 还是其他问题。我使用的是 Android 4.1、JQM 1.3.2 和 Jquery 1.9.1

CSS

.ui-panel { overflow-y:scroll; }

JS（用于设置面板的高度）

$(function(){
  $('.ui-panel').css({'height':($(document).height())+'px'});
  $(window).resize(function(){
    $('.ui-panel').css({'height':($(document).height())+'px'});
  });
});

用 div 将您的内容包裹在面板内，并给它一个类，即inside。然后设置overflow: hidden;对于面板#panel_id or .ui- panel。对于内部 div，设置overflow-y: scroll;.

Demo http://jsfiddle.net/Palestinian/pHtxe/2/

.ui-panel {
  overflow: hidden;
}

.inside {
  overflow-y: scroll;
}

现在是 JS 部分。调整.inside高度不是面板的高度。

$('.inside').css({
    'height': ($(document).height()) + 'px'
});

$(window).resize(function () {
    $('.inside').css({
        'height': ($(document).height()) + 'px'
    });
});