プライマー
使用してposition transform右から浮動層H5スライドの効果を達成するために、しかし、周りのスライド携帯電話のブラウザでは、ページがスクロールバーについて持っていた、浮動層が出てきました。これは、問題のページに次のように、モバイルクライアントアクセス：
この現象は、解決するために簡単に、問題は発生しないはずですが、なぜこのようにですか？彼はこの櫛ので、該当するポイントを知っていたが、程度は不明であるかのように彼は一瞬考えました。
理由
彼らが考えるするためにスクロールを生産し、それが自然であるoverflow財産、そして初見。
overflowプロパティブロックコンテナ要素のコンテンツがオーバーフローを切断するかどうかを指定しているoverflow-xとoverflow-y速記。
| 名前 | オーバーフロー |
|---|---|
| 可能な値 | 目に見えます |
| デフォルト値 | 目に見えます |
| それはに適用されます | コンテナブロックレベルフォーマットと確立されたボックスのコンテキスト |
| 承継 | ノー |
- 目に見える：この値は、内容がカットされないことを示し、ボックスの外側にレンダリングすることができます。
- 隠された：この値は、切断された内容を示し、クリップ領域の外側の内容を表示するためにスクロールするようにユーザインタフェースを提供してはなりません。
- スクロールは：この値は、切断された内容を表し、及び機構をスクロールユーザエージェントが使用する（例えば、スクロールバーまたはペイン）が画面上に表示されている場合に関係なく、ボックスのいずれかのコンテンツが切断されるかどうかの、機構は、ボックスが表示されなければなりません。これは、動的な環境での圧延すべての問題を避けるために表示され、原因ストリップを消えることです。この値が指定され、対象媒体が印刷される場合、オーバーフローコンテンツを印刷することができる、または印刷されないことがあり。ときに使用されるテーブルボックスときに、この値を用いて可視協調して作用します。
- 自動：この値は、従属ユーザエージェントを表すが、オーバーフローボックスのスクロール機構を提供すべきです。ときに使用されるテーブルボックスときに、この値を用いて可視協調して作用します。
上記の理解を通して、私はそれがあると評価修正したいautoブラウザが自動的にスクロールが内容に基づいているかどうかを判断します：の理解。その顔は、ケースのようですが、標準ではそうではありませんが、推奨しました。ユーザーエージェントは、スクロールを提供していない場合は、そうではありません、必ずしもユーザエージェントに依存しているスクロール、ではありません。
再度、上記の問題を分析し、次のように、メイン構造とスタイルは、次のとおりです。
<!doctype html>
<html>
<body>
<div class="pop"></div>
</body>
</html>html {overflow-x: hidden;}
html,body { height: 100%; }
body { position: relative; }
.pop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
transform: translateX(100%);
}body明示的に設定されていないoverflowので、デフォルトでは、値をvisible浮動層の使用に起因する、transform、表示領域を超えた確かに最初bodyのがoverflow有効です。
設定bodyの幅がページの効果を、モバイルアクセス端末は、次のとおりです。
調査結果はと一致しているoverflow: visible結果、何のスクロールは、周りのバーません。
その後、我々は以下の推測があります限り、表示領域を超えてスクロールを持っています。上記では、フローティング層に基づいて配置されtransformている可視領域外ページの効果、モバイルアクセス端末は、以下：
最初からではないことを推測、それもショーの結果のようなbodyスクロールを持っていましたが、ビューポートがスクロールを生産。情報を見つけるために続けて、次の規格が見つかりました：
ユーザーエージェントは、ルート要素に提供されなければならない
overflowプロパティは、ビューポートに適用されます。ルート要素は、HTML、HTML要素とそのときoverflowの値visible、およびそれが有するbody子孫、例えばAのユーザエージェントしなければならない最初の子孫要素として要素をoverflowビューポートの属性値。場合はvisible、ビューポートに適用され、それは次のように解釈されなければなりませんauto。値の広がりからの要素を持っている必要がありますoverflow値が使用されていますvisible。
上記の説明および実用試験から、我々は、ケース本体推定overflow圧延で得られ、上のビューポートにプロパティを。体を設定しoverflow-x: hidden、次のように、何も転がっ、およびモバイルクライアントアクセス見つかりませんでした。
追伸
IOSとAndroidで私達は4つのまたは5のブラウザでは、左右にスクロールして表示されますが、一部のAndroid携帯電話上のChromeブラウザがスクロールするようには見えなかった、例えば、6赤米の携帯電話をテストしました。もう一つのポイントは次のとおりです。PCクライアントのブラウザが転がって生成されません。
また、実際には、その標準は非常に明確ではありません、プラス標準は一つのことで、実装は、必ずしも様々な規格に準拠していません。
上記実際の試験データと併せて個人的な意見であり、そして、言ってそうであれば、本当に難しいが、思考の方向として使用することができます。