परिदृश्य लगभग हमेशा एकही होला, जवन स्क्रॉल करे लायक कंटेनर के भीतर एगो डेटा टेबल होला। हर पंक्ति में एगो एक्शन मेनू होला, एगो छोट ड्रॉपडाउन होला जवना में कुछ विकल्प होला, जइसे कि संपादन, डुप्लिकेट, आ हटावल. रउरा एकरा के बनाईं, लागत बा कि ई आइसोलेशन में एकदम सही काम करेला, आ फेर केहू ओकरा के ओह स्क्रॉल करे लायक डिव का भीतर डाल देला आ चीजन के टूट-फूट हो जाला. हम ई सटीक बग तीन गो अलग-अलग कोडबेस में देखले बानी: कंटेनर, स्टैक, आ फ्रेमवर्क, सब अलग-अलग. बग हालांकि एकदम एके जइसन बा. ड्रॉपडाउन कंटेनर के किनारे पर क्लिप हो जाला. या फिर ऊ सामग्री के पीछे लउकेला जवन तार्किक रूप से ओकरा नीचे होखे के चाहीं. या फिर ई ठीक से काम करेला जब तक कि यूजर स्क्रॉल ना करेला, आ ओकरा बाद ई बह जाला। रउआ z-index: 9999 तक पहुँच जाईं, कबो-कबो त मदद मिलेला, लेकिन कबो-कबो बिल्कुल कुछ ना करेला। ऊ असंगति पहिला सुराग ह कि कुछ गहिराह हो रहल बा. एकर वापस आवे के कारण ई बा कि एह में तीन गो अलग-अलग ब्राउजर सिस्टम शामिल बाड़ें आ ज्यादातर डेवलपर लोग हर एक के अपना आप समझे ला बाकी कबो ई ना सोचे ला कि जब तीनों के टकरा जाला तब का होला: ओवरफ्लो, स्टैकिंग कॉन्टैक्ट, आ कंटेंटिंग ब्लॉक।
एक बेर जब रउरा समझ जाईं कि तीनों के बीच कइसे बातचीत होला त फेल होखे के मोड बेतरतीब महसूस कइल बंद कर देला. असल में ऊ लोग पूर्वानुमानित हो जाला. असल में एकर कारण बनल तीन गो बात आईं ओह हर आइटम के विस्तार से देखल जाव. ओवरफ्लो के समस्या के बारे में बतावल गईल जब रउआँ कौनों तत्व पर ओवरफ्लो: छिपल, ओवरफ्लो: स्क्रॉल, या ओवरफ्लो: ऑटो सेट करीं, ब्राउजर कौनों भी चीज के क्लिप करी जे एकरे सीमा से बाहर ले फइलल होखे, बिल्कुल स्थिति में मौजूद वंशज लोग भी सामिल बा। .स्क्रॉल-कंटेनर { 1999 के बा। ओवरफ्लो: ऑटो के बा; ऊंचाई: 300px बा; /* एह से ड्रॉपडाउन के क्लिप हो जाई, फुल स्टॉप */ } 1999 में भइल रहे।
.ड्रॉपडाउन { 1999 के बा। स्थिति: निरपेक्ष बा; /* कवनो फर्क नइखे पड़त -- अबहियों .scroll-container द्वारा क्लिप कइल गइल बा */ } 1999 में भइल रहे।
जवन हमरा पहिला बेर एकरा से टकरा के अचरज में डाल दिहलस। I’d assumed position: absolute कवनो तत्व के कवनो कंटेनर के क्लिपिंग से बचे देला. अइसन नइखे होखत. व्यवहार में एकर मतलब बा कि बिल्कुल पोजीशन वाला मेनू के कवनो पूर्वज द्वारा काट दिहल जा सकेला जवना के गैर-दृश्यमान ओवरफ्लो मान होखे, भले ऊ पूर्वज मेनू के युक्त ब्लॉक ना होखे. क्लिपिंग आ पोजीशनिंग अलग-अलग सिस्टम हवें। बस संजोग से ई लोग अइसन तरीका से टकरा जाला जवन पूरा तरह से बेतरतीब लउकेला जबले रउरा दुनु के ना समझ लेब.
इहाँ createPortal के इस्तेमाल से एगो React उदाहरण दिहल गइल बा:
'रिएक्ट-डॉम' से आयात { createPortal }; आयात { useState, useEffect, useRef } 'प्रतिक्रिया' से;
फंक्शन ड्रॉपडाउन ({ anchorRef, isOpen, बच्चा }) { 1। const [स्थिति, setPosition] = useState ({ ऊपर: 0, बाईं ओर: 0 });
useEffect (() => { के बा। अगर (isOpen && anchorRef.current) { बा। const rect = एंकररेफ.वर्तमान.गेटबाउंडिंगक्लाइंटरेक्ट (); सेटपोजिशन ({ के बा। ऊपर: rect.bottom + विंडो.स्क्रॉलवाई, 1999 के बा। बाईं ओर: rect.left + विंडो.स्क्रॉलएक्स, 1। }); } 1999 में भइल रहे। }, [इजओपन, एंकरसंदर्भ]);
अगर (!isOpen) शून्य वापस करीं;
रिटर्न बनाईं पोर्टल ( 1000 के बा।
आ, बेशक, हमनी का सुलभता के अनदेखी नइखीं कर सकत. सामग्री के ऊपर आवे वाला फिक्स तत्व सभ के अबहियों कीबोर्ड तक पहुँचे लायक होखे के चाहीं। अगर फोकस ऑर्डर स्वाभाविक रूप से फिक्स ड्रॉपडाउन में ना जाला त रउरा कोड के इस्तेमाल से एकरा के प्रबंधित करे के पड़ी. इहो जाँच करे लायक बा कि ई दोसरा इंटरैक्टिव सामग्री पर ना बइठे आ ओकरा के खारिज करे के कवनो तरीका नइखे. ऊ एक कीबोर्ड टेस्टिंग में रउरा के काट लेला. सीएसएस एंकर पोजीशनिंग: हमरा लागत बा कि ई कहाँ जा रहल बा CSS Anchor Positioning उ दिशा ह जवना में हमरा अभी सबसे ज्यादा रुचि बा। जब हम पहिला बेर एकरा के देखनी त हमरा पक्का विश्वास ना रहे कि स्पेसिफिकेशन के केतना असल में उपयोगी बा. एह से रउआँ ड्रॉपडाउन आ एकरे ट्रिगर के बीच के संबंध के सीधे CSS में घोषित क सके लीं आ ब्राउजर निर्देशांक सभ के संभाले ला। .ट्रिगर { 1999 के बा। एंकर-नाम: --हमार-ट्रिगर; } 1999 में भइल रहे।
.ड्रॉपडाउन-मेनू { 1999 के बा। स्थिति: निरपेक्ष बा; स्थिति-लंगर: --हमार-ट्रिगर; ऊपर: लंगर (नीचे) के बा; बाईं ओर: लंगर (बाएं) के बा; स्थिति-कोशिस-फॉलबैक: फ्लिप-ब्लॉक, फ्लिप-इनलाइन; } 1999 में भइल रहे।
position-try-fallbacks गुण ही एकरा के मैनुअल गणना के ऊपर इस्तेमाल करे लायक बनावेला। ब्राउजर हार माने से पहिले वैकल्पिक प्लेसमेंट के कोशिश करेला, एहसे व्यूपोर्ट के नीचे एगो ड्रॉपडाउन कट जाए के बजाय अपने आप ऊपर के ओर पलट जाला। क्रोमियम आधारित ब्राउजर में ब्राउजर सपोर्ट ठोस बा आ सफारी में बढ़ रहल बा। फायरफॉक्स के पॉलीफिल के जरूरत बा। @oddbird/css-anchor-positioning पैकेज में कोर स्पेसिफिकेशन के कवर कइल गइल बा। हम एकरा से लेआउट एज केस मारले बानी जवना में फॉलबैक के जरूरत रहे जवना के हम अंदाजा ना लगावत रहीं, एहसे एकरा के प्रगतिशील संवर्धन के रूप में मानीं भा एकरा के एगो...फायरफॉक्स खातिर जावास्क्रिप्ट फॉलबैक। संक्षेप में कहल जाव त होनहार बा बाकिर अबहीं ले सार्वभौमिक नइखे. अपना लक्ष्य ब्राउजर में परीक्षण करीं. आ जहाँ तक एक्सेसबिलिटी के सवाल बा त CSS में विजुअल रिलेशनशिप के घोषणा कइल एक्सेसबिलिटी ट्री के कुछ ना बतावेला. एरिया-कंट्रोल, एरिया-विस्तारित, एरिया-हस्पोपप — ऊ हिस्सा अबहियों रउरा पर बा. कबो-कबो फिक्स बस तत्व के हिलावे के होला पोर्टल तक पहुंचे से पहिले भा निर्देशांक के गणना करे से पहिले हम हमेशा पहिले एगो सवाल पूछेनी कि का असल में एह ड्रॉपडाउन के स्क्रॉल कंटेनर के भीतर रहे के जरूरत बा? अगर ना होखे त मार्कअप के उच्च स्तर के रैपर पर ले जाए से समस्या पूरा तरह से खतम हो जाला, जवना में कवनो जावास्क्रिप्ट ना होखे आ ना कवनो निर्देशांक के गणना होखे. ई हमेशा संभव ना होखे. अगर बटन आ ड्रॉपडाउन के एकही घटक में कैप्सूल कइल जाय तब एक के बिना दुसरा के ले जाए के मतलब होला पूरा एपीआई पर फिर से बिचार कइल। बाकिर जब रउरा कर सकीलें त डिबग करे खातिर कुछ ना. समस्या बस मौजूद नइखे. जवन आधुनिक सीएसएस अबहीं ले हल नइखे करत इहाँ सीएसएस बहुत आगे बढ़ गईल बा, लेकिन अभी भी अयीसन जगह बा जहां इ आपके निराश क देवेला। स्थिति: फिक्स आ ट्रांसफॉर्म के मुद्दा अबहियों बा. ई जानबूझ के स्पेसिफिकेशन में बा, मतलब कि कवनो सीएसएस वर्कअराउंड मौजूद नइखे. अगर रउआ कवनो एनीमेशन लाइब्रेरी के इस्तेमाल कर रहल बानी जवन रउआ लेआउट के एगो रूपांतरित तत्व में लपेटत बा त रउआ वापस पोर्टल भा एंकर पोजीशनिंग के जरूरत पड़ गइल बानी। सीएसएस एंकर पोजीशनिंग आशाजनक बा, लेकिन नया बा। जइसन कि पहिले बतावल गइल बा कि जब हम ई लिखत बानी तब फायरफॉक्स के अबहियों पॉलीफिल के जरूरत बा. हम एकरा से लेआउट एज केस मारले बानी जवना में फॉलबैक के जरूरत रहे जवना के हम अंदाजा ना लगावत रहीं. अगर आज रउरा सभे ब्राउजर में लगातार व्यवहार के जरूरत बा तबो रउरा कठिन हिस्सा खातिर जावास्क्रिप्ट के ओर हाथ बढ़ावत बानी. जवना जोड़ खातिर हम असल में आपन वर्कफ़्लो बदलले बानी ऊ ह एचटीएमएल पोपोवर एपीआई, जवन अब सगरी आधुनिक ब्राउजर में उपलब्ध बा. पॉपओवर एट्रिब्यूट वाला तत्व ब्राउजर के ऊपरी परत में, सबकुछ से ऊपर, रेंडर करेला, जवना में कवनो जावास्क्रिप्ट पोजीशनिंग के जरूरत ना पड़ेला।
बा
एस्केप हैंडलिंग, डिसमिस-ऑन-क्लिक-आउटसाइड, आ ठोस एक्सेसबिलिटी सिमेंटिक्स टूलटिप, डिस्क्लोजर विजेट, आ सरल ओवरले नियर चीज सभ खातिर मुफ्त में आवे ला। ई पहिला औजार ह जवना पर हम फिलहाल पहुँचत बानी. कहल जा सकेला कि एहसे पोजीशनिंग के समाधान ना होखे. इ लेयरिंग के हल करेला। कवनो पॉपओवर के ओकरा ट्रिगर से संरेखित करे खातिर रउरा अबहियों एंकर पोजीशनिंग भा जावास्क्रिप्ट के जरूरत बा. पोपोवर एपीआई लेयरिंग के संभालेला। एंकर पोजीशनिंग प्लेसमेंट के संभालेला। एक साथ इस्तेमाल कइल जाव त ई अधिकतर ओह काम के कवर करेला जवन रउरा पहिले कवनो लाइब्रेरी खातिर पहुँचत रहीं. राउर स्थिति खातिर एगो निर्णय गाइड एह सब से कठिन तरीका से गुजरला के बाद इहाँ हम असल में अब चुनाव के बारे में कईसे सोचेनी।
पोर्टल के इस्तेमाल करीं.हम एकर इस्तेमाल तब करब जब ट्रिगर नेस्टेड स्क्रॉल कंटेनर में गहिराह रहेला. हम एह पैटर्न के टेबल एक्शन मेनू खातिर इस्तेमाल कइनी आ एकरा के फोकस रिस्टोरेशन आ एक्सेसबिलिटी चेक के साथ जोड़ी दिहनी। इ सबसे भरोसेमंद विकल्प बा, लेकिन अतिरिक्त वायरिंग खातिर समय बजट करीं। फिक्स्ड पोजीशनिंग के इस्तेमाल करीं.ई तब खातिर बा जब रउरा वेनिला जावास्क्रिप्ट भा हल्का ढाँचा में होखीं आ सत्यापन कर सकीलें कि कवनो पूर्वज ट्रांसफॉर्म भा फिल्टर लागू ना करे. एकरा के सेटअप कइल आसान बा आ डिबग कइल सरल बा, जबले कि ऊ एक बाधा बनल रही. CSS Anchor Positioning के इस्तेमाल करीं।जब राउर ब्राउजर सपोर्ट एकर अनुमति देला त एकरा खातिर पहुँचीं। अगर फायरफॉक्स सपोर्ट के जरूरत होखे त एकरा के @oddbird पॉलीफिल के साथ जोड़ी बनाईं। इहे ह जहाँ अंततः प्लेटफार्म जात बा आ अंत में राउर गो-टू एप्रोच बन जाई. DOM के पुनर्गठन करीं।जब आर्किटेक्चर एकर अनुमति देला तब एकर इस्तेमाल करीं, आ रउआँ शून्य रनटाइम जटिलता चाहत बानी। हमार मानना बा कि संभव बा कि ई सबसे अंडररेटेड विकल्प होखी. पैटर्न के संयोजन करीं।एह काम तब करीं जब रउआँ एंकर पोजीशनिंग के आपन प्राथमिक तरीका के रूप में चाहत होखीं, बिना समर्थित ब्राउजर खातिर जावास्क्रिप्ट फॉलबैक के साथ जोड़ी बनावल। या निर्देशांक सटीकता खातिर getBoundingClientRect() के साथ जोड़ीदार DOM प्लेसमेंट खातिर पोर्टल।
निष्कर्ष निकलल बा हम एह बग के एक बेर के मुद्दा मानत रहनी — कुछ अइसन जवना से पैच कर के आगे बढ़ल जा सकेला. बाकिर एक बेर जब हम एकरा साथे एतना देर ले बइठ गइनी कि एहमें शामिल तीनों सिस्टम — ओवरफ्लो क्लिपिंग, स्टैकिंग संदर्भ, आ ब्लॉक के कंटेनिंग — के समझ सकीले त ई बेतरतीब महसूस कइल बंद हो गइल. हम एगो टूटल ड्रॉपडाउन देख सकत रहनी आ तुरंत पता लगा सकत रहनी कि कवन पूर्वज जिम्मेदार बा। हम डीओएम के पढ़े के तरीका में उ बदलाव असली टेकअवे रहे। एकर कवनो एको सही जवाब नइखे. हम जवन चीज तक पहुँचनी ऊ एह बात पर निर्भर करत रहे कि हम कोडबेस में का नियंत्रित कर सकत रहनी: पोर्टल जब पूर्वज के पेड़ अप्रत्याशित रहे; जब ई साफ आ सरल होखे तब फिक्स पोजीशनिंग; तत्व के हिलावत जब हमरा के कुछुओ ना रोकत रहे; आ अब लंगर के पोजीशनिंग,जहाँ हम कर सकीले। अंत में रउरा जवन भी चुनीं, सुलभता के आखिरी कदम मत मानीं. हमरा अनुभव में ठीक ओही घरी एकरा के छोड़ दिहल जाला. एआरआईए के रिश्ता, फोकस मैनेजमेंट, कीबोर्ड के व्यवहार — ऊ पॉलिश ना ह. ऊ लोग ओह चीज के हिस्सा ह जवना से ऊ चीज असल में काम करेला. हमार गिटहब रेपो में पूरा स्रोत कोड देखीं। आगे पढ़ल जा सकेला एह माध्यम से काम करत घरी हम ई संदर्भ वापस आवत रहनी:
स्टैकिंग संदर्भ (एमडीएन) के बारे में बतावल गइल बा। “सीएसएस एंकर पोजीशनिंग गाइड”, जुआन डिएगो रोड्रिग्ज के ह “गटिंग स्टार्ट विद द पोपोवर एपीआई”, गॉडस्टाइम अबुरु के नाम से जानल जाला फ्लोटिंग यूआई (फ्लोटिंग-यूआई डॉट कॉम) के बा। सीएसएस ओवरफ्लो (एमडीएन) के बारे में जानकारी दिहल गइल बा।
