ios - 如何使固定内容超出 iOS 键盘？

Question

我只能找到人们有相反问题的问题。

我希望我的固定内容位于 iOS 键盘上方。问题图片:

我希望 iOS 的行为像 Android。

有没有简单的方法可以做到这一点？

父元素CSS:

.parent{
    position:fixed;
    top: 0;
    left 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

按钮样式:

.button{
    position:fixed;
    left 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 5rem;
}

Answer 1

Mobile Safari 不支持位置:当输入焦点和虚拟键盘显示时已修复。

要强制它以与 Mobile Chrome 相同的方式工作，您必须对整个页面使用 position: absolute, height: 100% 或为伪固定元素使用一个容器，拦截 scroll、touchend、focus 和 blur 事件.

诀窍是在激活焦点之前将点击的输入控件放在屏幕底部。在这种情况下，iOS Safari 总是可预测地滚动视口(viewport)，并且 window.innerHeight 变为完全可见的高度。

打开https://avesus.github.io/docs/ios-keep-fixed-on-input-focus.html在 Mobile Safari 中查看它是如何工作的。

请避免使用具有多个可聚焦元素的表单，因为需要更多技巧来固定位置，添加这些技巧只是为了演示目的。

请注意，对于旋转和横向模式，需要额外的技巧。我正在开发一个名为 Tuff.js 的框架，它将提供一个全屏容器，帮助移动 Web 开发人员更快地构建 Web 应用程序。我花了将近一年的时间进行研究。

顺便说一句，要防止在虚拟键盘处于事件状态时滚动整个窗口，您可以使用这个 super 简单的技巧

var hack = document.getElementById('scroll-hack');

function addScrollPixel() {
  if (hack.scrollTop === 0) {
    // element is at the top of its scroll position, so scroll 1 pixel down
    hack.scrollTop = 1;
  }

  if (hack.scrollHeight - hack.scrollTop === hack.clientHeight) {
    // element is at the bottom of its scroll position, so scroll 1 pixel up
    hack.scrollTop -= 1;
  }
}

if (window.addEventListener) {
  // Avoid just launching a function on every scroll event as it could affect performance. 
  // You should add a "debounce" to limit how many times the function is fired
  hack.addEventListener('scroll', addScrollPixel, true);
} else if (window.attachEvent) {
  hack.attachEvent('scroll', addScrollPixel);
}

body {
  margin: 0 auto;
  padding: 10px;
  max-width: 800px;
}

h1>small {
  font-size: 50%;
}

.container {
  display: flex;
  align-items: top;
  justify-content: space-between;
}

.container>div {
  border: #000 1px solid;
  height: 200px;
  overflow: auto;
  width: 48%;
  -webkit-overflow-scrolling: touch;
}

<h1>iOS Scroll Hack</h1>
<p>Elements with overflow:scroll have a slightly irritating behaviour on iOS, where when the contents of the element are scrolled to the top or bottom and another scroll is attempted, the browser window is scrolled instead. I hacked up a fix using minimal,
  native JavaScript.</p>
<p>Both lists have standard scrolling CSS applied (<code>overflow: auto; -webkit-overflow-scrolling: touch;</code>), but the list on the right has the hack applied. You'll notice you can't trigger the browser to scroll whilst attempting to scroll the list
  on the right.</p>
<p>The only very slight drawback to this is the slight "jump" that occurs when at the top or bottom of the list in the hack.</p>
<div class='container'>
  <div id='scroll-orig'>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
    </ul>
  </div>
  <div id='scroll-hack'>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
    </ul>
  </div>
</div>

从 here 得到这个答案