परिदृश्य लगभग सधैं उस्तै हुन्छ, जुन स्क्रोल गर्न मिल्ने कन्टेनर भित्रको डेटा तालिका हो। प्रत्येक पङ्क्तिमा एउटा कार्य मेनु हुन्छ, केही विकल्पहरू सहितको सानो ड्रपडाउन, जस्तै सम्पादन, डुप्लिकेट र मेटाउनुहोस्। तपाईंले यसलाई बनाउनुहुन्छ, यो एक्लोसनमा पूर्ण रूपमा काम गर्छ जस्तो देखिन्छ, र त्यसपछि कसैले यसलाई त्यो स्क्रोलयोग्य डिभ भित्र राख्छ र चीजहरू अलग हुन्छन्। मैले यो सही बग तीन फरक कोडबेसमा देखेको छु: कन्टेनर, स्ट्याक, र फ्रेमवर्क, सबै फरक। बग, यद्यपि, पूर्ण रूपमा समान छ। ड्रपडाउन कन्टेनरको किनारमा क्लिप हुन्छ। वा यो तार्किक रूपमा तल हुनु पर्ने सामग्रीको पछाडि देखा पर्दछ। वा प्रयोगकर्ताले स्क्रोल नगरेसम्म यसले राम्रोसँग काम गर्छ, र त्यसपछि यो बहन्छ। तपाईं z-index: 9999 मा पुग्नुहुन्छ। कहिलेकाहीं यसले मद्दत गर्छ, तर अन्य समयमा यसले कुनै पनि काम गर्दैन। त्यो असंगतता पहिलो संकेत हो कि केहि गहिरो भइरहेको छ। यो फिर्ता आउनुको कारण यो हो कि तीन अलग-अलग ब्राउजर प्रणालीहरू संलग्न छन्, र धेरै विकासकर्ताहरूले प्रत्येकलाई आफैं बुझ्दछन् तर सबै तीन टक्कर हुँदा के हुन्छ भनेर कहिल्यै सोच्दैनन्: ओभरफ्लो, स्ट्याकिङ सन्दर्भहरू, र ब्लकहरू समावेश।
एकचोटि तपाईंले बुझ्नुभयो कि कसरी सबै तीन अन्तरक्रिया गर्दछ, असफलता मोडहरू अनियमित महसुस गर्न रोक्छन्। वास्तवमा, तिनीहरू भविष्यवाणी गर्न योग्य हुन्छन्। वास्तवमा यो तीन चीजहरू निम्त्याउँछ ती प्रत्येक वस्तुलाई विस्तृत रूपमा हेरौं। ओभरफ्लो समस्या जब तपाईंले ओभरफ्लो: लुकेको, ओभरफ्लो: स्क्रोल, वा ओभरफ्लो: एलिमेन्टमा स्वत: सेट गर्नुहुन्छ, ब्राउजरले कुनै पनि कुरा क्लिप गर्नेछ जुन यसको सीमाभन्दा बाहिर विस्तार हुन्छ, पूर्ण रूपमा स्थितिमा रहेका सन्तानहरू सहित। स्क्रोल कन्टेनर { ओभरफ्लो: स्वत:; उचाइ: 300px; /* यसले ड्रपडाउन क्लिप गर्नेछ, फुल स्टप */ }
ड्रपडाउन { स्थिति: निरपेक्ष; /* फरक पर्दैन -- अझै पनि .scroll-container द्वारा क्लिप गरिएको छ */ }
पहिलो पटक यसमा दौड्दा मलाई आश्चर्य लाग्यो। मैले स्थिति ग्रहण गरें: निरपेक्ष तत्वले कन्टेनरको क्लिपिङबाट बच्न दिन्छ। यो गर्दैन। अभ्यासमा, यसको मतलब कुनै पनि पूर्वजले नदेखिने ओभरफ्लो मान भएको कुनै पनि पूर्वजद्वारा पूर्ण रूपमा स्थिति मेनु काट्न सक्छ, भले पनि त्यो पूर्वज मेनुको समावेश ब्लक होइन। क्लिपिङ र पोजिसनिङ छुट्टाछुट्टै प्रणाली हुन्। तिनीहरू केवल तरिकाहरूमा टक्कर हुन्छन् जुन पूर्ण रूपमा अनियमित देखिन्छ जबसम्म तपाइँ दुबै बुझ्नुहुन्छ।
यहाँ CreatePortal प्रयोग गरेर प्रतिक्रियाको उदाहरण छ:
'react-dom' बाट { createPortal } आयात गर्नुहोस्; 'react' बाट { useState, useEffect, useRef} आयात गर्नुहोस्;
प्रकार्य ड्रपडाउन ({ anchorRef, isOpen, Children }) { const [position, setPosition] = useState({ top: 0, left: 0 });
useEffect(() => { यदि (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); सेटपोजिशन({ शीर्ष: rect.bottom + window.scrollY, बायाँ: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
यदि (!isOpen) रिटर्न नल;
फिर्ता सिर्जनापोर्टल(
र, अवश्य पनि, हामी पहुँचलाई बेवास्ता गर्न सक्दैनौं। सामग्रीमा देखिने निश्चित तत्वहरू अझै पनि किबोर्ड-पहुँच योग्य हुनुपर्छ। यदि फोकस अर्डर स्वाभाविक रूपमा निश्चित ड्रपडाउनमा सर्दैन भने, तपाईंले कोड प्रयोग गरेर यसलाई व्यवस्थापन गर्न आवश्यक छ। यो जाँच गर्न लायक पनि छ कि यो खारेज गर्ने कुनै तरिका बिना अन्य अन्तरक्रियात्मक सामग्रीमा बस्दैन। त्यो किबोर्ड परीक्षणमा तपाईंलाई काट्छ। CSS एंकर स्थिति: जहाँ मलाई लाग्छ यो हेडिङ हो CSS एंकर पोजिसनिङ त्यो दिशा हो जुन मलाई अहिले सबैभन्दा बढी रुचि छ। जब मैले यसलाई पहिलो पटक हेरेँ, मलाई थाहा थिएन कि कति विशिष्टता वास्तवमा प्रयोगयोग्य थियो। यसले तपाइँलाई ड्रपडाउन र यसको ट्रिगर बीचको सम्बन्ध सीएसएसमा घोषणा गर्न दिन्छ, र ब्राउजरले समन्वयहरू ह्यान्डल गर्दछ। ट्रिगर { एंकर-नाम: --my-trigger; }
ड्रपडाउन मेनु { स्थिति: निरपेक्ष; स्थिति-एंकर: --मेरो-ट्रिगर; शीर्ष: लंगर (तल); बायाँ: लंगर (बायाँ); स्थिति-प्रयास-फलब्याकहरू: फ्लिप-ब्लक, फ्लिप-इनलाइन; }
स्थिति-प्रयास-फलब्याक गुणले यसलाई म्यानुअल गणनामा प्रयोग गर्न लायक बनाउँछ। ब्राउजरले छोड्नु अघि वैकल्पिक प्लेसमेन्टहरू प्रयास गर्दछ, त्यसैले भ्यूपोर्टको तलको ड्रपडाउन काट्नुको सट्टा स्वतः माथितिर फ्लिप हुन्छ। ब्राउजर समर्थन क्रोमियम-आधारित ब्राउजरहरूमा ठोस छ र सफारीमा बढ्दै छ। फायरफक्सलाई पोलिफिल चाहिन्छ। @oddbird/css-anchor-positioning प्याकेजले मूल विशेषतालाई समेट्छ। मैले यसको साथ लेआउट एज केसहरू हिट गरेको छु जसमा मैले अनुमान नगरेको फलब्याकहरू आवश्यक छ, त्यसैले यसलाई प्रगतिशील वृद्धिको रूपमा व्यवहार गर्नुहोस् वा यसलाई एकसँग जोड्नुहोस्।फायरफक्सको लागि जाभास्क्रिप्ट फलब्याक। छोटकरीमा, आशाजनक तर अझै विश्वव्यापी छैन। तपाईंको लक्षित ब्राउजरहरूमा परीक्षण गर्नुहोस्। र जहाँसम्म पहुँचको सम्बन्ध छ, CSS मा भिजुअल सम्बन्ध घोषणा गर्दा पहुँच रूखलाई केहि पनि बताउदैन। aria-controls, aria-expanded, aria-haspopup — त्यो भाग अझै तपाईंमा छ। कहिलेकाहीँ फिक्स मात्र तत्व सार्दै छ पोर्टलमा पुग्नु वा समन्वय गणना गर्नु अघि, म सधैं एउटा प्रश्न सोध्छु: के यो ड्रपडाउन वास्तवमा स्क्रोल कन्टेनर भित्र बस्न आवश्यक छ? यदि त्यसो भएन भने, मार्कअपलाई उच्च-स्तरको र्यापरमा सार्दा समस्या पूर्ण रूपमा हट्छ, कुनै जाभास्क्रिप्ट र कुनै समन्वय गणनाहरू बिना। यो सधैं सम्भव छैन। यदि बटन र ड्रपडाउन एउटै कम्पोनेन्टमा इन्क्याप्सुलेटेड छन् भने, अर्को बिना एक सार्नु भनेको सम्पूर्ण एपीआईमा पुनर्विचार गर्नु हो। तर जब तपाईं यो गर्न सक्नुहुन्छ, त्यहाँ डिबग गर्न केहि छैन। समस्या मात्र अवस्थित छैन। के आधुनिक CSS अझै समाधान गर्दैन CSS यहाँ लामो बाटो आइसकेको छ, तर त्यहाँ अझै पनि ठाउँहरू छन् जसले तपाईंलाई निराश बनाउँछ। स्थिति: स्थिर र रूपान्तरण मुद्दाहरू अझै छन्। यो जानाजानी निर्दिष्टमा छ, जसको मतलब कुनै CSS workaround अवस्थित छैन। यदि तपाइँ एनिमेसन लाइब्रेरी प्रयोग गर्दै हुनुहुन्छ जसले तपाइँको लेआउटलाई रूपान्तरित तत्वमा लपेट्छ भने, तपाइँ पोर्टल वा एङ्कर स्थितिको आवश्यकतामा फर्किनुभयो। CSS एंकर स्थिति आशाजनक छ, तर नयाँ। पहिले उल्लेख गरिएझैं, फायरफक्सलाई अझै पनि पोलिफिल चाहिन्छ जब म यो लेख्दैछु। मैले यसको साथ लेआउट एज केसहरू हिट गरेको छु जसमा मैले अनुमान नगरेको फलब्याकहरू आवश्यक छ। यदि तपाईंलाई आज सबै ब्राउजरहरूमा निरन्तर व्यवहार चाहिन्छ भने, तपाईं अझै पनि कठिन भागहरूको लागि जाभास्क्रिप्टमा पुग्दै हुनुहुन्छ। मैले वास्तवमा मेरो कार्यप्रवाह परिवर्तन गरेको थप भनेको HTML Popover API हो, अब सबै आधुनिक ब्राउजरहरूमा उपलब्ध छ। पपओभर एट्रिब्युट भएका तत्वहरू ब्राउजरको माथिल्लो तहमा, जाभास्क्रिप्ट पोजिसनिङ आवश्यक पर्दैन, सबै माथि।
एस्केप ह्यान्डलिङ, डिसमिस-अन-क्लिक-आउट, र ठोस पहुँच सिमान्टिक्सहरू टुलटिप्स, खुलासा विजेटहरू, र साधारण ओभरलेहरू जस्ता चीजहरूको लागि नि: शुल्क आउँछन्। यो मैले अहिले सम्म पुग्ने पहिलो उपकरण हो। उनले भने, यसले स्थिति समाधान गर्दैन। यसले लेयरिङ समाधान गर्छ। तपाइँलाई अझै पपओभर यसको ट्रिगरमा पङ्क्तिबद्ध गर्नको लागि एन्कर स्थिति वा JavaScript चाहिन्छ। Popover API ले लेयरिङ ह्यान्डल गर्छ। एंकर पोजिशनिङले प्लेसमेन्ट ह्यान्डल गर्छ। सँगै प्रयोग गरिएको, तिनीहरूले तपाईंले पहिले पुस्तकालयमा पुग्नुभएका धेरैजसो कुराहरू समावेश गर्दछ। तपाईंको स्थितिको लागि निर्णय गाइड यी सबै कठिन मार्गहरू पार गरिसकेपछि, यहाँ छ म वास्तवमा कसरी छनौटको बारेमा सोच्दछु।
पोर्टल प्रयोग गर्नुहोस्। म यसलाई प्रयोग गर्छु जब ट्रिगर नेस्टेड स्क्रोल कन्टेनरहरूमा गहिरो रहन्छ। मैले यो ढाँचालाई तालिका कार्य मेनुहरूको लागि प्रयोग गरें र यसलाई फोकस पुनर्स्थापना र पहुँच जाँचहरूसँग जोडे। यो सबैभन्दा भरपर्दो विकल्प हो, तर अतिरिक्त तारिङको लागि बजेट समय। निश्चित स्थिति प्रयोग गर्नुहोस्। यो जब तपाईं भेनिला जाभास्क्रिप्ट वा हल्का फ्रेमवर्कमा हुनुहुन्छ र कुनै पूर्वजले रूपान्तरण वा फिल्टरहरू लागू नगरेको प्रमाणित गर्न सक्नुहुन्छ। यो सेट अप गर्न सरल र डिबग गर्न सरल छ, जबसम्म त्यो एक अवरोध हो। CSS एङ्कर पोजिसनिङ प्रयोग गर्नुहोस्। तपाईंको ब्राउजर समर्थनले अनुमति दिँदा यसको लागि पुग्नुहोस्। यदि फायरफक्स समर्थन आवश्यक छ भने, यसलाई @oddbird polyfill सँग जोड्नुहोस्। यो जहाँ प्लेटफर्म अन्ततः हेडिंग छ र अन्ततः तपाइँको जाने दृष्टिकोण बन्नेछ। DOM को पुनर्संरचना गर्नुहोस्। वास्तुकलाले अनुमति दिँदा यसलाई प्रयोग गर्नुहोस्, र तपाईं शून्य रनटाइम जटिलता चाहनुहुन्छ। मलाई विश्वास छ कि यो सम्भवतः सबैभन्दा अन्डररेट गरिएको विकल्प हो। ढाँचाहरू जोड्नुहोस्। जब तपाईं असमर्थित ब्राउजरहरूको लागि JavaScript फलब्याकसँग जोडिएको आफ्नो प्राथमिक दृष्टिकोणको रूपमा एन्कर स्थिति चाहनुहुन्छ भने यो गर्नुहोस्। वा समन्वय शुद्धताको लागि getBoundingClientRect() सँग जोडिएको DOM प्लेसमेन्टको लागि पोर्टल।
निष्कर्ष मैले यो बगलाई एक-अफ मुद्दाको रूपमा व्यवहार गर्थे - प्याच गर्न र बाट अगाडि बढ्नको लागि केहि। तर एकपटक म यसमा संलग्न सबै तीन प्रणालीहरू बुझ्नको लागि पर्याप्त रूपमा बसेँ - ओभरफ्लो क्लिपिङ, स्ट्याकिङ कन्टेक्स्टहरू, र ब्लकहरू समावेश - यसले अनियमित महसुस गर्न छोड्यो। म टुटेको ड्रपडाउन हेर्न सक्छु र तुरुन्तै पत्ता लगाउन सक्छु कि कुन पुर्खा जिम्मेवार थिए। मैले DOM पढ्ने तरिकामा त्यो परिवर्तन वास्तविक टेकवे थियो। त्यहाँ कुनै एक सही जवाफ छैन। मैले कोडबेसमा के नियन्त्रण गर्न सक्छु भन्ने कुरामा निर्भर हुन्छ: पूर्वज रूख अप्रत्याशित हुँदा पोर्टलहरू; निश्चित स्थिति जब यो सफा र सरल थियो; कुनै पनि कुराले मलाई रोकिरहेको बेला तत्व सार्दै; र अब लंगर स्थिति,जहाँ म सक्छु। तपाईंले जे पनि छनौट गर्नुभयो, पहुँचलाई अन्तिम चरणको रूपमा व्यवहार नगर्नुहोस्। मेरो अनुभवमा, त्यो ठीक छ जब यो छोडिन्छ। ARIA सम्बन्धहरू, फोकस व्यवस्थापन, किबोर्ड व्यवहार - ती पोलिश छैनन्। तिनीहरू वस्तुलाई वास्तवमा काम गर्ने कुराको अंश हुन्। मेरो GitHub रेपोमा पूर्ण स्रोत कोड जाँच गर्नुहोस्। थप पढाइ यी सन्दर्भहरू हुन् जुन मैले यस मार्फत काम गर्दा फर्केर आइरहेको छु:
स्ट्याकिङ कन्टेक्स्ट (MDN) "CSS एंकर पोजिशनिंग गाइड", जुआन डिएगो रोड्रिगेज "Popover API को साथ सुरु गर्दै", Godstime Aburu फ्लोटिंग UI (floating-ui.com) CSS ओभरफ्लो (MDN)
