位置：键盘打开时，iphone上的fixed被忽略

Question

*我与此人有类似的问题：https://css-tricks.com/forums/topic/ios-scroll-with-fixed-position-div-when-keyboard-appears/

---

我正在做一个简单的反应模式，需要将其固定在整个页面上。 在模式内部，我有一个<input>和一个<ul>列表。

*列表在模式内部可滚动，并且应该保持不变。

因此模态是稳定的，直到我触摸<input>并出现键盘。之后，整个页面会上下滚动。

在下面显示我的代码。

const Index = () => ( <
  div className = "c-ftsOnTop" >
  <
  h1 > MOBILE SCROLLING OVERLAY < /h1> <
  div className = "c-fts" >
  <
  form action = "" >
  <
  input type = "text"
  id = "fts-pickupLocation"
  name = "fts-pickupLocation"
  aria - describedby = "fts-pickupLocation-screenReaderInstructions"
  aria - controls = "fts-pickupLocationResultsContainer"
  aria - autocomplete = "list"
  aria - required = "true"
  autocomplete = "off"
  placeholder = "city, airport, station, region, district…"
  value = ""
  autofocus = ""
  required = "" / >
  <
  /form> <
  div className = "c-fts-results" >

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol>

  <
  ol >
  <
  li > List item 1 < /li> <
  li > List item 2 < /li> <
  li > List item 3 < /li> <
  li > List item 4 < /li> <
  li > List item 5 < /li> <
  /ol> <
  /div> <
  /div> <
  /div>
)

export default Index

.c-ftsOnTop {
  background: lightblue;
  display: block !important;
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.c-fts {
  background-color: lightcyan;
}

.c-fts-results {
  background: pink;
  height: 450px;
  overflow-y: auto;
  position: relative !important;
  padding: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

视觉效果如下所示（在桌面浏览器上）：