Question

感谢您提供的任何帮助！我正在尝试完成我的网站的移动版本，但出于某种原因，我在创建的叠加层中显示的内容在Android上查看时无法正常滚动。这在iPhone上不是问题。我查看了此链接，但我认为不适用：Android overlay a view ontop of everything?

以下是我的jsfiddle的链接：http://jsfiddle.net/kevindp78/TkQJa/3/ 如果你想在Android上看到这个：http://jsfiddle.net/kevindp78/TkQJa/3/embedded/result/

，还有完整版的链接

这是完整的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>

和CSS

#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;
}

Answer 1

某些Android浏览器（如果我是正确的，版本2.x及更低版本）不支持CSS overflow属性，因此页面中具有需要滚动的固定高度的任何元素都不可滚动在那些较旧的Android浏览器中（我相信这也会影响旧版本的iPhone）。

您可以尝试Overthrow JS。它已经用你描述的任务保存了我的培根几次，它是一个Javascript插件，但如果你必须使用一个可滚动的元素它是值得的。

实现非常简单，只需将JS文件放在文档的<head>标记中，并将类overthrow分配给要使用触摸滚动的元素。

为此可能有更好的插件，但推翻是我唯一使用过的插件。

注意您必须结合使用某种滚动条插件来显示滚动条，Overflow JS只允许您在移动浏览器上滚动内容，为此我使用了ScrollPane JS但我从来没有使用过这两种，我不明白为什么它不起作用。

注意＃2

在对此进行更多阅读之后，TinyScrollbar会显示您想做的事情！它允许您根据功能部分
在移动浏览器上滚动

在Android上查看时，网站叠加内容不会滚动

1 个答案:

注意＃2