1

あなたが提供できるどんな助けにも感謝します！ウェブサイトのモバイル版を完成させようとしていますが、何らかの理由で、作成したオーバーレイに表示されるコンテンツがAndroidで表示したときに正しくスクロールしません。これはiPhoneでは問題ありません。私はこのリンクを見ましたが、当てはまらないと思います：Androidはすべての上にビューをオーバーレイしますか？

これが私の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;
}
4

1 に答える 1

2

特定の Android ブラウザー (私が正しければ、バージョン 2.x 以下) は CSSoverflowプロパティをサポートしていないため、スクロールが必要な固定高さのページ内の要素は、これらの古い Android ブラウザーではスクロールできません (私は信じています)。これは古いバージョンの iPhone にも影響します)。

Overthrow JSを試すことができます。あなたが説明したようなタスクで私のベーコンを数回節約しました。これはJavascriptプラグインですが、スクロール可能な要素を使用する必要がある場合は価値があります.

実装は非常に簡単で、ドキュメントのタグに JS ファイルを配置し、タッチを使用してスクロールする要素<head>にクラスを割り当てるだけです。overthrow

これにはもっと良いプラグインがあるかもしれませんが、私が使用したのはオーバースローだけです。

注: スクロールバーを表示するには、ある種のスクロールバー プラグインと組み合わせる必要があります。オーバーフロー JS では、モバイル ブラウザーでコンテンツをスクロールすることができます。このため、私はScrollPane JSを使用しましたが、両方を一緒に使用したことはありません。なぜそれが機能しないのかわかりません。

注＃2

これについてさらに読んだ後、TinyScrollbarはあなたが望むことをするようです! 機能セクションに従って、モバイルブラウザでスクロールできます

于 2013-07-18T16:46:23.780 に答える