如何使固定内容超过iOS键盘? [英] How to make fixed-content go above iOS keyboard?

问题描述

我只能在人们遇到相反问题的地方找到问题.

I can only find questions where people have the opposite problem.

我希望我的固定内容在iOS键盘上方. 问题图片:

I want my fixed content to go above the iOS keyboard. Image of the problem:

我希望iOS的行为类似于Android.

I want iOS to behave like Android.

有没有简单的方法可以实现这一目标?

Is there a simple way to achieve this?

父元素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;
}

推荐答案

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

Mobile Safari does not support position: fixed when an input focused and virtual keyboard displayed.

要使其与Mobile Chrome相同，您必须使用位置:绝对值，高度:整个页面的100％或用于伪固定元素的容器，拦截滚动，touchend，焦点和模糊事件

To force it work the same way as Mobile Chrome, you have to use position: absolute, height: 100% for the whole page or a container for your pseudo-fixed elements, intercept scroll, touchend, focus, and blur events.

诀窍是在激活焦点之前将轻按的输入控件置于屏幕底部.在这种情况下，iOS Safari始终会以可预测的方式滚动视口，而window.innerHeight会变成完全可见的高度.

The trick is to put the tapped input control to the bottom of screen before it activates focus. In that case iOS Safari always scrolls viewport predictably and window.innerHeight becomes exactly visible height.

打开 https://avesus.github.移动Safari中的io/docs/ios-keep-fixed-on-input-focus.html 来了解其工作原理.

Open https://avesus.github.io/docs/ios-keep-fixed-on-input-focus.html in Mobile Safari to see how it works.

请避免使用包含多个可聚焦元素的表单，因为需要更多固定位置的技巧，而这些技巧只是出于演示目的而添加的.

Please avoid forms where you have several focusable elements because more tricks to fix position will be necessary, those were added just for demonstration purposes.

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

Note that for rotation and landscape mode, additional tricks are necessary. I'm working on a framework called Tuff.js which will provide a full-screen container helping mobile web developers to build web applications much faster. I've spend almost a year on the research.

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

By the way, to prevent scrolling of the whole window when virtual keyboard is active, you can use this super simple trick

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>

从此处

这篇关于如何使固定内容超过iOS键盘?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！