jQuery 手机 : fixed footer glitches

Question

我在移动网站上使用 jQuery Mobile (v1.4.5.) 时遇到固定页脚的一些故障。

当有很多文本(需要滚动)时，没有问题。当文本很少(不需要滚动)时，没有问题。

当文本刚好需要稍微滚动一下时，就会出现故障。发生的情况是页脚在向上滚动时消失并在释放时弹回。我正在 Chrome(Nexus 5 上的移动设备)上对此进行测试，我认为这与在 Chrome 中，Chrome 的地址栏在滚动时消失有关。向上滚动时，地址栏再次出现，导致页脚消失。

我从 jQuery Mobile 中获取了固定页脚演示页面并删除了足够的文本以确保它不是我的代码，但即使使用这个演示页面，问题仍然存在。

有人知道解决方法吗？

Answer 1

您可以缩放页面以适应设备高度并使内容 div 可滚动(参见 Omar 的文章:https://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/)，而不是使用固定位置的页脚:

<div data-role="page" id="page1">
    <div id="jqmHeader" data-role="header" >
         <h1>My page</h1> 
    </div>
    <div id="jqmContent" role="main" class="ui-content" >
       <!-- scrollable content here -->
    </div>
    <div id="jqmFooter" data-role="footer"> 
        <a href="#" data-role="button">Footer Button</a>
    </div>
</div>

function ScaleContentToDevice() {
    scroll(0, 0);
    var headerHeight = $("#jqmHeader:visible").outerHeight();
    var footerHeight = $("#jqmFooter:visible").outerHeight();
    var viewportHeight = $(window).height();

    var content = $("#jqmContent:visible");
    var contentMargins =  content.outerHeight() - content.height();

    var contentheight = viewportHeight - headerHeight - footerHeight - contentMargins;

    content.height(contentheight);
};

$(document).on( "pagecontainershow", function(){
    ScaleContentToDevice();        
});

$(window).on("resize orientationchange", function(){
    ScaleContentToDevice();
});

DEMO