CSS özelliği {position:fixed;}(çoğunlukla) daha yeni iOS cihazlarda çalışıyor gibi görünse de, cihazın tuhaflık ve geri dönüşünün olması mümkündür.{position:relative;} ara sıra ve sebep veya sebep olmaksızın . Genellikle önbelleği temizlemek, bir şey olana ve tuhaflık tekrar olana kadar yardımcı olacaktır.
Özellikle, Apple'ın kendi Web İçeriğinizi iPad için Hazırlaması :
İPad'de Safari ve iPhone'da Safari'de yeniden boyutlandırılabilir pencereler yoktur. İPhone ve iPad'deki Safari'de, pencere boyutu ekran boyutuna (eksi Safari kullanıcı arayüzü kontrolleri) ayarlanmıştır ve kullanıcı tarafından değiştirilemez. Bir web sayfasında hareket etmek için, kullanıcı yakınlaştırmak veya uzaklaştırmak için iki kez dokunarak veya kıstırırken ya da sayfayı kaydırmak için dokunup sürükleyerek görüntü alanının yakınlaştırma düzeyini ve konumunu değiştirir. Bir kullanıcı, görüntü portunun yakınlaştırma seviyesini ve konumunu değiştirdikçe, bunu sabit boyutlu bir görüntülenebilir içerik alanı (yani pencere) içinde yapmaktadır. Bu, konumları görüntü alanına "sabit" olan web sayfası öğelerinin, ekran dışında görüntülenebilir içerik alanının dışına çıkabileceği anlamına gelir.
İronik olan, Android cihazlarda bu sorun görünmüyor. Ayrıca {position:absolute;}body etiketine atıfta bulunulduğunda ve herhangi bir sorun yaşamadığında kullanmak tamamen mümkündür .
Bu tuhaflığın temel nedenini buldum; HTML veya BODY etiketi ile birlikte kullanıldığında iyi oynamayan kaydırma olayıdır. Bazen olayı tetiklemeyi sevmez veya olayı almak için scroll swing olayı bitene kadar beklemeniz gerekir. Özellikle, görüntü alanı bu olayın sonunda yeniden çizilir ve sabit öğeler görüntü alanında başka bir yere yeniden konumlandırılabilir.
İşte yaptığım şey şu: ( görüntü alanını kullanmaktan kaçının ve DOM'a bağlı kalın! )
<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>
Temelde bu, BODY'nin görüntü alanı boyutunda olmasına ve kaydırılamaz olmasına neden olacaktır. İçeride yuvalanmış kaydırılabilir DIV, BODY'nin normalde yapacağı gibi kaydırılır (eksi salınım efekti, böylece kaydırma, dokunmatik uçta durur.) Sabit DIV, parazit olmadan sabit kalır.
Bir yan not z-indexolarak, sabit DIV'de yüksek bir değer, kaydırılabilir DIV'nin arkasında görünmesini sağlamak için önemlidir. Normalde, çapraz tarayıcı ve alternatif ekran çözünürlüğü uyumluluğu için pencere yeniden boyutlandırma ve kaydırma olayları eklerim.
Her şey başarısız olursa, yukarıdaki kod hem sabit hem de kaydırılabilir DIV'ler olarak ayarlandığında da çalışacaktır {position:absolute;}.