क्या आपने कभी अपने बटन के लिए ड्रॉपडाउन बनाने का प्रयास किया है, चयन करें लेकिन फिर ओवरफ्लो छुपे होने से अवरुद्ध हो रहे हैं?

फिर आप क्या करते हैं, ठीक है तो आप तत्व को डीओएम की जड़ में फेंकने के लिए जावास्क्रिप्ट तक पहुंचते हैं और फिर ट्रिगर तत्वों के आधार पर तत्व को सही स्थिति में रखते हैं, हर बार लेआउट परिवर्तन के बाद पुनर्गणना करते हैं, स्क्रॉल करते हैं और विंडो का आकार बदलते हैं, ऐसा नहीं होता है असरदार।

मैं यह कहकर शुरुआत करना चाहता हूं कि इसे अभी तक पूर्ण समर्थन नहीं मिला है, लेकिन अभी इसे हल करने के लिए एक पॉलीफ़िल है।

जिन दो मुख्य विशेषताओं पर हम भरोसा करेंगे वे हैं

एंकर-पोजिशनिंग

पॉपओवर

इसलिए मेरा प्रारंभिक विचार तब आया जब मैंने देखा कि संवाद रूट पर भेजे गए हैं लेकिन DOM परत के साथ। मैं पॉपओवर एपीआई पर अटक गया जहां आपको मूल रूप से एक ही तर्क मिलता है लेकिन बस थोड़ा अलग काम करता है।

मुझे रेंज स्लाइडर पर एक तत्व को अंगूठे से जोड़ने के बारे में एक पोस्ट देखना भी याद है।

तब मैंने सोचा कि मूल रूप से आप किसी भी ड्रॉपडाउन/टूलटिप आदि के लिए क्या करना चाहते हैं, जिसमें ओवरफ्लो को तोड़ने की जरूरत है, यदि आप दोनों को मिलाते हैं तो आपको अत्यधिक जावास्क्रिप्ट की आवश्यकता नहीं होगी।

तो यहां उन ब्राउज़रों में एक कार्यशील डेमो है जो इसका समर्थन करते हैं

• क्रोम, एज v125
• ओपेरा v111
• Andriod के लिए Chrome, Andriod ब्राउज़र v129

ठीक है, यदि आप इसे आज ही उपयोग करना चाहते हैं तो क्या हुआ। वैसे इसके लिए एक पॉलीफ़िल है जिसका हम उपयोग कर सकते हैं।

ऑडबर्ड/सीएसएस-एंकर-पोजीशनिंग पॉलीफ़िल

जिसमें बढ़िया ब्राउज़र सपोर्ट है

• फ़ायरफ़ॉक्स 54
• क्रोम 51
• एज 79
• सफारी 10

ऐसे ब्राउज़र पर जाने का प्रयास करें जिसका उल्लेख गैर पॉलीफ़िल उदाहरण में नहीं किया गया है और नीचे दिया गया यह उदाहरण काम करता है, मैंने व्यक्तिगत रूप से सफारी और फ़ायरफ़ॉक्स के नवीनतम संस्करणों का परीक्षण किया है

इसका मतलब यह है कि हां अधिकांश ब्राउज़रों में हमारे पास अतिरिक्त गणना ओवरहेड होगी लेकिन पर्याप्त अनुकूलता होने पर इसका उपयोग करना और टॉगल करना आसान है।

इस दृष्टिकोण में एक चेतावनी है और वह यह है कि पॉलीफिल का आकार ~92 केबी है, जिससे लोड पर प्रभाव पड़ेगा, लेकिन एप्लिकेशन/वेबसाइट पर कुछ भी महत्वपूर्ण काम करने के बाद आप इसे लोड करने में आलस कर सकते हैं