如何保持固定元素的儿童位置固定？ （iOS网站）

Question

我在为iOS设备设计的移动网站上的sidenav上使用了固定位置。对于熟悉iOS Web引擎的开发人员，他们应该知道，一旦将父元素设置为overflow:hidden，即使其中一个子元素具有overflow:scroll属性，整个元素也将变为不可滚动。 / p>

<md-sidenav md-component-id="left">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>Menu Control Center</h2>
    </div>
  </md-toolbar>
  <section>
    <md-switch id="nsfw">NSFW</md-switch>
    <md-divider></md-divider>
      <md-content  md-ink-ripple><div class='navBtn' layout-align="start center">
        One
      </div></md-content>
      <md-content  md-ink-ripple><div class='navBtn' layout-align="start center">
        Two
      </div></md-content>
      <md-content  md-ink-ripple><div class='navBtn' layout-align="start center">
        Three
      </div></md-content>
      <md-content  md-ink-ripple><div class='navBtn' layout-align="start center">
        Four
      </div></md-content>
      <md-content  md-ink-ripple><div class='navBtn' layout-align="start center">
        Five
      </div></md-content>
    <md-divider></md-divider>
    <md-content id="navFooter">
      <p>© copyright</p>
    </md-content>
  </section>
</md-sidenav>

因此md-toolbar是我希望保持在最顶层的子元素，而section是用户可以滚动的部分，如果它们具有非常低分辨率的屏幕。我意识到md-toolbar会在设置为固定位置时滚动。在桌面设备上，我可以将md-toolbar设置为overflow:hidden并允许section执行overflow:scroll，但在iOS上则无效。行为是用户将能够滚动整个md-toolbar，同时在视觉上看到这些元素时滚动它后面的元素，md-toolbar将在他们释放拇指时反弹。

对于那些不了解iOS网站行为的人来说，例如：

正如您可以看到md-toolbar到overflow:hidden并允许section执行overflow:scroll时菜单上的元素没有滚动，菜单背后的元素是滚动的那些。

对于那些想要查看正确行为的桌面示例的用户，请参阅此演示页：http://photo.aerofotea.com

Answer 1

Facebook或Google等主流网站决定不使用固定位置菜单是有充分理由的，因为iOS上的网络引擎存在根本缺陷。但是有一种解决方法，只有当你决定将菜单的高度设置为100％时（看起来你就是这样）。

在第一步中，将md-sidenav元素设置为100％高度。然后将section元素也设置为100％高度，然后设置overflow: scroll。这将确保iOS不会禁用md-sidenav上的滚动，同时允许其子元素在发生溢出时滚动。

但是这个解决方案仍有缺陷。例如，如果用户在“菜单控制中心”区域滚动，他们仍然会滚动菜单后面的元素并将菜单从屏幕上滚动。在Apple采取行动之前，这是我们拥有的最佳解决方案。