परिदृश्य लगभग हमेशा इक गै ऐ, जेह् ड़ी इक स्क्रॉल करने योग्य कंटेनर दे अंदर इक डेटा तालिका ऐ। हर पंक्ति च इक एक्शन मेनू होंदा ऐ, इक छोटा ड्रॉपडाउन होंदा ऐ जिस च किश विकल्प होंदे न, जि'यां संपादत, डुप्लिकेट, ते हटाना. तुस इसगी बनांदे ओ, एह् आइसोलेशन च पूरी चाल्ली कम्म करदा लब्भदा ऐ, ते फिर कोई इसगी उस स्क्रॉल करने योग्य डिव दे अंदर पाई दिंदा ऐ ते चीजां टूटी जंदियां न। मैं इस सटीक बग गी त्रै बक्ख-बक्ख कोडबेस च दिक्खेआ ऐ: कंटेनर, ढेर, ते ढांचे, सारे बक्ख-बक्ख। बग, हालांकि, बिल्कुल इक जेहा ऐ।
ड्रॉपडाउन कंटेनर दे किनारे पर क्लिप होई जंदा ऐ। या एह् सामग्री दे पिच्छें दिक्खने गी मिलदा ऐ जेह् ड़ी तार्किक रूप कन्नै इसदे थल्लै होनी चाहिदी। या एह् उसलै तकर ठीक कम्म करदा ऐ जिसलै तकर बरतूनी स्क्रॉल नेईं करदा, ते फ्ही एह् बहदा ऐ।
तुस z-index: 9999. कदें-कदें एह् मदद करदा ऐ, पर दूई बारी एह् बिल्कुल किश नेईं करदा। उसी असंगति दा पैह्ला सुराग ऐ जे इस थमां बी गहरा किश होआ करदा ऐ।
एह् वापस औने दा कारण एह् ऐ जे त्रै बक्ख-बक्ख ब्राउज़र सिस्टम शामल न, ते मते सारे डेवलपर हर इक गी अपने आपै च समझदे न पर इस गल्लै गी कदें बी नेईं सोचो जे जिसलै त्रैह् टकरांदे न तां केह् होंदा ऐ: ओवरफ्लो, संदर्भें गी ढेर करना, ते ब्लॉकें गी शामल करना।
इक बारी जेकर तुस समझी लैंदे ओ जे त्रैनें किस चाल्लीं परस्पर क्रिया करदे न तां असफलता दे मोड बेतरतीब महसूस करना बंद करी दिंदे न। दरअसल, ओह पूर्वानुमानित होई जंदे न।
असल च इसदा कारण होने आह्लियां त्रै गल्लां
आओ उनें हर इक चीज गी विस्तार कन्नै दिक्खने आं।
ओवरफ्लो दी समस्या
जदूं तुस कुसै तत्व पर ओवरफ्लो: छिपे दा, ओवरफ्लो: स्क्रॉल, जां ओवरफ्लो: ऑटो सेट करदे ओ, तां ब्राउज़र कुसै बी चीज़ गी क्लिप करग जेह् ड़ी अपनी सीमा थमां परे फैली दी ऐ, जिंदे च बिल्कुल तैनात वंशज बी शामल न.
.स्क्रॉल-कंटेनर {
ओवरफ्लो: ऑटो;
ऊंचाई: 300px ऐ;
/* इस कन्नै ड्रॉपडाउन क्लिप होई जाग, फुल स्टॉप */
} ऐ
उस गल्ल ने मिगी हैरान करी दित्ता जिसलै मैं पैह्ली बारी इस च दौड़ेआ हा। मैं स्थिति ग्रहण कीती ही: निरपेक्ष इक तत्व गी इक कंटेनर दी कटाई थमां बचने देग। इ’यां नेईं होंदा।
व्यवहार च, इसदा मतलब ऐ जे इक बिल्कुल तैनात मेनू गी कुसै बी पूर्वज आसेआ कटौती कीता जाई सकदा ऐ जेह् ड़ा गैर-दृश्य ओवरफ्लो मूल्य होंदा ऐ, भलेआं ओह् पूर्वज मेनू दा युक्त ब्लॉक नेईं होऐ. क्लिपिंग ते पोजीशनिंग बक्ख-बक्ख प्रणाली न। बस ऐसे तरीके कन्ने टकरांदे न जेड़े पूरी तरह बेतरतीब लगदे न, जदूं तकर तुस दोनों गी नेईं समझदे।
createPortal दा इस्तेमाल करदे होई इक React उदाहरण ऐ:
ते, ज़ाहिर ऐ, अस सुलभता गी नजरअंदाज नेईं करी सकदे। सामग्री उप्पर दिक्खे जाने आह् ले स्थिर तत्वें गी अजें बी कीबोर्ड-पहुंचने आह् ला होना चाहिदा ऐ. जेकर फोकस क्रम स्वाभाविक रूप कन्नै फिक्स्ड ड्रॉपडाउन च नेईं जंदा ऐ तां तुसेंगी कोड दा इस्तेमाल करियै इसगी प्रबंधत करना होग. एह् बी जांचने दे काबिल ऐ जे एह् होर इंटरएक्टिव सामग्री उप्पर नेईं बैठदा जिसदे कन्नै इसगी खारिज करने दा कोई तरीका नेईं ऐ। कि इक कीबोर्ड परीक्षण च तुसेंगी काटदा ऐ।
सीएसएस एंकर पोजीशनिंग: जित्थें मैं सोचना ऐ जे एह् जा करदा ऐ
CSS Anchor Positioning इक दिशा ऐ जिस च मैं इसलै सारें शा मती रुचि रखना ऐ। जदूं मैं पैह्ली बारी दिक्खेआ तां मिगी पक्का नेईं हा जे स्पेक्स असल च किन्ना उपयोगी ऐ। एह् तुसेंगी इक ड्रॉपडाउन ते इसदे ट्रिगर दे बश्कार रिश्ते गी सीधे CSS च घोशित करने दी अनुमति दिंदा ऐ, ते ब्राउज़र निर्देशांकें गी संभालदा ऐ.
.ट्रिगर {
एंकर-नाम: --मेरा-ट्रिगर;
} ऐ
पोजीशन-ट्राई-फॉलबैक्स गुण ऐ जेह् ड़ी इसगी मैन्युअल गणना उप्पर इस्तेमाल करने दे काबिल बनांदी ऐ. ब्राउज़र हार मानने थमां पैह् ले वैकल्पिक प्लेसमेंट दी कोशश करदा ऐ, इसलेई व्यूपोर्ट दे थल्लै इक ड्रॉपडाउन कटने दे बजाय अपने आप गै उप्पर चली जंदा ऐ।
ब्राउज़र समर्थन क्रोमियम आह् ले ब्राउज़रें च ठोस ऐ ते सफारी च बधदा जा करदा ऐ। फायरफॉक्स गी इक पॉलीफिल दी लोड़ ऐ। @oddbird/css-anchor-positioning पैकेज कोर स्पेसिफिकेशन गी कवर करदा ऐ। मैं इसदे कन्नै लेआउट एज केस हिट कीते न जिंदे च फॉलबैक दी लोड़ होंदी ही जिसदी मैं अंदाजा नेईं लाया हा, इसलेई इसगी प्रगतिशील संवर्धन दे रूप च समझो जां इसगी एफायरफॉक्स आस्तै जावास्क्रिप्ट फॉलबैक।
संक्षेप च, आशाजनक पर अजें तगर सार्वभौमिक नेईं। अपने लक्ष्य ब्राउज़रें च परीक्षण करो।
ते जित्थें तकर सुलभता दा सवाल ऐ, CSS च इक दृश्य रिश्ते दी घोशणा करने कन्नै सुलभता दे बूह्टे गी कुसै बी चाल्ली दा नेईं दस्सेआ जंदा ऐ। एरिया-नियंत्रण, एरिया-विस्तारित, एरिया-हस्पोपप — ओह हिस्सा अजें बी तुंदे उप्पर ऐ।
कदें-कदें द फिक्स सिर्फ मूविंग द एलिमेंट ऐ
पोर्टल तगर पुज्जने थमां पैह् ले जां निर्देशांक गणना करने थमां पैह् ले, मैं हमेशा पैह् ले इक सवाल पुच्छदा ऐ: केह् इस ड्रॉपडाउन गी असल च स्क्रॉल कंटेनर दे अंदर रौह् ने दी लोड़ ऐ?
जेकर नेईं ऐ तां मार्कअप गी उच्च स्तरीय रैपर च लेई जाने कन्नै समस्या पूरी चाल्ली खत्म होई जंदी ऐ , जिस च कोई जावास्क्रिप्ट नेईं ते कोई समन्वय गणना नेईं ऐ ।
एह् हर बेल्लै संभव नेईं होंदा। जेकर बटन ते ड्रॉपडाउन इक गै घटक च कैप्सूल कीते गेदे न तां इक गी दुए दे बगैर लेई जाने दा मतलब ऐ पूरे एपीआई पर पुनर्विचार करना. पर जदूं तुस करी सकदे ओ तां डिबग करने आस्तै किश बी नेईं ऐ। समस्या बस इ’यां गै नेईं ऐ।
आधुनिक सीएसएस अजें बी केह् हल नेईं करदा ऐ
सीएसएस इत्थै मता रस्ता तय करी चुके दा ऐ, पर अजें बी ऐसी जगहां न जित्थें एह् तुसेंगी निराश करदा ऐ।
स्थिति: फिक्स्ड ते ट्रांसफॉर्म मुद्दे अजें बी न। एह् जानबूझकर स्पेसिफिकेशन च ऐ, जिसदा मतलब ऐ जे कोई बी CSS वर्कअराउंड मौजूद नेईं ऐ. जेकर तुस इक एनीमेशन लाइब्रेरी दा इस्तेमाल करा करदे ओ जेह् ड़ी तुंदे लेआउट गी इक रूपांतरित तत्व च लपेटदी ऐ तां तुस पोर्टल जां एंकर पोजीशनिंग दी लोड़ च वापस आई गेदे ओ.
सीएसएस एंकर पोजीशनिंग आशाजनक ऐ, पर नमां ऐ। जि’यां पैह् ले आखेआ गेआ ऐ, जिसलै मैं एह् लिखना ऐ, उस बेल्लै फायरफॉक्स गी अजें बी इक पॉलीफिल दी लोड़ ऐ. मैं इसदे कन्नै लेआउट एज केस हिट कीते न जिंदे च फॉलबैक दी लोड़ ही जिंदी मैं अंदाजा नेईं लाया हा। जेकर तुसेंगी अज्ज सारे ब्राउज़रें च लगातार व्यवहार दी लोड़ ऐ तां तुस अजें बी मुश्कल हिस्सें आस्तै जावास्क्रिप्ट तगर पुज्जी जा करदे ओ.
जिस इलावा मैं असल च अपना वर्कफ़्लो बदली दित्ता ऐ ओह् ऐ HTML Popover API, जेह् ड़ा हून सारे आधुनिक ब्राउज़रें च उपलब्ध ऐ। पॉपओवर विशेषता आह् ले तत्व ब्राउज़र दी शीर्शक परत च, हर चीज थमां उप्पर, रेंडर करदे न, जिस च कुसै बी जावास्क्रिप्ट पोजीशनिंग दी लोड़ नेईं ऐ.
Popover सामग्री
बचने दी हैंडलिंग, डिसमिस-ऑन-क्लिक-बाहर, ते ठोस एक्सेसबिलिटी सिमेंटिक्स टूलटिप, खुलासे विजेट, ते साधारण ओवरले जनेह् चीजें आस्तै मुफ्त औंदे न. एह् पैह्ला औजार ऐ जिसदा मैं फिलहाल पुज्जना ऐ।
एह् आखदे होई जे इस कन्नै पोजीशनिंग दा हल नेईं होंदा। एह् लेयरिंग दा हल करदा ऐ। इक पॉपओवर गी इसदे ट्रिगर कन्नै संरेखित करने लेई तुसेंगी अजें बी एंकर पोजीशनिंग जां जावास्क्रिप्ट दी लोड़ ऐ. पोपोवर एपीआई लेयरिंग गी संभालदा ऐ। एंकर पोजीशनिंग प्लेसमेंट गी संभालदी ऐ। इकट्ठे इस्तेमाल कीते गेदे, एह् मते सारे कम्म कवर करदे न जेह् ड़े तुस पैह् ले थमां गै लाइब्रेरी आस्तै पुज्जदे हे।
अपनी स्थिति दे वास्ते इक फैसला गाइड
इस सब गी कठिन तरीके कन्नै गुजरने दे बाद, इत्थै मैं असल च हून चयन दे बारे च कि’यां सोचना ऐ।
पोर्टल दा इस्तेमाल करो.मैं इसदा इस्तेमाल उसलै करगा जिसलै ट्रिगर नेस्टेड स्क्रॉल कंटेनर च गहराई कन्नै रौंह् दा ऐ. मैं इस पैटर्न दा इस्तेमाल टेबल एक्शन मेनू आस्तै कीता ते इसगी फोकस बहाली ते एक्सेसबिलिटी जांच कन्नै जोड़ेआ। एह् सबनें शा भरोसेमंद विकल्प ऐ, पर अतिरिक्त तारें लेई समें दा बजट बनाओ।
फिक्स्ड पोजीशनिंग दा इस्तेमाल करो.एह् उस बेल्लै आस्तै ऐ जिसलै तुस वेनिला जावास्क्रिप्ट जां हल्के ढांचे च होंदे ओ ते इस गल्लै दी सत्यापन करी सकदे न जे कोई बी पूर्वज रूपांतरण जां फ़िल्टर लागू नेईं करदा. एह् सेट करना सरल ऐ ते डिबग करना सरल ऐ , जदूं तकर जे ओह् इक बाधा धारण करदी ऐ ।
CSS एंकर पोजीशनिंग दा इस्तेमाल करो.इसदे लेई पुज्जो जिसलै तुंदा ब्राउज़र समर्थन इसदी इजाजत दिंदा ऐ. जेकर फायरफॉक्स समर्थन दी लोड़ ऐ तां इसगी @oddbird polyfill कन्नै जोड़ी देओ. एह् ओह् थाह् र ऐ जित्थें प्लेटफार्म अंततः जा करदा ऐ ते अंत च तुंदा गो-टू एप्रोच बनी जाग।
DOM गी पुनर्गठित करो.जदूं आर्किटेक्चर इसदी अनुमति दिंदा ऐ तां इसदा इस्तेमाल करो, ते तुस शून्य रनटाइम जटिलता चांह् दे ओ. मेरा मानना ऐ जे एह् संभावना ऐ जे एह् सबनें शा घट्ट रेटेड विकल्प ऐ।
पैटर्न गी इकट्ठा करो.एह् उसलै करो जिसलै तुस एंकर पोजीशनिंग गी अपने प्राथमिक दृष्टिकोण दे रूप च चांह् दे ओ, जेह् ड़ी गैर-समर्थित ब्राउज़रें आस्तै जावास्क्रिप्ट फॉलबैक कन्नै जोड़ी गेदी ऐ. या समन्वय सटीकता आस्तै getBoundingClientRect() कन्नै जोड़े गेदे DOM प्लेसमेंट आस्तै इक पोर्टल.
निष्कर्ष निकालना
मैं इस बग गी इक बारी दा मुद्दा समझदा हा — पैच करने ते इसदे कोला अग्गें बधने आस्तै किश। पर इक बारी मैं इसदे कन्नै इन्ना लंबा बैठी गेआ तां जे इस च शामल त्रैनें सिस्टमें गी समझी सकां - ओवरफ्लो क्लिपिंग, संदर्भें गी ढेर करना, ते ब्लॉकें गी शामल करना - इसनें बेतरतीब महसूस करना बंद करी दित्ता। मैं इक टूटे-फूटे ड्रॉपडाउन गी दिक्खी सकदा हा ते तुरंत पता ला सकदा हा जे कुस पूर्वज जिम्मेदार ऐ। मैं डीओएम गी किस चाल्ली पढ़दा हा, इस च ओह बदलाव असली टेकअवे ही।
कोई इक सच्चा जवाब नेईं ऐ। मैं कीऽ पुज्जेआ हा, एह् इस गल्लै उप्पर निर्भर करदा हा जे मैं कोडबेस च कीऽ नियंत्रत करी सकदा हा: पोर्टल जिसलै पूर्वज दा पेड़ अप्रत्याशित हा; जदूं साफ ते सरल होंदा हा तां स्थिर पोजीशनिंग; तत्व गी उसलै हिलाना जिसलै कुसै बी चीजै ने मिगी नेईं रोकदा हा; ते लंगर पोजीशनिंग हुण,जित्थे मैं कर सकदा हां।
जेह् ड़ा बी तुस अंत च चुनदे ओ, सुलभता गी आखरी कदम दे रूप च नेईं समझो। मेरे अनुभव च ठीक उसलै गै छड्डी दित्ता जंदा ऐ। एआरआईए दे रिश्ते, फोकस प्रबंधन, कीबोर्ड व्यवहार — ओह पालिश नेईं न। उ’नें दा इक हिस्सा ऐ जेह्ड़ा असल च चीज़ गी कम्म करने आस्तै बनांदा ऐ।
मेरे GitHub रेपो च पूरा स्रोत कोड दिक्खो।
अग्गें पढ़ना
इसदे माध्यम कन्नै कम्म करदे होई मैं एह् संदर्भ न जिंदे उप्पर मैं वापस औंदा रेहा:
