Wie erreicht man eine feste Position in Mobile Safari?

Positionen in Mobile Safari fixieren

Die Positionierung eines Elements relativ zum Ansichtsfenster in Mobile Safari ist seit langem eine Herausforderung. Die herkömmliche Methode zur Verwendung von „position: Fixed“ schlägt in diesem Browser häufig fehl.

Alternative Lösung

Gmail hat kürzlich eine innovative Lösung eingeführt, die eine Annäherung an eine feste Position bietet. Der Trick besteht darin, die oberste Position des Elements beim Scrollen dynamisch anzupassen.

JavaScript-Implementierung

Diese alternative Methode kann mit nur wenigen Zeilen JavaScript implementiert werden:

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};

In diesem Code aktualisiert der Onscroll-Ereignis-Listener die oberste CSS-Eigenschaft des Elements mit der id="fixedDiv". Die verwendete Formel stellt sicher, dass das Element immer am unteren Rand des Ansichtsfensters positioniert ist, mit einem kleinen Versatz von 25 Pixeln.

Durch die ständige Anpassung der Position des Elements beim Scrollen simuliert dieser Code effektiv eine feste Position, die verankert bleibt zum Ansichtsfenster in Mobile Safari.

Das obige ist der detaillierte Inhalt vonWie erreicht man eine feste Position in Mobile Safari?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!