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

Posted 2023-03-15

【中文标题】Cordova - 使用固定的页眉和页脚滚动 (ios)

【英文标题】：Cordova - Scrolling with a fixed header and footer (ios)

【发布时间】：2014-05-30 15:15:09

【问题描述】：

使用 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;

【问题讨论】：

修复它，最初是使用 iscroll 插件。但是，cordova 还有其他烦人的问题，所以我最终弄清楚了如何在 CSS 中通过设置页眉、页脚和内容的绝对位置并将溢出设置为隐藏来原生地做到这一点。如果您遇到同样的问题并发现此问题，请给我发消息，我会尽力提供帮助。

你好@Samu，你能在这里发布解决方案吗？谢谢

请提供某种解决方案。谢谢

【参考方案1】：

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

它已经修复了！