带有春天的粘性页眉和页脚仅适用于iOS PWA内容

Question

我正在尝试为PWA搭建一个脚手架。我一直在查看Instagram的PWA，它们有一个粘页眉（应用程序栏）和一个粘页脚（导航栏），并且只有中间滚动条和弹簧中的内容。它在iOS上也具有适当的发布滚动机制。太好了。

我试图用Flexbox复制它，我可以获得粘性页眉和页脚的基础知识，但是滚动机制不正确。对于第一种，您不能以滚动惯性释放（滚动物理处于夹紧状态），而第二种，当达到滚动范围时，页眉/页脚将随之弹起。

这是我当前方法的MVCE，这是不可接受的。

http://jsfiddle.net/56cfd93n/21/

#page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#appbar, #navbar {
  background: #eee;
  height: 32px;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

此处是指向不存在以下问题的Instagram PWA的链接：https://www.instagram.com

我如何构建一个基本的PWA支架（AppBar，Content，NavBar），使其在iOS上能够正常运行，就像Instagram的PWA一样？

Answer 1

请参见Brotkrumen，了解可满足您需要的工作箱解决方案。