Mobile Safari：如何实现固定位置、可滚动的 iframe？答案

【问题标题】：Mobile Safari: How to implement a fixed position, scrollable iframe?Mobile Safari：如何实现固定位置、可滚动的 iframe？
【发布时间】：2014-10-18 11:54:03
【问题描述】：

有没有办法在 Mobile Safari 中实现固定位置、可滚动的 iframe？我在这个问题上花了好几个小时，但似乎找不到解决方案。

对于非固定 iframe，可以使用 -webkit-overflow-scrolling: touch; 和 overflow: auto; 的组合来解决一些错误，但我找不到使固定 iframe 在 Mobile Safari 中可滚动的方法。

这是解决此问题的JSBin。

在 iPad 4 和 iPhone 5S 上针对 iOS 8 进行测试。

【问题讨论】：

标签： html css iframe webkit mobile-safari

【解决方案1】：

您应该将所有位置（上、下、左、右）添加到固定 iframe：

.iframe-wrap {
  background: #ddd;
  position: fixed;
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 25px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  overflow: auto;                
}

我在 iphome 模拟器中试过这个，它可以工作。

【讨论】：

这不起作用。 iPhone 模拟器中的 Safari 与真正的 Mobile Safari 的行为并不 100% 相同。