Question

如何使用溢出属性与android移动浏览器一起使用？当您专注于输入时，您无法滚动查看键盘后面的内容吗？

您如何解决此问题？

我的示例如下：

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: rgba(255,255,255,.58);
}

.overlay-list {
  overflow-y: scroll;
}

<div id="overlay">
  <input type="text">
  <ul class="overlay-list">
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
   <li>This is a test item</li>
  </ul>
</div>
<div id="content">
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
    <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
    <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
    <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
    <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
    <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
  <p>This is a test paragraph</p>
</div>

我在一个视口上方固定了一个div，并附有一个列表。在iOS上，您可以滚动查看键盘后面的内容，但在android上，列表位于键盘后面，您无法滚动查看。

您可以将#overlay更改为absolute，以“修复”它，但是背景在列表的末尾停止，而我需要保留背景并能够在android上看到该列表。

演示该问题的实时Codepen示例如下：

https://codepen.io/anon/pen/QVWpzj/

如何在android中的固定位置div中在键盘后滚动？

我看着：CSS overflow and absolute positioning issue on Android Browser

并尝试：

-webkit-backface-visibility: hidden;，但不行。

具有焦点输入/ Android键盘弹出窗口的溢出Y滚动行为

0 个答案: