যদিও সিএসএস অ্যাট্রিবিউটটি {position:fixed;}মনে হয় (বেশিরভাগই) নতুন আইওএস ডিভাইসে কাজ {position:relative;}করে তবে উপলক্ষ এবং কারণ বা কারণ ছাড়াই ডিভাইসটি কৌতুক এবং ফ্যালব্যাক পাওয়া সম্ভব । সাধারণত কিছুটা না ঘটে এবং ততক্ষণ ততক্ষণ ততক্ষণ না হওয়া পর্যন্ত ক্যাশে সাফ করা সহায়তা করবে।
বিশেষত, অ্যাপল নিজে থেকেই আইপ্যাডের জন্য আপনার ওয়েব সামগ্রী প্রস্তুত করছে :
আইপ্যাডে সাফারি এবং আইফোনে সাফারিগুলির আকার পরিবর্তনযোগ্য উইন্ডো নেই। আইফোন এবং আইপ্যাডের সাফারিতে, উইন্ডোর আকারটি স্ক্রিনের আকারে বিয়োগ করা হয় (বিয়োগ সাফারি ব্যবহারকারী ইন্টারফেস নিয়ন্ত্রণগুলি), এবং ব্যবহারকারীর দ্বারা পরিবর্তন করা যায় না। কোনও ওয়েবপৃষ্ঠায় ঘুরে দেখার জন্য, ব্যবহারকারী জুম বা আউট বা আউট করতে ডাবল আলতো চাপলে বা চিমটি দিয়ে বা পৃষ্ঠায় স্পর্শ করে এবং টেনে নিয়ে যাওয়ার সাথে সাথে ভিউপোর্টের জুম স্তর এবং অবস্থান পরিবর্তন করে। যখন ব্যবহারকারী কোনও স্থির আকারের (অর্থাৎ উইন্ডো) দেখা যায় এমন সামগ্রীর ক্ষেত্রের মধ্যে জুম স্তর এবং ভিউপোর্টের অবস্থান পরিবর্তন করে। এর অর্থ হল যে ওয়েবপৃষ্ঠা উপাদানগুলির ভিউপোর্টে তাদের অবস্থান "স্থির" রয়েছে তারা দৃশ্যমান সামগ্রী ক্ষেত্রের বাইরে, অফস্ক্রিনের বাইরে এসে শেষ করতে পারে।
ব্যঙ্গাত্মক কী, অ্যান্ড্রয়েড ডিভাইসগুলিতে এই সমস্যাটি আছে বলে মনে হয় না। এছাড়াও এটি ব্যবহার করা সম্পূর্ণভাবে সম্ভব{position:absolute;} বডি ট্যাগের রেফারেন্সে এবং কোনও সমস্যা না থাকলে ।
আমি এই ছটফট করার মূল কারণ খুঁজে পেয়েছি; এইচটিএমএল বা বডি ট্যাগের সাথে মিলিত হওয়ার সময় এটি স্ক্রোল ইভেন্টটি দুর্দান্ত খেলছে না। কখনও কখনও ইভেন্টটি ফায়ার করতে পছন্দ হয় না, বা ইভেন্টটি পাওয়ার জন্য আপনাকে স্ক্রোল সুইং ইভেন্টটি শেষ না হওয়া পর্যন্ত অপেক্ষা করতে হবে। বিশেষত, এই ইভেন্টের শেষে ভিউপোর্টটি আবার অঙ্কিত হয় এবং স্থির উপাদানগুলিকে ভিউপোর্টের অন্য কোথাও পুনরায় অবস্থিত করা যায়।
সুতরাং আমি এটিই করি: ( ভিউপোর্টটি ব্যবহার করা এড়িয়ে চলুন এবং ডিওএমের সাথে লেগে থাকো! )
<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>
সংক্ষেপে এটি দেহটি ভিউপোর্টের আকার এবং স্ক্রোলযোগ্য নয়। ভিতরে স্ক্রোলযোগ্য ডিআইভি স্বাভাবিকভাবে দেহ হিসাবে স্ক্রোল করবে (মাইনাস সুইং এফেক্ট, সুতরাং স্ক্রোলিং টাচেন্ডে থামবে না)) স্থির ডিআইভি হস্তক্ষেপ ছাড়াই স্থির থাকে।
পার্শ্ব নোট হিসাবে, z-indexস্থির ডিআইভিতে একটি উচ্চ মান স্ক্রোলযোগ্য ডিআইভি এর পিছনে উপস্থিত থাকার জন্য গুরুত্বপূর্ণ। আমি সাধারণত উইন্ডো আকার পরিবর্তন এবং ক্রস ব্রাউজার এবং বিকল্প স্ক্রিন রেজোলিউশন সামঞ্জস্যের জন্য ইভেন্টগুলি স্ক্রোল করি।
অন্য সমস্ত কিছু যদি ব্যর্থ হয় তবে উপরের কোডটি সেট করা স্থির এবং স্ক্রোলযোগ্য ডিআইভি উভয়ের সাথেই কাজ করবে {position:absolute;}।