Obwohl das CSS-Attribut {position:fixed;}(meistens) auf neueren iOS-Geräten zu funktionieren scheint, ist es möglich, dass das Gerät {position:relative;}gelegentlich und ohne Grund oder Grund auf etwas zurückgreift und zurückfällt . Normalerweise hilft es, den Cache zu leeren, bis etwas passiert und die Eigenart wieder passiert.
Insbesondere von Apple selbst Vorbereiten Ihres Webinhalts für das iPad :
Safari auf dem iPad und Safari auf dem iPhone haben keine Fenster mit veränderbarer Größe. In Safari auf iPhone und iPad wird die Fenstergröße auf die Größe des Bildschirms festgelegt (abzüglich der Steuerelemente der Safari-Benutzeroberfläche) und kann vom Benutzer nicht geändert werden. Um sich auf einer Webseite zu bewegen, ändert der Benutzer die Zoomstufe und Position des Ansichtsfensters, indem er zum Vergrößern oder Verkleinern zweimal tippt oder drückt oder durch Berühren und Ziehen die Seite schwenkt. Wenn ein Benutzer die Zoomstufe und Position des Ansichtsfensters ändert, geschieht dies innerhalb eines sichtbaren Inhaltsbereichs fester Größe (dh des Fensters). Dies bedeutet, dass Webseitenelemente, deren Position im Ansichtsfenster "festgelegt" ist, außerhalb des sichtbaren Inhaltsbereichs außerhalb des Bildschirms landen können.
Was ironisch ist, Android-Geräte scheinen dieses Problem nicht zu haben. Es ist auch durchaus möglich, {position:absolute;}in Bezug auf das Body-Tag zu verwenden und keine Probleme zu haben.
Ich fand die Grundursache für diese Eigenart; dass es sich um das Scroll-Ereignis handelt, das in Verbindung mit dem HTML- oder BODY-Tag nicht gut abgespielt wird. Manchmal wird das Ereignis nicht gerne ausgelöst, oder Sie müssen warten, bis das Scroll-Swing-Ereignis beendet ist, um das Ereignis zu empfangen. Insbesondere wird das Ansichtsfenster am Ende dieses Ereignisses neu gezeichnet, und feste Elemente können an einer anderen Stelle im Ansichtsfenster neu positioniert werden.
Das mache ich also: ( Vermeiden Sie die Verwendung des Ansichtsfensters und bleiben Sie beim DOM! )
<html>
<style>
.fixed{
position:fixed;
/*you can set your other static attributes here too*/
/*like height and width, margin, etc.*/
}
.scrollableDiv{
position:relative;
overflow-y:scroll;
/*all children will scroll within this like the body normally would.*/
}
.viewportSizedBody{
position:relative;
overflow:hidden;
/*this will prevent the body page itself from scrolling.*/
}
</style>
<body class="viewportSizedBody">
<div id="myFixedContainer" class="fixed">
This part is fixed.
</div>
<div id="myScrollableBody" class="scrollableDiv">
This part is scrollable.
</div>
</body>
<script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
<script>
var theViewportHeight=$(window).height();
$('.viewportSizedBody').css('height',theViewportHeight);
$('#myScrollableBody').css('height',theViewportHeight);
</script>
</html>
Im Wesentlichen führt dies dazu, dass der KÖRPER die Größe des Ansichtsfensters hat und nicht scrollbar ist. Der im Inneren verschachtelte scrollbare DIV scrollt wie der KÖRPER normalerweise (abzüglich des Swing-Effekts, sodass das Scrollen am Touchend stoppt). Der feste DIV bleibt ohne Störung fixiert.
Als Randnotiz ist ein hoher z-indexWert für den festen DIV wichtig, damit der scrollbare DIV dahinter zu bleiben scheint. Normalerweise füge ich Ereignisse zur Größenänderung und zum Scrollen von Fenstern hinzu, um die Kompatibilität zwischen Browser und alternativer Bildschirmauflösung zu gewährleisten.
Wenn alles andere fehlschlägt, funktioniert der obige Code auch mit den festen und scrollbaren DIVs, die auf eingestellt sind {position:absolute;}.