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