更新

Question

我正在使用jQM 1.1-rc1

中提供的新固定标头

页面如下所示

<div data-theme="a" data-role="page" data-title="Home" id="home_page" >
    <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
        <h1>Home</h1>   
    </div>
    <div data-role="content" id="categories_content">
        <ul data-role="listview" data-theme="a" id="categories_list">
            <li>something</li>
            <li>something else</li>
        </ul>
    </div> 
    <div data-role="footer" data-position="fixed" data-tap-toggle="false"><h1>Home</h1></div>
</div>

我的问题是当页面不需要滚动时滚动页面。该列表很短，不会低于页脚。

之前有没有人遇到过这个问题，如果有的话你是怎么克服它的？

这是一个显示问题的jsfiddle：jsFiddle

提前致谢。

Answer 1

这似乎是jQuery Mobile的一个错误。填充添加到.ui-page元素以考虑页眉和页脚，但在页面加载时或浏览器重新调整大小时未正确更新高度。你可以通过一些黑客来解决这个问题：

//bind to the resize event for the window element
$(window).on('resize', function () {

    //set a timeout to allow jQuery Mobile to update the element before we correct the value
    setTimeout(function () {

        //change the height of the current page to get rid of the scroll bar
        $.mobile.activePage.css('minHeight', '-=85px');
    }, 50);

//trigger a resize event onload
}).trigger('resize');

更新

我在Github上为jQuery Mobile启动了一个错误报告来解决这个问题：https://github.com/jquery/jquery-mobile/issues/3825

jQueryMobile 1.1-rc1修复了在不需要时导致页面滚动的标题

1 个答案:

更新