iOS动量在具有固定定位子元素的可滚动div上滚动答案

【问题标题】：iOS momentum scrolling on scrollable div with fixed positioned child elementiOS动量在具有固定定位子元素的可滚动div上滚动
【发布时间】：2017-11-06 02:40:26
【问题描述】：

我正在开发一个有角度的 web 应用程序，它有一个主导航栏和几个视图，每个视图都有自己的子导航栏。

每个视图都在一个可滚动的 div 中维护，并且在任何给定时间只有一个 div 可见。

这些视图使用 'will-change' CSS 属性进行硬件加速，并使用 -webkit-overflow-scrolling CSS 属性启用动量滚动。

在每个 DIV 中都有一个子导航栏，固定在主导航栏之后。

除了一个恼人的故障外，一切都按预期工作，在 iPad/iPhone 上，子导航栏不断跳出然后回到它的位置。

Here's a pen 说明问题。当您在 iPad/iPhone 上滚动时，请注意黄色 SUB MENU 上的那些故障...

HTML：

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  </head>
  <body>
    <div class="main_header">
      MAIN MENU
    </div>
    <div class="views-container">
      <div class="view">
        <div class="view-header test">
          SUB MENU
        </div>
        <div>
          CONTENT
        </div>
      </div>
    </div>
  </body>
</html>

CSS：

html, body {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100%;
}

.main_header {
  background-color:green;
  position: fixed;
  top:0px;
  left: 0px;
  width: 100%;
  opacity: 0.9;
}

.views-container {
  position: fixed;
  top: 18px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.view {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  will-change: opacity;
}

.view-header {
  background-color:yellow;
  position: fixed;
  width: 100%;
  opacity: 0.9;
  z-index: 1000;
}

我在网上搜索了一个解决方案，但到目前为止一无所获。想法？

【问题讨论】：

标签： ios css web-applications

【解决方案1】：

（codepen解决方案见答案底部）

在我的 iPhone 上进行测试，我可以通过以下方式更改子菜单：

<body>
    <div class="main_header">
      MAIN MENU
    </div>
    <div class="views-container">
      <div class="view"> <-- move this div below "view-header test"
        <div class="view-header test">
          SUB MENU
        </div>
        <div class="container-fluid">

到：

<body>
    <div class="main_header">
      MAIN MENU
    </div>
    <div class="views-container">
      <div class="view-header test">
          SUB MENU
      </div>
      <div class="view"> <-- move to here
        <div class="container-fluid">

似乎view 类的css 导致子菜单尝试在iphone 和ipad 上滚动。

让我知道这是否适合你

编辑：

另一种解决方案是弄乱 css。基本上你的.view 类包含你的.view-header 类，因此.view-header 的内容也会受到.view 类的影响。一种解决方案可能是创建一个.view-body 类，您可以在其中放置与视图主体相关的任何您不想影响标题的代码。然后做

<div class="view">
   <div class="view-header">
      header content. probably does not need to be scroll-able
   </div>
   <div class="view-body">
      body content. probably needs to be scroll-able 
   </div
</div>

双重编辑：

分叉您的代码并进行我建议的更改。它现在可以在我的 iPhone 上完美运行。希望这可以帮助！ https://codepen.io/anon/pen/RgWOGx

【讨论】：

第一个解决方案是无关紧要的，因为 view-header 是动态的并且必须包含在视图中。第二个解决方案看起来和工作得很好，不幸的是我在这里展示了我的案例的简化版本，所以整合这样的改变并不容易，但我会试一试，因为它似乎是唯一可行的解决方案。谢谢！