粘性页眉和页脚，仅在带有iOS PWA的内容上使用spring

Question

我在试着为PWA搭建一个脚手架。我一直在看Instagram的PWA，它们有一个粘性的页眉(App Bar)和一个粘性的页脚(Nav Bar)，只有中间的滚动条和弹簧中的内容。它在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)，可以像Instagram PWA那样在iOS上正常运行？

Answer 1

请参阅Brotkrumen，获取能够满足您的需求的可用的弹性框解决方案。