भले ही सीएसएस विशेषता {position:fixed;}लगता है (ज्यादातर) नए आईओएस उपकरणों पर काम कर रहा है, डिवाइस क्विक और फॉलबैक होना संभव है{position:relative;} अवसर पर और कारण या कारण के बिना । आमतौर पर कैश को साफ करने से तब तक मदद मिलेगी, जब तक कि कुछ घटित न हो जाए और क्वर्की फिर से न हो जाए।
विशेष रूप से, Apple से ही iPad के लिए आपकी वेब सामग्री तैयार करना :
आईपैड पर सफारी और आईफोन पर सफारी में रिसाइबल विंडो नहीं हैं। IPhone और iPad पर Safari में, विंडो का आकार स्क्रीन के आकार (माइनस सफारी उपयोगकर्ता इंटरफ़ेस नियंत्रण) पर सेट है, और उपयोगकर्ता द्वारा बदला नहीं जा सकता है। किसी वेबपेज पर घूमने के लिए, उपयोगकर्ता व्यूपोर्ट के ज़ूम स्तर और स्थिति को बदल देता है क्योंकि वे पेज को पैन करने के लिए ज़ूम इन या आउट करने के लिए डबल टैप या पिंच करते हैं, या पेज को छूने और खींचने के द्वारा। जैसा कि एक उपयोगकर्ता दृश्यपोर्ट के ज़ूम स्तर और स्थिति को बदलता है, वे निश्चित आकार के एक देखने योग्य सामग्री क्षेत्र (यानी, खिड़की) के भीतर ऐसा कर रहे हैं। इसका मतलब यह है कि वेबपेज तत्व जिनकी व्यूपोर्ट के लिए "स्थिति" निर्धारित है, वे देखने योग्य सामग्री क्षेत्र, ऑफ़स्क्रीन के बाहर समाप्त हो सकते हैं।
क्या विडंबना है, एंड्रॉइड डिवाइसों में यह समस्या नहीं है। इसके अलावा इसका उपयोग करना पूरी तरह से संभव है{position:absolute;} जब शरीर के टैग के संदर्भ में और कोई समस्या न हो।
मुझे इस विचित्रता का मूल कारण मिला; यह HTML या BODY टैग के साथ संयोजन में उपयोग किए जाने पर स्क्रॉल इवेंट अच्छा नहीं है। कभी-कभी यह घटना को फायर करना पसंद नहीं करता है, या आपको तब तक इंतजार करना होगा जब तक कि घटना को प्राप्त करने के लिए स्क्रॉल स्विंग इवेंट समाप्त न हो जाए। विशेष रूप से, इस घटना के अंत में व्यूपोर्ट फिर से तैयार किया जाता है और निश्चित तत्वों को व्यूपोर्ट में कहीं और फिर से तैनात किया जा सकता है।
तो यह वही है जो मैं करता हूं: ( व्यूपोर्ट का उपयोग करने से बचें, और डोम के साथ रहें! )
<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>
संक्षेप में यह बॉडी व्यूपोर्ट के आकार और गैर-स्क्रॉल करने योग्य होगा। स्क्रॉल किए गए DIV के अंदर नेस्टेड BODY होगा जैसा कि सामान्य रूप से होगा (स्विंग इफ़ेक्ट माइनस होगा, इसलिए स्क्रॉल टचडाउन पर होता है।) निश्चित DIV बिना किसी व्यवधान के स्थिर रहता है।
एक साइड नोट के रूप में, z-indexस्क्रॉल किए जाने वाले DIV को पीछे रखने के लिए निश्चित DIV पर एक उच्च मूल्य महत्वपूर्ण है। मैं सामान्य रूप से विंडो के आकार में परिवर्तन करता हूं और क्रॉस-ब्राउज़र और वैकल्पिक स्क्रीन रिज़ॉल्यूशन संगतता के लिए ईवेंट स्क्रॉल करता हूं।
यदि अन्य सभी विफल हो जाते हैं, तो उपरोक्त कोड भी निर्धारित और स्क्रॉल किए गए दोनों डीआईवाई के साथ काम करेगा {position:absolute;}।