स्थिति चिपचिपा iPhone चंचल

10

मेरे कोड के एक छोटे से टुकड़े के बाद। बस यह जानकर आश्चर्य होता है कि "iphone" सेल केवल iphone से क्यों टिमटिमा रहा है। पुनश्च। मैं संरचना के लिए तालिका या सूची का उपयोग नहीं कर सकता। मैंने भी प्रयोग करने की कोशिश की transform: translate3d(0,0,0);।

मूल रूप से मुझे पहले सेल की आवश्यकता है जो आईफोन और आईपैड पर लेफ्ट और टॉप दोनों के लिए चिपचिपा हो। मैं केवल HTML और CSS का उपयोग करना चाहूंगा।

जरूरी

कृपया, निश्चित समाधान के साथ उत्तर न दें , मुझे नहीं पता कि तालिका को शरीर में कहाँ रखा जाएगा। इसमें एक हेडर, कुछ कंटेंट आदि होंगे।

कोड स्निपेट दिखाएं

html  css 
— Vixed
स्रोत
क्या आपने वास्तविक आईफोन के साथ इस कोड स्निपेट की जांच की थी? क्योंकि यह मुझे ठीक लगता है।
— सनिरा
बेशक मैंने @Sanira
— Vixed
इसके साथ कुछ करने की संभावना: github.com/ampproject/amphtml/issues/…
— BugsArePeopleToo
1
@BugsArePeopleToo एक ही समस्या नहीं लगती है। मेरा मतलब है कि मुझे केवल एक सेल के साथ समस्या है, सभी के साथ नहीं।
— विक्षिप्त
@ क्या आप केवल एक सेल या टेबल की पहली पंक्ति के पूरे सेल को स्टिक करना चाहते हैं?
— दीपू रघुनाथ

जवाबों:

8

मैं हर समय iOS बनाम सब कुछ के साथ विषमता से लड़ता हूं। यह आमतौर पर स्टैकिंग संदर्भ मुद्दों को शामिल करता है। यह मुझे प्रतीत होता है कि तत्व position: stickyऔर left: 0तत्व iOS पर उस पहली पंक्ति के सापेक्ष बन जाते हैं। iOS अन्य सभी ब्राउज़रों की तरह ही स्टैकिंग संदर्भ को हैंडल नहीं करता है।

मैं वास्तव में कभी नहीं पता लगा कि यह क्या कारण है। तकनीकी रूप से आपका iPhone सेल स्क्रॉल करते हुए भी बाईं ओर अटका रहता है क्योंकि यह उसके माता-पिता के सापेक्ष होता है जिसके पास नहीं है left: 0। मैं यह मान रहा हूं कि iOS को कैसे हैंडल करना है position: sticky। चिपचिपा सापेक्ष शुरू होता है और फिर निश्चित में बदल जाता है। उस बिंदु पर अन्य सभी ब्राउज़र इसे बाईं ओर चिपका देते हैं। आपके position: sticky;अंदर एक position: sticky;तत्व है। यह एक नया स्टैकिंग प्रसंग है। मेरा मानना ​​है कि iOS इसे माता-पिता के लिए तय करता है न कि जिस तरह से आप उम्मीद करेंगे। चूंकि मूल पंक्ति नहीं हैleft: 0यह सब कुछ के साथ स्क्रॉल करने जा रहा है। आशा है कि ये आपकी मदद करेगा। मैंने कोई चंचलता नहीं देखी, लेकिन iOS 13 के स्क्रॉलिंग और स्टैकिंग संदर्भों को शामिल करने के बाद मेरी कंपनी के वेब ढांचे में कुछ टूटे हुए घटक थे। मैं कई iOS उपकरणों पर परीक्षण करूंगा।

इसके साथ कुछ और खेलने के बाद संपादित करें , मुझे विश्वास है कि यह एक स्टैकिंग संदर्भ मुद्दा है। मैंने केवल iphone सेल पर 1000 तक के z-index को क्रैंक किया और इसके नीचे STILL की पंक्तियाँ दिखाई देती हैं।

यहां छवि विवरण दर्ज करें

यदि आपको इंटरनेट एक्सप्लोरर का समर्थन नहीं करना है तो मैं इस लेआउट को प्राप्त करने के लिए CSS ग्रिड का उपयोग करूंगा। तो आप के बारे में चिंता करने की ज़रूरत नहीं होगीposition: sticky

https://css-tricks.com/snippets/css/complete-guide-grid/

https://css-tricks.com/using-css-grid-the-right-way/

मैं इसे व्यावसायिक अनुप्रयोगों में गतिशील डेटा भारी सामग्री के लिए उपयोग करता हूं, ताकि यदि इसे ठीक से इस्तेमाल किया जाए तो यह अविश्वसनीय रूप से लचीला हो सकता है।

फिर से अपडेट किया गया - यदि आप DOM को बिल्कुल नहीं बदल सकते हैं, तो आपको फ़्लिकरिंग से निपटना होगा क्योंकि ग्रिड समाधान के लिए कुछ तत्वों के आसपास रैपर की आवश्यकता होगी। बस स्पष्ट करने के लिए .... एक ग्रिड समाधान के साथ आपको यह जानने की आवश्यकता नहीं है कि आपके पास कितने कॉलम या पंक्तियाँ होंगी। आप उस पहलू पर लटके हुए लगते हैं। ग्रिड क्षेत्र एक नया स्टैकिंग संदर्भ भी बनाते हैं और ग्रिड क्षेत्र के सापेक्ष सब कुछ बनाते हैं जो कि लचीली इकाइयों की अनुमति देते समय होता है। जब तक आप दिखाते हैं कि आपका डायनामिक डेटा कैसे आ रहा है, मैं आपको इसका जवाब नहीं दे सकता। हमें आपको कोड समाधान देने के लिए और संदर्भ की आवश्यकता है।

