背景
(1) 实现功能
如图，悬浮窗中为iframe，点击展开内容，如果超出容器大小实现滚动。
(2) 问题
在iOS上，悬浮窗容器中的内容如果不是一个iframe，则可以滚动。但换成iframe后就无法在其中滚动。
解决方案
(1) 思路
问题在于overflow: auto或者overflow: scroll没有生效。
需要在容器上使用-webkit-overflow-scrolling: touch;来解决这个问题。如下：
height: 57vh;
overflow: auto;
-webkit-overflow-scrolling: touch;(2) 完整demo
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
.fix-container{
position: fixed;
top: 10px;
left: 10px;
width: calc(100% - 20px);
background-color: wheat;
height: 57vh; /*看这里*/
overflow: auto; /*看这里*/
-webkit-overflow-scrolling: touch; /*看这里*/
}
.popup-iframe{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<div class='fix-container'>
<!-- <ul>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
<li>b</li>
</ul> -->
<iframe class="popup-iframe" src="http://www.panomatics.com/virtualtours/thepeninsula/hongkong/index.html?startscene=1&if=1" frameborder="0" allowfullscreen=""></iframe></div>
</div>
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</div>
</body>
</html>