iOS Safari中输入框聚焦后，模态框（固定元素）无法滚动

Question

我已经花了约8个小时尝试解决这个问题，欢迎任何帮助！

重现步骤:

• 打开一个高于窗口高度的模态框（在iPhone上）
• 聚焦一个输入框
• 在iOS键盘上按下"完成"

你将无法再滚动到模态框底部

jsbin: https://jsbin.com/hagiyojufu (https://jsbin.com/hagiyojufu/1/edit?html,css,js,output)

- martin

---

我遇到了类似的问题，你有解决方案吗？ - Jabel Márquez

Answer 1

虽然这是一个很老的帖子，但我刚遇到了这个问题，所以这是我的解决方案。我在JavaScript中引用了所有元素。当用户输入时，会填充搜索结果列表。将这些结果与iOS行为结合起来，当键盘打开时移动事物会导致错误，一旦键盘消失，包含输入和结果div的容器就无法滚动。

// results is a div holding the results. 
// As soon as the search returns and the results are 
// added (even before the keyboard is gone) i run the 
// code below and once the keyboard is gone things scroll 
// properly. It's basically a hack to get the browser to 
// recalculate positioning and rendering. class 'absolute'
// just sets the position to absolute from it's default 'relative'.

results.addClass('absolute');
// Force browser to assume there's upcoming rendering to do
results.element.clientHeight;
// remove class
results.removeClass('absolute');

看起来无论在哪个元素上执行，结果容器或父级元素都可以，而且在该层次结构中的其他元素上也可能有效。

- Henry

Answer 2

将以下内容添加到bootstrap.css中的.modal-open类中（overflow:hidden; - 在我的文件中已经存在）：

.modal-open {
  position: fixed;
  overflow: hidden;
  left:0;
  right:0;
}

这是我目前使用的临时解决方案。它可以使滚动条再次工作，但是当模态框关闭时，主页面会被滚动回顶部。比以前好了，但不是真正的解决方案。我从以下来源得到了解决方案： @Eru Penkman - Bootstrap 3 modal with long form on iPhone doesn't scroll if you touch input field

他还补充道：

.modal{
  -webkit-overflow-scrolling: auto;
}

但这并没有解决回到顶部滚动的问题，反而使滚动出现了故障，所以我也把它放回去了：

.modal{
  -webkit-overflow-scrolling: touch;
}

希望这能有所帮助。如果您找到了解决所有问题的方法，请告诉我... :)

- cmac

Answer 3

请添加以下 CSS 代码：

html, body {
 overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

- Arun Kumar M

---

你可以将上述CSS添加到特定的div中，然后进行检查。 - Arun Kumar M