モバイル Safari でスクロールしてもアドレス バー/URL バーが変化しない
P粉768045522
2023-08-16 12:29:00
<p>React (16.8.6) を使用して Web サイトを構築していますが、モバイル Safari では、ユーザーがスクロールを開始しても、他の Web サイトのように URL バーが折りたたまれたり縮小されません。 </p>
<p>ラッピング div の CSS は次のようになります: </p>
<p><br /></p>
<pre class="brush:js;toolbar:false;"><ContentContainer>
<スクロールコンテナ>
{...その他のコンポーネントはこちら}
<ScrollContainer/>
<ContentContainer/></pre>
<pre class="brush:css;toolbar:false;">const ContentContainer = styled.div`
height: 100%; /*ブラウザ ウィンドウの高さ全体を 2 つの列が占めることを許可します*/
オーバーフロー-y: 自動;
フレックスグロー: 1;
ディスプレイ: フレックス;
フレックス方向: 列;
`;
const ScrollContainer = styled.div`
フレックス: 1;
`;
<p><br /></p>
<p>App.css は次のようになります:</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">html {
高さ: 100%;
最小高さ: 100vh;
}
体 {
フォントファミリー: 'Work Sans'、'Courier New'、サンセリフ;
最小高さ: 100%;
高さ: 100%;
マージン: 0px;
}
#アプリ {
高さ: 100%;
}
#根 {
高さ: 100%;
ディスプレイ: フレックス;
overflow: hidden; /*本文をスクロール不可にします*/
ボックスのサイズ設定: ボーダーボックス;
}</pre>
<p><br /></p>
<p>この CSS で、ユーザーがスクロールするときに Safari の URL バーが折りたたまれないようにする問題を解決しようとしています。助けてくれてありがとう。 </p>
モバイル Safari で URL バーを折りたたむ/縮小するには、
body
をビューポートからオーバーフローさせる必要がありますが、ここではそうではありません。body
はスクロール可能ではありません。ContentContainer
は完全にビューポート内にあります。これをテストするには、CSS を使用せずに新しいページを作成し、ページをスクロール可能にするのに十分なコンテンツを
body
に挿入します。