ホームページ  >  記事  >  ウェブフロントエンド  >  絶対位置指定を使用するときに、モバイル ブラウザでアドレス バーが非表示にならないようにするにはどうすればよいですか?

絶対位置指定を使用するときに、モバイル ブラウザでアドレス バーが非表示にならないようにするにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-10-31 06:28:01491ブラウズ

How to Prevent the Address Bar from Hiding in Mobile Browsers When Using Absolute Positioning?

モバイル ブラウザの永続アドレス バーの対処

型破りなレイアウトを持つ Web サイトで、モバイル ブラウザのアドレス バーの自動非表示メカニズムの問題に直面することは珍しくありません。これにより、機能が中断され、意図しないユーザー エクスペリエンスが生じる可能性があります。

問題:

水平レイアウトで JavaScript による絶対位置に大きく依存している Web サイトでは、意図しないスクロールの問題が発生することがよくあります。 。要素がウィンドウの高さの範囲内にあるにもかかわらず、アドレス バーは非表示のままで、一連の望ましくないイベントがトリガーされます:

  • 必要のないサイズ変更イベント
  • 垂直スクロール可能での不正なスクロール動作content

解決策:

この自動非表示動作を防ぐには、CSS プロパティの組み合わせを利用できます:

CSSコード:

<code class="css">html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
}</code>

説明:

  • html { オーバーフロー: 非表示; }: ビューポート外でのスクロールを防ぎます。
  • body { height: 100%; }: ボディがビューポートの高さ全体を占めるようにします。
  • body {position: 固定; }: ボディをビューポートに固定し、スクロールできないようにします。
  • body { overflow-y:scroll; }: 本文内の垂直スクロールを有効にします。
  • body { -webkit-overflow-scrolling: touch; }: iOS タッチ デバイスのスクロールを最適化します。

このソリューションは、アドレス バーを展開状態で効果的にロックするため、ユーザーは不要なイベントを引き起こしたり、視覚的なレイアウトを中断したりすることなく、目的のコンテンツ領域内をスクロールできます。

以上が絶対位置指定を使用するときに、モバイル ブラウザでアドレス バーが非表示にならないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。