iScrollview ウィジェット プラグインを使用して、jQuery Mobile と iScroll を使用しています。私の意図は、ヘッダーとフッターを固定位置に設定し、iScroll が 2 つの間のすべてのコンテンツのスクロールを処理することです。
だから私はこのようなものを持っています:
<div data-role="header" data-position="fixed" data-fullscreen="false" data-id="hdr" data-theme="c" data-visible-on-page-show="true" data-tap-toggle="false" data-transition="none">
...
</div>
<div id="content" data-role="content" data-theme="c" data-iscroll class="scroll-wrapper">
...
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="false" data-id="ftr" data-visible-on-page-show="true" data-tap-toggle="false" data-transition="none" data-theme="c" class="ui-bar">
...
</div>
私の問題は、ページが最初に表示されるときに、コンテンツがフッターまで拡張されないことです。デスクトップ ブラウザで data-iscroll div の高さが 759px に設定されていることを Firebug で確認できます。865px である必要があります。違いは、正確には 53px のヘッダーと 53px のフッターです。つまり、iScroll はヘッダーとフッターの高さが iscroll-data div の外にあるにもかかわらず考慮しています。
向きを変更すると、iscroll div のサイズが完全な高さに正しく変更されます。
これを pageinit に追加すると、最初のページは正しく表示されますが、後続のページは正しく表示されません。
$( document ).on( 'pageinit', ['.cover-story-page', '.notes-page'], function() {
$(".scroll-wrapper").data("mobileIscrollview").resizeWrapper();
$(".scroll-wrapper").data("mobileIscrollview").refresh();
});
pagebeforecreate、pagecreate、pageinit、pagebeforeshow、pagebeforehide、pageshow pagehide、pagebeforechange、pagechange、pagechangefailed を試しました。一部のエラーが発生し、他のエラーはスクローラーのサイズ変更と更新を行いません。
私の質問は次のとおりです:スクロール領域が向きの変更でそれ自体を修正する場合、ページが表示されるたびにそれを強制的に修正するにはどうすればよいですか?