1

感谢您的任何帮助，您可以提供！我正在尝试完成我网站的移动版本，但由于某种原因，我创建的叠加层中显示的内容在 Android 上查看时无法正确滚动。这在 iPhone 上不是问题。我已查看此链接，但我认为它不适用：Android 将视图覆盖在所有内容之上？

这是我的 jsfiddle 的链接：http: //jsfiddle.net/kevindp78/TkQJa/3/ 如果你想在 android 上看到这个，还有一个完整版本的链接：http: //jsfiddle.net/kevindp78/ TkQJa/3/嵌入式/结果/

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

1 回答 1

2

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

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

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

可能有更好的插件可以解决这个问题，但是推翻是我唯一使用过的插件。

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

笔记2

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

于 2013-07-18T16:46:23.780 回答