Question

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

我希望我的固定内容超越iOS键盘。问题图片：

我希望iOS的行为与Android类似。

有没有一种简单的方法可以达到这个目的？

父元素css：

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

按钮css：

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

Answer 1

Mobile Safari不支持位置：当输入聚焦和虚拟键盘显示时固定。

要强制它的工作方式与移动Chrome相同，您必须使用position：absolute，height：100％表示整个页面，或者使用容器表示伪固定元素，拦截滚动，touchend，焦点和模糊事件

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

在Mobile Safari中打开https://avesus.github.io/docs/ios-keep-fixed-on-input-focus.html以查看其工作原理。

请避免使用具有多个可聚焦元素的表单，因为需要更多修复位置的技巧，这些仅用于演示目的。

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

顺便说一句，为了防止在虚拟键盘处于活动状态时滚动整个窗口，你可以使用这个超级简单的技巧

＆＃13;

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);
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

从here

得到了这个答案

如何让固定内容超越iOS键盘？

1 个答案: