IOS 上的 Flexbox 滚动方式不同答案

【问题标题】：Flexbox on IOS scrolls differentlyIOS 上的 Flexbox 滚动方式不同
【发布时间】：2016-12-10 14:02:42
【问题描述】：

我注意到使用基于 flexbox 的布局与使用 position: fixed 页脚时的滚动功能有所不同。固定页脚更平滑，并显示滚动条。 Flexbox 根本不流畅，并且不显示滚动条。我更喜欢在我的布局中使用 flexbox，但想要更好的滚动。有没有办法用flexbox来实现？

我正在 IOS 10 Iphone 7 上进行测试。在 chrome 和 safari 上都会发生

Flexbox example

Fixed footer example

HTML：

<html>
    <head>
        <meta name=viewport content="width=device-width,initial-scale=1">
    </head>    
    <body>
        <div id='main'>
            ...lots of content so it would scroll
        </div>
        <nav class="footer">footer</nav>
    </body>
</html>

弹性盒方法：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    -webkit-flex-direction: column;
    flex-direction: column;
    display: flex;
}

#main {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

.footer {
    height: 72px;
    min-height: 72px;
    background-color: blue;
}

固定页脚方法：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main {
    padding-bottom: 72px;
}

.footer {
    position: fixed;
    bottom: 0;
    height: 72px;
    min-height: 72px;
    width: 100%;
    background-color: blue;
}

【问题讨论】：

标签： ios css mobile scroll flexbox

【解决方案1】：

与 Flexbox 无关。只是溢出的问题。所以添加这个：-webkit-overflow-scrolling: touch; 会起作用。

【讨论】：