फिर से, टिमटिमा रहा है क्योंकि आपके पास एक चिपचिपा तत्व है जो किसी अन्य चिपचिपा तत्व के अंदर है। यह सिर्फ iOS है और अगर आप इसे इस तरह से उपयोग करना चाहते हैं, तो आपको इसके साथ बस सौदा करना होगा।

यहाँ संदर्भों के ढेर के बारे में प्रलेखन है और वे कैसे काम करते हैं। जैसा कि मैंने एक टिप्पणी में कहा था, आपको एक अलग तरीका अपनाना होगा या उससे निपटना होगा।

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

इसके अलावा -

अपने HTML और बॉडी पर अतिप्रवाह छिपाएँ। मेज के चारों ओर एक आवरण रखें। -webkit-overflow-scrolling: autoरैपर पर रखें । इसे iOS 12 पर चलाएं और आप देखेंगे कि यह झिलमिलाहट नहीं है। हालांकि आपके पास गति स्क्रॉल नहीं होगी। iOS13 ने इसकी आवश्यकता को हटा दिया -webkit-overflow-scrollingताकि आप इसे ओवरराइड भी न कर सकें। आप का मान रखते हैं touchपर -webkit-overflow-scrollingअब आप झिलमिलाते हो जाएगी। इस कोड को नीचे चलाएं और आप देखेंगे कि यह झिलमिलाहट नहीं है। लंबी कहानी छोटी, जैसा कि मैंने कई बार कहा है कि आपको एक अलग दृष्टिकोण खोजना होगा। अब आप इसे ठीक नहीं कर सकते कि iOS13 बाहर है और आप वास्तव में किसी भी तरह स्क्रॉलिंग को निष्क्रिय नहीं करना चाहते हैं।

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>
स्निपेट का विस्तार करें

— ब्रेट पार्सन्स
स्रोत
हाय ब्रेट, आपके उत्तर के लिए धन्यवाद। दुर्भाग्य से मैं "ग्रिड" का उपयोग नहीं कर सकता क्योंकि पंक्तियों की संख्या और कॉलम गतिशील हैं। अगर मैं ग्रिड का उपयोग करूंगा तो मुझे कुछ JS के साथ इसका प्रबंधन करना पड़ेगा और मैं नहीं कर सकता।
— विक्सित
आप इसे गतिशील सामग्री के साथ उपयोग कर सकते हैं। मेरे द्वारा यह हर रोज किया जाता है। अगर मुझे आज समय मिलता है तो मैं कुछ कोड के साथ अपना जवाब अपडेट करूंगा।
— ब्रेट पार्सन्स
सीएसएस ग्रिड बना देगा जिसे अंतर्निहित ग्रिड ट्रैक्स कहा जाता है और सामग्री को आपके द्वारा परिभाषित स्पष्ट टेम्पलेट के साथ रखा जाएगा। मैंने डायनामिक लेआउट के साथ कुछ पागल सामान का उपयोग किया है।
— ब्रेट पार्सन्स
मुझे कॉलम की संख्या नहीं पता है। चौड़ाई यह 100vw नहीं है, लेकिन अधिक से अधिक!
— विक्सित
इस पर स्पष्टीकरण के लिए धन्यवाद कि क्या आपको IE का समर्थन करने की आवश्यकता है या नहीं। अब मैं आपको दिखाने के लिए समय बिता सकता हूं।
— ब्रेट पार्सन्स
-1

यदि आप तत्वों को पुनर्व्यवस्थित करते हैं, तो आप इसे प्राप्त कर सकते हैं।

body {
  margin: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}

.table {
  position: relative;
  width: 100%;
  height: 100%;
}

.tr {
  overflow: visible;
  display: block;
  white-space: nowrap;
  font-size: 0;
}

.tc {
  border: 1px solid #DDD;
  display: inline-block;
  width: 100px;
  min-height: 100px;
  text-align: center;
  font-size: 12px;
}

.trh,
.tc.first {
  background: #000;
  color: #FFF;
}

.table {
  overflow: hidden;
}

.table-body {
  display: flex;
  height: calc(100% - 102px);
}

.row-head {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-content {
  width: calc(100% - 102px);
  height: 100%;
  overflow: scroll;
}
<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="table-body">
    <div class="row-head">
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
    </div>
    <div class="table-content">
      <div class="tr">
        <div class="tc">1</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">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">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">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">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">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">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">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>
</div>
स्निपेट का विस्तार करें

— दीपू रघुनाथ
स्रोत
धन्यवाद दीपू, लेकिन यह चिपचिपा होना चाहिए, तय नहीं, क्योंकि मुझे नहीं पता कि तालिका कहां दिखाई देगी।
— विक्सित
प्रश्न में जोड़ा गया स्पष्टीकरण।
— विक्सित
@ विक्स मैंने समाधान अपडेट किया है
— दीपू
मैंने देखा, लेकिन आपने सभी डोम बदल दिए। जैसा कि मैंने कहा, मैं ऐसा नहीं कर सकता।
— विक्सित
@ मैंने आपके प्रश्न का उत्तर दिया, कृपया मेरे द्वारा पोस्ट किए गए समाधान की जांच करें, मैंने मेरा चिपचिपा बना दिया।
— डार्लिजी
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.