मेरी स्थिति: फ्लेक्सीबॉक्स का उपयोग करते समय चिपचिपा तत्व चिपचिपा नहीं है

Question

मैं इस पर थोड़ा अटक गया था और सोचा था कि मैं इस 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>

जेएसफिल्ड समस्या दिखा रहा है

Comments

क्या यह व्यवहार उन सभी ब्राउज़रों में बना रहता है जो समर्थन करते हैं position: stickyया सिर्फ एक / कुछ?

— टाइलर

@ टायलर मुझे विश्वास है कि यह सभी ब्राउज़र हैं। यह क्रोम और सफारी दोनों में इस तरह काम करता था।

— BHOLT

धन्यवाद। मैं फ़ायरफ़ॉक्स में होने वाली समस्या और समाधान की भी पुष्टि कर सकता हूँ।

— टाइलर

Answer 1

चूंकि फ्लेक्स बॉक्स तत्व डिफ़ॉल्ट होते हैं 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>

JSFiddle समाधान दिखा रहा है

Comments

यह केवल तब काम करता है जब इसमें मौजूद फ्लेक्स एलिमेंट के भीतर स्क्रॉल करते हैं - जब पूरी विंडो को स्क्रॉल करते हैं तो यह चिपकता नहीं है (कम से कम फ़ायरफ़ॉक्स में) - तो जो लोग विरोधाभासी व्यवहार का अनुभव कर रहे हैं उनके लिए यह अधिक संभावना है कि आप विरोधाभासी अपेक्षाओं का अनुभव कर रहे हैं (जैसे मैं था)

— aequalsb

@aequalsb क्या आप पूरे पृष्ठ को स्क्रॉल करते समय इसे छड़ी करने के तरीके के बारे में जानते हैं?

— डगलस गास्केल

@ डगलस प्रश्न भ्रामक है क्योंकि यह सुझाव देता है कि समस्या साथ है, flexboxलेकिन समस्या का stickyतत्व से अधिक लेना-देना है । इस फिडेल को देखें: jsfiddle.net/9y87zL5c जहां सेकंड रेड बॉक्स उम्मीद के मुताबिक काम करता है लेकिन FIRST रेड बॉक्स नहीं चिपकता है - इसलिए ... यह फ्लेक्सबॉक्स (इस तरह विरोधाभासी अपेक्षाओं) से संबंधित नहीं है ... ALH ... i परिणाम को और अधिक सटीक तरीके से देखने के लिए jabberwocky का एक गुच्छा जोड़ा।

— असाल्सब

Answer 2

मेरे मामले में, मूल कंटेनरों में से एक ने उस पर overflow-x: hidden;आवेदन किया था , जो position: stickyकार्यक्षमता को तोड़ देगा । आपको उस नियम को हटाने की आवश्यकता होगी।

किसी भी मूल तत्व पर उपरोक्त सीएसएस नियम लागू नहीं होना चाहिए। यह स्थिति 'शरीर' तत्व तक (लेकिन शामिल नहीं) तक सभी माता-पिता पर लागू होती है।

Comments

आप overflow-x:hiddenhtml एलिमेंट पर भी नहीं हो सकते ।

— शमूएल ल्यू

बहुत बहुत धन्यवाद। मैं हमेशा चिपचिपा स्थिति के साथ संघर्ष करता हूं और मुझे आपके जवाब को पढ़ने तक इस स्थिति के बारे में पता नहीं था। :)

— राफेल एलेक्सीओ

@SamuelLiew, हाँ आप overflow-x: hidden;HTML तत्व पर हो सकते हैं ।

— theoPlatica

@RaphaelAleixo मुझे खुशी है कि मैं मदद कर सकता हूं :)

— TheoPlatica

यह वही है जो मुझे एक चिपचिपा सही ढंग से काम करने से रोक रहा था। आपका बहुत बहुत धन्यवाद!

— MoOx

Answer 3

आप एक बाल डिव को फ्लेक्स आइटम में जोड़ने की कोशिश कर सकते हैं जो सामग्री के अंदर है और असाइन करें position: sticky; top: 0; और उसी को कर सकते हैं।

यह मेरे लिए दो कॉलम लेआउट के लिए काम करता है जहां पहले कॉलम की सामग्री चिपचिपी होनी चाहिए और दूसरा कॉलम स्क्रॉल करने योग्य दिखाई देता है।

Comments

पूरी तरह से सहमत हूं, यह सबसे सरल और विश्वसनीय विकल्प है जो मुझे मिल सकता है। इस तरह आप कंटेनर की ऊंचाई को नियंत्रित करके चिपके हुए को रोकने के लिए भी नियंत्रित कर पाएंगे।

— इब्राहिम बेन सलाह

Answer 4

मैंने एक फ्लेक्सिफ्ट फ्लेक्सबॉक्स टेबल बनाई और उसमें यह समस्या थी। इसे हल करने के लिए, मैं बस फ्लेक्सबॉक्स के बाहर चिपचिपा हेडर पंक्ति लगाता हूं, उसके ठीक पहले।

Answer 5

मेरी स्थिति के लिए, align-self: flex-start(या justify-self: flex-start) समाधान काम नहीं करता है। मुझे रखने की जरूरत हैoverflow-x: hidden कुछ कंटेनरों को क्षैतिज रूप से स्वाइप ।

मेरे समाधान नेस्ट की आवश्यकता display: flexके साथ overflow-y: autoवांछित व्यवहार पाने के लिए:

• हेडर गतिशील रूप से ऊंचाई को समायोजित कर सकता है, जो साथ खेलने से रोकता है position: absolute याposition: fixed
• सामग्री क्षैतिज रूप से स्क्रॉल होती है, दृश्य चौड़ाई के लिए क्षैतिज रूप से विवश होती है
• चिपचिपा तत्व कहीं भी लंबवत हो सकता है, हेडर के नीचे चिपके हुए
• अन्य तत्व क्षैतिज रूप से स्लाइड कर सकते हैं
  • ऐसा लगता है कि एसओ स्निपेट टूल 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>