我正在使用带有 iScrollview 小部件插件的 jQuery Mobile 和 iScroll。我的目的是将页眉和页脚设置为固定位置,并让 iScroll 处理两者之间的所有内容的滚动。
所以我有这样的事情:
<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>
我的问题是,当页面最初显示时,内容并没有一直延伸到页脚。我可以在 Firebug 中看到我的桌面浏览器上的 data-iscroll div 高度设置为 759px。它应该是 865 像素。不同之处在于 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。出现一些错误,其他错误不会调整大小和刷新滚动条。
我的问题是:如果滚动区域在方向改变时自行纠正,我如何在每次显示页面时强制它自行纠正?