Cordova - 使用固定的页眉和页脚滚动 (ios)

Question

使用 Cordova (phonegap) & bootstrap 制作一个移动应用程序，目前在 IOS 上测试。

使用中间可滚动内容修复的页眉和页脚栏出现问题。当点击滚动时，页眉/页脚栏会随着内容向下或向上移动，但在滚动完成后会立即恢复原位。如果我使用

-webkit-overflow-scrolling: 触摸；

它按预期工作，但是滚动浏览内容真的很尴尬，如果滚动到末尾，它只会滚动页眉或页脚（有弹性溢出），直到你停下来一秒钟。

这是我的页眉/页脚栏的 html：

<div id="headerBar">
        <div class="container-fluid" style="background-color: #1569C7">
            <div class="row">
                <div class="col-xs-3 text-left">
                    <button id="logoutButton" type="button" class="btn btn-default">
                        Log Out
                    </button>
                    <button type="button" class="btn btn-default" id="restoreQuestionFeedButton">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </button>
                </div>
                <div class="col-xs-6 text-center" style="height: 55px">
                    <strong id="usernameText"></strong>
                </div>
                <div class="col-xs-3 text-right">
                    <button id="oldCreatQuestionButton" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
<div id="footerBar">
        <div class="container-fluid" style="padding: 0">
            <div class="row text-center">
                <button id="createQuestionButton" type="button" class="btn btn-default footerButton">
                    <span class="glyphicon glyphicon-plus"></span> <strong>Ask a new free question!</strong>
                </button>
            </div>
        </div>
    </div>

这里是相关的 CSS：

#headerBar {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #1569C7;
}

#footerBar {
    position: fixed;
    z-index: 100; 
    bottom: 0; 
    left: 0;
    width: 100%;
    background-color: #1569C7 !important;
}

Answer 1

就我而言，我通过在“位置：固定”之后删除“顶部：0”来修复此错误

它已经修复了！