jQuery Mobile面板随内容滚动

Question

jQuery Mobile面板随内容滚动

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

- mhartington

3

试试这个：http://jsfiddle.net/Palestinian/pHtxe/2/ - Omar

它在我的电脑上可以运行，但是当我编译所有内容并将其放到手机上时，它就无法工作。我开始认为这可能是一个Android问题。 - mhartington

1

Omar，你的解决方案现在在Android上可用了。我这边的标记有一个错误，导致结构中断。请留下答案，以便我将其标记为正确。 - mhartington

很高兴它对你起作用了 :) - Omar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Omar · Accepted Answer

将您的内容放在面板内的div中，并为其设置一个类，例如inside。然后为面板#panel_id或.ui-panel设置overflow: hidden;。对于内部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'
    });
});