モバイル Safari でスクロールしてもアドレス バー/URL バーが変化しない
P粉768045522
P粉768045522 2023-08-16 12:29:00
0
1
483
<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>
P粉768045522
P粉768045522

全員に返信(1)
P粉251903163

モバイル Safari で URL バーを折りたたむ/縮小するには、body をビューポートからオーバーフローさせる必要がありますが、ここではそうではありません。body はスクロール可能ではありません。 ContentContainer は完全にビューポート内にあります。

これをテストするには、CSS を使用せずに新しいページを作成し、ページをスクロール可能にするのに十分なコンテンツを body に挿入します。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!