Feste Positionierung in Mobile Safari: Ein umfassender Leitfaden

Das Erreichen einer festen Positionierung für ein Element relativ zum Ansichtsfenster in Mobile Safari kann eine Herausforderung sein. Trotz der weit verbreiteten Meinung, dass „Position: fest“ in Mobile Safari nicht funktioniert, hat Gmail eine innovative Lösung eingeführt, die eine echte Annäherung an die tatsächliche feste Positionierung bietet.

Ein Ansatz zur Lösung dieses Problems besteht darin, JavaScript zu nutzen Erkennen Sie Scroll-Ereignisse in Echtzeit. Dadurch können Sie die Position eines Elements beim Scrollen der Seite dynamisch anpassen.

Um ein Div mit fester Position zu erreichen, das zum Ende der Seite scrollt, können Sie ein einfaches JavaScript-Skript implementieren:

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

Durch Anpassen der „top“-Eigenschaft des „fixedDiv“-Elements basierend auf dem Versatz und der Höhe der Seite behält das Div seine Position am unteren Rand des Ansichtsfensters bei, während der Benutzer scrollt. Die Einstellung „25“ stellt sicher, dass das Div für eine optimale Anzeige leicht vom unteren Bildschirmrand versetzt ist.