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。然后为面板overflow: hidden;或#panel_id设置.ui- panel。对于内部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'
    });
});

Jquery Mobile面板滚动内容

1 个答案: