android - Jquery Mobile 面板随内容滚动

Question

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

现在这里是我遇到麻烦的地方，虽然 css overflow-y 属性在 iOS 设备上工作正常，但 Android 给我带来了一些麻烦。当用户能够滚动面板以查看隐藏内容时，实际内容 div (div data-role="content) 也会滚动。所以如果我有 10 个元素我必须滚动到面板，主要内容 div 也会滚动，直到我到达末尾。
Heres a link to a demo
如果您在 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'});
  });
});

Answer 1

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

Demo

.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'
    });
});