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 でラップし、クラス ie を指定し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 に答える