আমার অবস্থান: ফ্লেক্সবক্স ব্যবহার করার সময় স্টিকি উপাদান চটচটে নয়

Question 1

আমি এটির জন্য কিছুটা আটকে ছিলাম এবং ভেবেছিলাম আমি এই position: sticky+ ফ্লেক্সবক্স গোছাটি ভাগ করব :

আমার স্টিকি ডিভ ঠিকঠাক কাজ করছিল যতক্ষণ না আমি আমার ভিউটিকে একটি ফ্লেক্স বক্স ধারকটিতে স্যুইচ করেছিলাম, এবং হঠাৎ ডিভিটি কোনও ফ্লেক্সবক্স প্যারেন্টে আবৃত হওয়ার পরে আঠালো ছিল না।

.flexbox-wrapper {
  display: flex;
  height: 600px;
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
}

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

স্নিপেট প্রসারিত করুন

জেএসফিডাল সমস্যা দেখাচ্ছে

Question 2

যেহেতু ফ্লেক্স বাক্স উপাদানগুলি ডিফল্ট হয় stretch, সমস্ত উপাদান একই উচ্চতা, যার বিরুদ্ধে স্ক্রোল করা যায় না।

align-self: flex-startস্টিকি উপাদানটিতে যুক্ত করে অটোকে উচ্চতা সেট করে যা স্ক্রোলিংয়ের অনুমতি দেয় এবং এটি স্থির করে দেয়।

বর্তমানে এটি সমস্ত বড় ব্রাউজারগুলিতে সমর্থিত তবে সাফারি এখনও একটি -webkit-উপসর্গের পিছনে রয়েছে এবং ফায়ারফক্স বাদে অন্যান্য ব্রাউজারগুলিতে position: stickyটেবিলগুলির সাথে কিছু সমস্যা রয়েছে ।

.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;          /* Not necessary -- for example only */
}
.regular {
  background-color: blue; /* Not necessary -- for example only */
  height: 600px;          /* Not necessary -- for example only */
}
.sticky {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  align-self: flex-start; /* <-- this is the fix */
  background-color: red;  /* Not necessary -- for example only */
}

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

স্নিপেট প্রসারিত করুন

সমাধান দেখাচ্ছে জেএসফিডাল showing

Question 3

আমার ক্ষেত্রে, পিতামাতার একটি ধারক এতে overflow-x: hidden;প্রয়োগ করেছিল, যা position: stickyকার্যকারিতা ভঙ্গ করবে । আপনাকে এই নিয়মটি সরিয়ে ফেলতে হবে।

কোনও প্যারেন্ট উপাদানকে উপরের সিএসএস বিধি প্রয়োগ করা উচিত নয়। এই শর্তটি সমস্ত পিতামাতার জন্য 'দেহ' উপাদান পর্যন্ত (তবে অন্তর্ভুক্ত নয়) প্রযোজ্য।

Question 4

আপনি ভিতরে থাকা সামগ্রীগুলি সহ ফ্লেক্স আইটেমটিতে একটি শিশু ডিভ যুক্ত করার চেষ্টা করতে পারেন এবং এটি নির্ধারণ position: sticky; top: 0;করতে পারেন।

এটি আমার জন্য একটি দুটি কলামের বিন্যাসের জন্য কাজ করেছিল যেখানে প্রথম কলামের বিষয়বস্তু স্টিকি হওয়া দরকার এবং দ্বিতীয় কলামটি স্ক্রোলযোগ্য প্রদর্শিত হবে।

Question 5

আমি একটি অস্থায়ী ফ্লেক্সবক্স টেবিল তৈরি করেছি এবং এই সমস্যাটি ছিল। এটি সমাধান করার জন্য, আমি কেবল ঠিক এর আগে, ফ্লেক্সবক্সের বাইরে স্টিকি হেডার সারিটি রেখেছিলাম।

Question 6

আমার পরিস্থিতির জন্য, align-self: flex-start(বা justify-self: flex-start) সমাধান কাজ করে না। overflow-x: hiddenকিছু পাত্রে অনুভূমিকভাবে সোয়াইপ করায় আমার পাশাপাশি রাখা দরকার ।

আমার সমাধান নেস্টেড প্রয়োজনীয় display: flexসঙ্গে overflow-y: autoআকাঙ্ক্ষিত আচরণ পেতে:

শিরোনামটি গতিময়ভাবে উচ্চতা সামঞ্জস্য করতে পারে যা position: absoluteবা এর সাথে খেলতে বাধা দেয়position: fixed
বিষয়বস্তু উল্লম্বভাবে স্ক্রল করে, দেখার প্রস্থে অনুভূমিকভাবে সীমাবদ্ধ
স্টিকি উপাদানটি হাইডারের নীচে লেগে থাকা, উল্লম্বভাবে যে কোনও জায়গায় থাকতে পারে
অন্যান্য উপাদানগুলি অনুভূমিকভাবে স্লাইড করতে পারে
- মনে হচ্ছে SO স্নিপেট সরঞ্জামটি widthঅনুভূমিক স্লাইডটি সঠিকভাবে প্রদর্শনের জন্য শিশু উপাদানগুলিতে যথাযথভাবে রেন্ডার করতে পারে না বা হতে পারে আমার আসল বিন্যাসে অন্য কোনও সেটিংস রয়েছে যা এটি কার্যকর করে তোলে ...
- মনে রাখবেন যে একটি মোড়কের উপাদান যা অন্য কিছু করে না তার overflow-x: autoসাথে পিতামাতার অধীনে উপাদানগুলিতে সঠিকভাবে কাজ করার অনুমতি দেওয়া প্রয়োজনoverflow-x: hidden

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

body>header {
  background-color: red;
  color: white;
  padding: 1em;
}

.content {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.horizontal_slide {
  display: flex;
  overflow-x: auto;
  background-color: lightblue;
  padding: .5em;
}

.horizontal_slide>* {
  width: 1000px;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: lightgray;
  padding: .5em;
  display: flex;
}

<header>Fancy header with height adjusting to variable content</header>
<div class="content">
  <article class="card">
    <h1>One of several cards that flips visibility</h1>
    <div class="overflow_x_wrapper">
      <div class="horizontal_slide">
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
      </div>
      <div class="toolbar">Sticky toolbar part-way down the content</div>
      <p>Rest of vertically scrollable container with variable number of child containers and other elements</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  </div>

স্নিপেট প্রসারিত করুন