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