Wie kann verhindert werden, dass die Adressleiste in mobilen Browsern ausgeblendet wird, wenn die absolute Positionierung verwendet wird?

Adressierung der permanenten Adressleiste in mobilen Browsern

Es ist nicht ungewöhnlich, dass Websites mit unkonventionellen Layouts Probleme mit dem Mechanismus zum automatischen Ausblenden der Adressleiste in mobilen Browsern haben. Dies kann die Funktionalität beeinträchtigen und zu unbeabsichtigten Benutzererlebnissen führen.

Problem:

Websites, deren horizontales Layout stark auf absolute Positionierung mit JavaScript angewiesen ist, stoßen häufig auf das Problem des unbeabsichtigten Scrollens . Obwohl sich die Elemente innerhalb der Fensterhöhe befinden, bleibt die Adressleiste verborgen, was eine Reihe unerwünschter Ereignisse auslöst:

• Größenänderungsereignis, wenn dies nicht der Fall sein sollte
• Falsches Scrollverhalten beim vertikalen Scrollen Inhalt

Lösung:

Um dieses Verhalten beim automatischen Ausblenden zu verhindern, kann eine Kombination von CSS-Eigenschaften verwendet werden:

CSS-Code:

<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>

Erklärung:

• html { overflow: versteckt; }: Verhindert das Scrollen außerhalb des Ansichtsfensters.
• body { height: 100%; }: Stellt sicher, dass der Körper die gesamte Höhe des Ansichtsfensters einnimmt.
• body { position: fixiert; }: Fixiert den Körper im Ansichtsfenster und verhindert so das Scrollen.
• body { overflow-y: scroll; }: Ermöglicht vertikales Scrollen innerhalb des Körpers.
• body { -webkit-overflow-scrolling: touch; }: Optimiert das Scrollen für iOS-Touch-Geräte.

Diese Lösung sperrt effektiv die Adressleiste im erweiterten Zustand, sodass Benutzer innerhalb der gewünschten Inhaltsbereiche scrollen können, ohne unerwünschte Ereignisse auszulösen oder das visuelle Layout zu stören.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass die Adressleiste in mobilen Browsern ausgeblendet wird, wenn die absolute Positionierung verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!