Question

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

每个视图都在一个可滚动的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;
}

我已经在网上寻找解决方案，但到目前为止还没有提出任何建议。想法？

Answer 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和ipads上滚动。

如果这对您有用，请告诉我

编辑：

另一个解决方案是乱用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>

DOUBLE EDIT：

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

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

1 个答案: