3

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

现在这是我遇到麻烦的地方，虽然 css overflow-y 属性在 iOS 设备上运行良好，但 Android 给我带来了一些麻烦。虽然用户可以滚动面板以查看隐藏的内容，但实际内容 div ( div data-role="content) 也会滚动。因此，如果我必须在面板中滚动到 10 个项目，则主要内容 div 也会滚动到最后。
这是演示的链接
如果您在 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'});
  });
});
4

1 回答 1

2

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

演示

.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'
    });
});
于 2013-10-01T20:50:44.870 回答