আমি সর্বদা আইওএস বনাম সমস্ত কিছু দিয়ে বিজোড়নের সাথে লড়াই করি। এটি সাধারণত প্রাসঙ্গিক বিষয়াদি জড়িত জড়িত। আমার কাছে এটি উপস্থিত হয় যে position: stickyএবং left: 0উপাদানটি আইওএসের প্রথম সারির সাথে আপেক্ষিক হয়ে ওঠে। অন্য সমস্ত ব্রাউজারের মতো স্ট্যাকিং প্রসঙ্গে আইওএস হ্যান্ডল করে না।
এর কারণ কী তা আমি কখনই সত্যই বুঝতে পারি নি। প্রযুক্তিগতভাবে আপনার আইফোন সেলটি স্ক্রল করার পরেও বাম দিকে আটকে থাকে কারণ এটি এর পিতামাতার সাথে সম্পর্কিত নয় যা নেই left: 0। আমি ধরে নিচ্ছি যে এটি আইওএস হ্যান্ডল করে কী করে তা করতে হয় position: sticky। স্টিকি আপেক্ষিকভাবে শুরু হয় এবং তারপরে স্থির হয়ে যায়। এই সময়ে অন্যান্য সমস্ত ব্রাউজারগুলি এটিকে বাম দিকে আটকে রাখবে। আপনার একটি position: sticky;উপাদানের ভিতরে একটি position: sticky;উপাদান রয়েছে। এটি একটি নতুন স্ট্যাকিং প্রসঙ্গে। আমি বিশ্বাস করি যে iOS এটির মূল পিতা-মাতার সাথে সংশোধন করে এবং এটি আপনার প্রত্যাশার মতো নয়। যেহেতু প্যারেন্ট সারি নেইleft: 0এটি অন্য কিছুর সাথে স্ক্রোল করতে চলেছে। আশা করি এটা কাজে লাগবে. আমি কোনও ঝাঁকুনি দেখেনি, তবে আইওএস 13 এর বাইরে স্ক্রোলিং এবং স্ট্যাকিং প্রসঙ্গে জড়িত থাকার পরে আমার সংস্থার ওয়েব কাঠামোর কয়েকটি ভাঙা উপাদান ছিল। আমি একাধিক আইওএস ডিভাইসে পরীক্ষা করব would
এটির সাথে আরও কিছু খেলার পরে সম্পাদনা করুন , আমি নিশ্চিত যে এটি একটি স্ট্যাকিং প্রসঙ্গ সমস্যা। আমি কেবল আইফোন সেলটিতে জেড-ইনডেক্সটি 1000 পর্যন্ত ক্র্যাঙ্ক করেছি এবং তারপরেও নীচের সারিগুলি প্রদর্শিত হবে।
আপনি যদি ইন্টারনেট এক্সপ্লোরারকে সমর্থন না করেন তবে আমি এই লেআউটটি অর্জন করতে সিএসএস গ্রিড ব্যবহার করব। তাহলে আপনাকে চিন্তিত হতে হবে নাposition: sticky
https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/using-css-grid-the-right-way/
আমি এটি ব্যবসায়িক অ্যাপ্লিকেশনগুলিতে গতিশীল ডেটা ভারী সামগ্রীর জন্য ব্যবহার করি যাতে সঠিকভাবে লিভারেজ করা হলে এটি অবিশ্বাস্যভাবে নমনীয় হতে পারে।
আবার আপডেট করা হয়েছে - আপনি যদি ডমকে কিছুটা পরিবর্তন করতে না পারেন তবে আপনাকে ঝাঁকুনির সাথে মোকাবিলা করতে হবে কারণ গ্রিড সমাধানের জন্য কিছু উপাদানগুলির চারপাশে মোড়কের প্রয়োজন হবে। কেবল স্পষ্ট করে বলার জন্য .... গ্রিড সমাধান সহ আপনার কতগুলি কলাম বা সারি থাকবে তা জানা দরকার নেই। আপনি সেই দিকটি ঝুলিয়ে রেখেছেন বলে মনে হচ্ছে। গ্রিড অঞ্চলগুলি একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করে এবং নমনীয় ইউনিটগুলির অনুমতি দেওয়ার সময় গ্রিডের সাথে সম্পর্কিত সমস্ত কিছু তৈরি করে। আপনার গতিশীল ডেটা কীভাবে আসছে তা না দেখানো পর্যন্ত আমি আপনাকে উত্তর দিতে পারব না a আপনাকে কোড সমাধান দেওয়ার জন্য আমাদের আরও প্রসঙ্গের প্রয়োজন need
আবার, জ্বলজ্বলে ঘটছে কারণ আপনার অন্য স্টিকি উপাদানের অভ্যন্তরে একটি স্টিকি অবস্থানযুক্ত উপাদান রয়েছে। এটি কেবল আইওএস এবং আপনি যদি এটির মতো এটি ব্যবহার করতে চান তবে আপনাকে কেবল এটির সাথে ডিল করতে হবে।
স্ট্যাকিং প্রসঙ্গে এবং কীভাবে তারা কাজ করে সে সম্পর্কে এখানে ডকুমেন্টেশন। আমি যেমন একটি মন্তব্যে বলেছি, আপনাকে অন্যরকম পদ্ধতি গ্রহণ করতে হবে বা কেবল এটি মোকাবেলা করতে হবে।
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
এছাড়াও -
আপনার এইচটিএমএল এবং দেহে ওভারফ্লো লুকান। টেবিলের চারপাশে একটি মোড়ক রাখুন। Wra -webkit-overflow-scrolling: autoেকে রাখুন । এটি আইওএস 12 এ চালান এবং আপনি দেখতে পাবেন যে এটি ঝাঁকুনি নয়। যদিও আপনার গতিবেগ স্ক্রোলিং হবে না। আইওএস 13 আপনার প্রয়োজনীয়তা সরিয়ে ফেলেছে -webkit-overflow-scrollingযাতে আপনি এটি ওভাররাইডও করতে পারবেন না। আপনি মান করিয়ে দিলে touchউপর -webkit-overflow-scrollingআপনি এখন ঝিকিমিকি করা হবে। নীচে এই কোডটি চালান এবং আপনি এটি ঝাঁকুনি না দেখবেন। দীর্ঘ গল্প সংক্ষিপ্ত, যেমনটি আমি বলেছি অনেকবার আপনাকে আলাদা পদ্ধতির সন্ধান করতে হবে। আপনি এখন এটি ঠিক করতে পারবেন না যে আইওএস 13 শেষ হয়েছে এবং আপনি যেভাবেই গতিবেগ স্ক্রোলিং অক্ষম করতে চান না।
html {
overflow: hidden;
width: 100%;
height: 100%;
}
body {
overflow: hidden;
height: 100%;
width: 100%;
}
.wrapper {
overflow: auto;
-webkit-overflow-scrolling: auto;
width: 100%;
height: 100%;
}
.table {
width: 2000px;
position: relative;
}
.tr {
overflow: visible;
display: block;
white-space: nowrap;
font-size: 0;
}
.tc {
border: 1px solid #DDD;
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
font-size: 12px;
}
.trh {
background: #000;
color: #FFF;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
}
.tc.first {
background: #000;
color: #FFF;
position: -webkit-sticky;
position: sticky;
left: 0;
}
<html>
<head>
<link rel="stylesheet" href="css.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<div class="table">
<div class="tr trh">
<div class="tc first">Iphone</div>
<div class="tc">value</div>
<div class="tc">value</div>
<div class="tc">value</div>
<div class="tc">value</div>
<div class="tc">value</div>
<div class="tc">value</div>
<div class="tc">value</div>
<div class="tc">value</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">2</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
<div class="tr">
<div class="tc first">a set</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
<div class="tc">0</div>
</div>
</div>
</div>
</body>
</html>