在Android上查看网站覆盖内容时不会滚动

谢谢你能提供的任何帮助！我正在尝试完成我的网站的移动版本，但由于某些原因，我创建的覆盖中显示的内容在Android上查看时无法正常滚动。这在iPhone上不是问题。我看过这个链接，但我认为它不适用：

以下是指向我的JSFIDLE的链接： 如果您想在android上看到这一点，请提供完整版本的链接：

这是完整的HTML

<div id="webpagecontent"><ul>
<li>This is my webpage content.</li>
<li>This is my webpage content.</li>
<li>This is my webpage content.</li>
<li>This is my webpage content.</li>
<li>This is my webpage content.</li>
<li>This is my webpage content.</li>
<li>This is my webpage content.</li>
<li>This is my webpage content.</li>
<li>This is my webpage content.</li>
<li>This is my webpage content.</li>
<li>This is my webpage content.</li>
<li>This is my webpage content.</li>
</ul>
</div>
<div id="fixedoverlay">
   <div id="overlaymatte"></div>
   <a title="close" href="#" class="closeoverlay">Close</a>
   <div id="overlaycontent"><ul>
       <li>Here's all of my overlay content.</li>
       <li>Here's all of my overlay content.</li>
       <li>Here's all of my overlay content.</li>
       <li>Here's all of my overlay content.</li>
       <li>Here's all of my overlay content.</li>
       <li>Here's all of my overlay content.</li>
       <li>Here's all of my overlay content.</li>
       <li>Here's all of my overlay content.</li>
       <li>Here's all of my overlay content.</li>
       <li>Here's all of my overlay content.</li>
       <li>Here's all of my overlay content.</li>
       <li>Here's all of my overlay content.</li>
       <li>Here's all of my overlay content.</li>
   </div>

某些Android浏览器（如果我没有记错的话，版本2.x及以下）不支持CSS

overflow

属性，因此页面中需要滚动的固定高度的任何元素在那些较旧的Android浏览器中都无法滚动（我相信这也会影响较旧版本的iPhone）

你可以试试。它为我的培根节省了几次任务，比如您描述的内容，它是一个Javascript插件，但如果您必须使用可滚动元素，它是值得的

实现非常简单，只需将JS文件放在文档的

标记中，并使用touch将类

turpover

指定给要滚动的元素

可能有更好的插件在那里为这一点，但推翻是唯一一个我用过

注意你必须结合一些滚动条插件来显示滚动条，Overflow JS只允许你在移动浏览器上滚动内容，我用过这个，但我从来没有同时使用过这两个，我不明白为什么它不起作用

注意#2

---

在做了更多的阅读后，它似乎会做你想要的！它允许您根据功能部分在移动浏览器上滚动

非常感谢！你的答案就是我一直在寻找的答案！

#fixedoverlay, #overlaymatte {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:rgba(255,0,0,0.5);
z-index: 999;
}
#overlaycontent {
position: relative;
max-width: 95%;
margin: 25px auto;
height: 50px;
overflow: auto;
background: #fff;
padding: 10px;
/*  border: 20px solid #fff; */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index: 9999;
}

#fixedoverlay #loaderimg {
display: block;
margin: 50px auto;
}
#fixedoverlay .closeoverlay {
position: absolute;
display: block;
padding: 4px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border: 1px solid #666;
background: #eee; 
width: 16px;
height: 16px;
left: 50%;
top: 12px;
margin-left: 0px;
z-index: 999999999;
}