为什么这个iframe不能在移动设备中滚动？

Question

尝试在移动设备中滚动此iframe，但它无法正常工作。有什么提示吗？

它是下拉窗口中的iframe。 iframe有一个循环按钮，让用户循环浏览iframe中的3个不同页面。

Html +脚本

<div class="dropdowntumblr">
<button onclick="mytumblrFunction()" class="dropbtn2"></button>
<div id="myDropdowntumblr" class="dropdown-contenttumblr">
<span id="url"></span>
<iframe id="frame" src="http://somalgors74.tumblr.com"
 width="300" height="300" frameBorder="0"></iframe>
<button id="cycle"></button>

<script type="text/javascript">
  var urlArray = ['http://kkbry.tumblr.com',
'http://contemporaryartdaily.tumblr.com', 
'http://somalgors74.tumblr.com'];
  var count = -1;
  var i = document.getElementById('frame');
  var c = document.getElementById('cycle');
  var u = document.getElementById('url');

  function nextUrl() {
    url = urlArray[++count];
    count = (count >= urlArray.length - 1)? -1 : count;
    return url;
  }

  c.onclick = function(){
    c.disabled = true;
    u.innerHTML = '';
    i.src = nextUrl();
    i.onload = function(){
      c.disabled = false;
    }
  }
</script>
</div>
</div>
<div class="cycle-prev"></div>
<div class="cycle-next"></div>

脚本

    <script>
function mytumblrFunction() {
document.getElementById("myDropdowntumblr").classList.toggle("show");}
</script>

的CSS

 .dropbtn2 {
background-color: #ef4035;
position:fixed;
margin:0px;
color: white;
height: 2.5%;
min-height: 20px;
width: 5%;
left: 60%;
top: 40%;
border: none;
cursor: pointer;
}



.dropdowntumblr {
  position: fixed;
  z-index: 4;
  height: 40%;
  min-height: 50px;
  width: 50%;
  left:8.75%;
  top:15%;
}



.dropdown-contenttumblr {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 12px;
  display: none;
  position: absolute;
  z-index: 2;
  background-color: -;
  width: 75%;
  min-width: 50%;
  padding: 16px;
}



#cycle{       background-color: #ef4035;
font-family: "Lucida Console", Monaco, monospace;
font-size: 12px;
position:fixed;
margin:0px;
color: white;
height: 5.5%;
min-height: 20px;
width: 5%;
left: 60%;
top: 30%;
border: none;
cursor: pointer;
}


#frame {
position: fixed;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
padding-bottom: 75%;
height: 45vw;
width: 47vw;
top:15%;
left:10%;
overflow: hidden;
}

#frame iframe {
height: 100%;
width: 100%;
}