परिस्थिती चड करून एकूच आसता, जी स्क्रोल करपाक येवपी कंटेनर भितर डेटा कोश्टक आसता. दरेक ओळींत कृती मेनू आसता, कांय पर्याय आशिल्लो ल्हान ड्रॉपडावन आसता, जशे की संपादन, डुप्लीकेट, आनी काडून उडोवप. तुमी तें बांदतात, तें एकसुरेपणान एकदम काम करता अशें दिसता, आनी मागीर कोण तरी तें त्या स्क्रोल करपाक येवपी डिवा भितर घालता आनी गजाली कुशीक पडटात. हांवें हो अचूक बग तीन वेगवेगळ्या कोडबेसांत पळयला: कंटेनर, स्टॅक आनी फ्रेमवर्क, सगळे वेगळे. बग मात पुरायपणान सारकोच आसा. ड्रॉपडावन कंटेनराच्या कांठार क्लिप जाता. वा तार्कीक रितीन ताचे सकयल आसपाक जाय अशा सामुग्री फाटल्यान दाखयता. वा वापरपी स्क्रोल जाय मेरेन तो बरो काम करता, आनी मागीर तो व्हांवता. तुमी z-index: 9999 मेरेन पावतात.केन्ना केन्ना तें मदत करता, पूण हेर वेळार तें एकदम कांयच करिना. ती विसंगतीच कितें तरी खोलायेन घडटा हाचो पयलो सुचोवणी. तो परत येत रावपाचें कारण म्हणल्यार तीन वेगवेगळीं ब्राउझर प्रणालींचो आस्पाव आसा, आनी चडशे विकसक दरेकीं स्वताच्या हातान समजतात पूण तिनूय टकराव केल्यार कितें जाता हाचो केन्नाच विचार करचो ना: ओव्हरफ्लो, संदर्भ स्टॅकिंग आनी ब्लॉक आस्पावप.
एकदां तिनूय परस्पर संवाद कशे करतात तें समजल्या उपरांत अपेस मोड यादस्तीक दिसपाक बंद जातात. खरें म्हणल्यार ते अदमासाक येवपी जातात. प्रत्यक्षांत हाका कारणीभूत आशिल्लीं तीन गजाली त्या दरेक वस्तूचेर सविस्तर नदर मारूंया. ओव्हरफ्लो प्रॉब्लेम जेन्ना तुमी घटकाचेर ओव्हरफ्लो: लिपलां, ओव्हरफ्लो: स्क्रोल, वा ओव्हरफ्लो: ऑटो सेट करतात, तेन्ना ब्राउझर ताच्या मर्यादे भायर पातळिल्ली खंयचीय गजाल क्लिप करतलो, तातूंत पुरायपणान स्थितींत आशिल्ले वंशज आसपावीत आसात. .स्क्रॉल-कंटेनर { . ओव्हरफ्लो: ऑटो; उंचाय: 300px; /* हाका लागून ड्रॉपडावन क्लिप जातलो, फुल स्टॉप */ } .
.ड्रॉपडावन { . पद: निरपेक्ष; /* कसलोच फरक पडना -- अजूनय .scroll-container कडल्यान क्लिप केला */ } .
पयलेच खेपे हांव तातूंत धांवलो तेन्ना म्हाका अजाप जालें. I’d assumed position: absolute एक घटक कंटेनराच्या क्लिपिंगांतल्यान सुटपाक दितलो. अशें ना. वेव्हारांत, म्हणल्यार पुरायपणान स्थितींत आशिल्लो मेनू खंयच्याय पूर्वजान कापून उडोवंक शकता, जाचें अदृश्य ओव्हरफ्लो मोल आसा, जरी तो पूर्वज मेनूचो आस्पाव आशिल्लो ब्लॉक नासलो तरी. क्लिपिंग आनी पोझिशनिंग ह्यो वेगवेगळ्यो पद्दती. फकत घडये दोनूय समजून घेवपा मेरेन पुरायपणान यादस्तीक दिसपी पद्दतीन टकराव जातात.
createPortal वापरून React उदाहरण हांगा आसा:
'react-dom' कडल्यान { createPortal } आयात करचें; आयात { useState, useEffect, useRef } 'प्रतिक्रिया' कडल्यान;
function ड्रॉपडाउन ({ anchorRef, isOpen, भुरगीं }) { const [स्थिती, setPosition] = useState ({ वयर: 0, डावें: 0 });
useEffect ( () => { 1.1. if (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect (); सेटपोझिशन ({ वयर: rect.bottom + विंडो.स्क्रॉलY, 1.1. डावें: rect.left + window.scrollX, 1.1. }); } . }, [isOpen, एंकरसंदर्भ]);
if (!isOpen) शून्य परत करचें;
return createPportal ( 1000000.
आनी अर्थांतच, आमी सुलभताये कडेन दुर्लक्ष करूंक शकनात. सामुग्रीचेर दिसपी स्थिर घटक अजूनय कीबोर्डाक पावपाक येवपी आसूंक जाय. फोकस क्रम सैमीक रितीन थारावीक ड्रॉपडावनांत वचना जाल्यार, तुमकां कोड वापरून तो वेवस्थापन करचो पडटलो. तशेंच हेर परस्पर संवादात्मक सामुग्रीचेर बसना आनी ताका काडून उडोवपाची कसलीच मार्ग ना हें तपासपाक फावो. तो एक कीबोर्ड चांचणेंत तुमकां चाबता. CSS Anchor Positioning: म्हाका दिसता हें खंय वचपाचें आसा CSS Anchor Positioning ही सध्या म्हाका चड आवड आशिल्ली दिका. हांवें पयलेच खेपे पळयलें तेन्ना स्पेक्स प्रत्यक्षांत कितलो वापरपाक मेळटा हाची म्हाका खात्री नाशिल्ली. तो तुमकां ड्रॉपडावन आनी ताच्या ट्रिगर मदलो संबंद थेट CSS त जाहीर करूंक दिता, आनी ब्राउझर निर्देशांक हाताळटा. .ट्रिगर { . एंकर-नांव: --माझें-ट्रिगर; } .
.ड्रॉपडावन-मेनू { . पद: निरपेक्ष; पोजीशन-एंकर: --माझें-ट्रिगर; वयर: लंगर (सकयल); डावें: नांगर (डावें); स्थिती-प्रयत्न-फॉलबॅक: फ्लिप-ब्लॉक, फ्लिप-इनलायन; } .
position-try-fallbacks गुणधर्म होच हाताळणी गणनेचेर वापरपाक योग्य करता. ब्राउझर सोडून दिवचे पयलीं पर्यायी प्लेसमेंटांचो यत्न करता, देखून व्यूपोर्टाच्या सकयल आशिल्लो ड्रॉपडावन कापचे बदला आपोआप वयर उलटता. ब्राउझर आदार क्रोमियम आदारीत ब्राउझरांनी घट्ट आसा आनी सफारींत वाडत आसा. फायरफॉक्साक पॉलीफिल जाय. @oddbird/css-anchor-positioning पॅकेज कोर स्पेसिफिकेशन कव्हर करता. हांवें ताचे कडेन लेआउट एज केस मारल्यात जातूंत हांवें अदमास करूंक नाशिल्ले फॉलबॅक जाय आशिल्ले, देखून ताका एक प्रगतीशील वाड म्हणून वागयात वा ताका एकफायरफॉक्स खातीर जावास्क्रिप्ट फॉलबॅक. थोडयाच उतरांनी आशादायक पूण अजून सार्वत्रिक न्हय. तुमच्या लक्ष्य ब्राउझरांनी चांचणी करात. आनी सुलभतायेची गजाल म्हणल्यार, CSS त व्हिज्युअल संबंद जाहीर केल्यार सुलभताय झाडाक कांयच सांगना. aria-controls, aria-expanded, aria-haspopup — तो भाग अजूनय तुमचेर आसा. केन्ना केन्नाय द फिक्स इज जस्ट मूविंग द एलिमेंट पोर्टला कडेन पावचे पयलीं वा समन्वय गणना करचे पयलीं, हांव सदांच पयलीं एक प्रस्न विचारतां: ह्या ड्रॉपडावनाक प्रत्यक्षांत स्क्रोल कंटेनरांत भितर रावपाची गरज आसा? ना जाल्यार, मार्कअप उच्च पातळेच्या रॅपराचेर व्हरल्यार समस्या पुरायपणान ना जाता, जावास्क्रिप्ट ना आनी समन्वय गणना ना. हें सदांच शक्य ना. बटण आनी ड्रॉपडावन एकाच घटकांत कॅप्सूल केल्यार, दुसर् या नासतना एक हालोवप म्हणल्यार पुराय एपीआयचेर परतून विचार करप. पूण जेन्ना तुमकां तें करपाक मेळटा तेन्ना डिबग करपाक कांयच ना. समस्या फकत अस्तित्वांत ना. आधुनीक सीएसएस अजूनय कितें सोडोवंक ना हांगा CSS बरोच पयस पावला, पूण अजूनय तुमकां निराश करपी सुवाती आसात. स्थिती: निश्चीत आनी रुपांतरीत करपाचे प्रस्न अजूनय आसात. तो हेतून spec त आसा, म्हणल्यार खंयचोच CSS वर्कअराउंड अस्तित्वांत ना. तुमी तुमची मांडावळ रुपांतरीत घटकांत गुठलायपी एनिमेशन लायब्ररी वापरतात जाल्यार, तुमकां परतून पोर्टल वा एंकर स्थितीची गरज आसा. CSS Anchor Positioning आशादायक आसा, पूण नवें. आदीं सांगिल्ले प्रमाण, हांव हें बरयतना फायरफॉक्साक अजूनय पॉलीफिल जाय. हांवें ताचे कडेन लेआउट एज केस मारल्यात, जांकां हांवें अदमास करूंक नाशिल्ले फॉलबॅक जाय आशिल्ले. आयज तुमकां सगळ्या ब्राउझरांनी सुसंगत वागणूक जाय जाल्यार, तुमी अजूनय युक्तीवादाच्या भागां खातीर JavaScript कडेन पावतात. हांवें प्रत्यक्षांत म्हजो कार्यप्रवाह बदलला तो जोडणी म्हणल्यार HTML Popover API, आतां सगळ्या आधुनीक ब्राउझरांनी उपलब्ध आसा. पॉपओवर गुणधर्म आशिल्ले घटक ब्राउझराच्या वयल्या थरांत रेंडर करतात, सगळ्यां वयल्यान, जावास्क्रिप्ट स्थितीची गरज नासतना.
एस्केप हाताळणी, डिसमिस-ऑन-क्लिक-भायर, आनी घन सुलभताय अर्थशास्त्र साधन टिप्स, उक्तावण विजेट, आनी सादे आच्छादन सारकिल्या गजालीं खातीर मुक्त येतात. आतां खातीर हांव पावता तें पयलें साधन. म्हणल्यार तातूंतल्यान पोझिशनिंग सोडोवंक मेळना. तातूंत थर सोडोवप जाता. पॉपओव्हर ताच्या ट्रिगराक संरेखित करपाक तुमकां अजूनय एंकर पोझिशनिंग वा जावास्क्रिप्ट जाय. Popover API थर हाताळटा. एंकर पोझिशनिंग प्लेसमेंट हाताळटा. एकठांय वापरल्यार, तुमी पयलीं लायब्ररी खातीर पावताले तें चडशें ते आस्पावतात. तुमच्या परिस्थिती खातीर एक निर्णय मार्गदर्शक हें सगळें कठीण रितीन वचून पळयल्या उपरांत आतां हांव प्रत्यक्षांत निवडी विशीं कसो विचार करतां तें पळयात.
पोर्टल वापरात.जेन्ना ट्रिगर नेस्टेड स्क्रोल कंटेनरांत खोल रावता तेन्ना हांव हें वापरतलों. हांवें हो नमुनो कोश्टक कृती मेनू खातीर वापरलो आनी फोकस पुनर्स्थापना आनी सुलभताय तपासणे वांगडा जोडलो. तो सगळ्यांत विस्वासांत घेवपासारको पर्याय, पूण अतिरिक्त वायरींगा खातीर वेळ बजेट. स्थिर स्थिती वापरात.हें जेन्ना तुमी व्हॅनिला जावास्क्रिप्ट वा हलके वजनाच्या चौकटींत आसतात आनी खंयचोच पूर्वज रुपांतर वा फिल्टर लागू करिना हाची खात्री करूंक शकता. सेट करप सोंपें आनी डिबग करप सोंपें, जो मेरेन ती एक मर्यादा टिकता. CSS Anchor Positioning वापरात.जेन्ना तुमचो ब्राउझर आदार ताका परवानगी दिता तेन्ना हाचे खातीर पावचें. Firefox आदाराची गरज आसल्यार, @oddbird polyfill कडेन जोडात. हांगाच प्लॅटफॉर्म निमाणें वता आनी निमाणें तुमचो गो-टू अॅप्रोच जातलो. DOM ची पुनर्रचना करात.जेन्ना आर्किटेक्चर ताका परवानगी दिता तेन्ना हाचो वापर करचो, आनी तुमकां शून्य रनटायम गुंतागुंत जाय. म्हाका दिसता तो सगळ्यांत अंडररेटेड पर्याय आसूं येता. नमुने एकठांय करात.जेन्ना तुमकां तुमचो मुखेल पद्दत म्हणून एंकर स्थिती जाय, समर्थीत नाशिल्ल्या ब्राउझरां खातीर जावास्क्रिप्ट फॉलबॅका वांगडा जोडिल्लें तेन्ना हें करचें. वा समन्वय अचूकते खातीर getBoundingClientRect() कडेन जोडिल्लें DOM प्लेसमेंट खातीर पोर्टल.
निश्कर्श काडप ह्या बगाक हांव एकदांच जावपी प्रस्न म्हणून मानतालो — पॅच करपाक आनी फुडें वचपाक कितें तरी. पूण एकदां हांव ताचे वांगडा बरोच वेळ बसलो की तातूंत आस्पाव आशिल्लीं तिनूय प्रणालीं समजूंक शकतलीं — ओव्हरफ्लो क्लिपिंग, संदर्भ स्टॅकिंग, आनी ब्लॉक आस्पावप — तें यादस्तीक अशें दिसप बंद जालें. एक मोडून पडल्लो ड्रॉपडावन पळोवंक मेळटालो आनी रोखडोच खंयचो पूर्वज जापसालदार आसा हाचो सोद घेवंक मेळटालो. हांवें डीओएम कसो वाचलो हातूंतलो तो बदल खरो टेकअवे आशिल्लो. एकूच योग्य जाप ना. हांवें कितें हातांत घेतलें तें कोडबेसांत कितें नियंत्रीत करूंक शकता ताचेर आदारून आशिल्लें: पूर्वज झाड अदमासाक येना आसतना पोर्टल; निवळ आनी सादें आसतना स्थिर स्थिती; म्हाका कांयच आडावंक नाशिल्लें तेन्ना तत्व हालयप; आनी आतां एंकर पोझिशनिंग,जंय म्हाका शक्य आसा. तुमी निमाणें कितेंय निवडटात, सुलभताय हें निमाणें पावल मानूंक नाकात. म्हज्या अणभवांत तें सारकें तेन्नाच वगडायतात. एआरआयए संबंद, फोकस वेवस्थापन, कीबोर्ड वागणूक — तीं पॉलिश न्हय. ती गजाल प्रत्यक्षांत काम करपाक कारण जाता ताचो ते एक भाग. म्हज्या GitHub रेपोंत पुराय स्त्रोत कोड पळयात. फुडलें वाचन ह्या माध्यमांतल्यान काम करतना हांवें परतून येत रावपी हे संदर्भ:
द स्टॅकिंग संदर्भ (एमडीएन) 1.1. “सीएसएस एंकर पोझिशनिंग गाइड”, जुआंव डिएगो रॉड्रिगीज “गेटिंग स्टार्टड विथ द पोपोवर एपीआय”, गॉडस्टायम अबुरु फ्लोटिंग यूआय (floating-ui.com) 1.1. सीएसएस ओव्हरफ्लो (एमडीएन) 1.1.
