Wie implementiert man Scroll-Locking-Divs in Mobile Safari?

Scroll-Locking Div in Mobile Safari

Während die Eigenschaft „position: Fixed“ für Elemente ein gängiger Ansatz für die feste Positionierung ist, ist sie stößt in Mobile Safari auf Einschränkungen. Aus Gmail ist jedoch eine clevere Lösung hervorgegangen, die eine schwebende Menüleiste in der Nachrichtenansicht anzeigt.

Bei dieser Technik wird ein Div mit einer festen Position erstellt und das window.onscroll-Ereignis von JavaScript verwendet, um seine oberste Eigenschaft beim Scrollen zu aktualisieren. So funktioniert es:

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

Dieser JavaScript-Code bindet an das Scroll-Ereignis des Fensters und passt die Top-Eigenschaft des „fixedDiv“-Elements an. Die Berechnung stellt sicher, dass das Div unabhängig von der Bildlaufposition am unteren Rand der Seite bleibt.

Dieser Ansatz erweist sich als besonders nützlich, wenn Elemente erstellt werden, die auf dem Bildschirm angezeigt bleiben, während der Benutzer durch den Inhalt scrollt. Ob für schwebende Menüs, Fortschrittsbalken oder andere interaktive Komponenten, diese Technik bietet eine zuverlässige Lösung für die feste Positionierung in Mobile Safari.

Das obige ist der detaillierte Inhalt vonWie implementiert man Scroll-Locking-Divs in Mobile Safari?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!