带有固定定位子元素的可滚动 div 上的 iOS 动量滚动

debugcn 发表于 Dev

尼尔 B.

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

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

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

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

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

这是说明问题的笔。当您在 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;
}

我已经在网上搜索以寻找解决方案，但到目前为止一无所获。想法？

弗雷德里克·彼得森

（有关 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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。