प्रॉम्प्ट और संदर्भ
पृष्ठ में लेख के अनुभागों या कैरोसेल आइटमों के लिंक हैं और स्क्रॉल करते समय वर्तमान लक्ष्य (current target) को हाइलाइट किया जाना चाहिए। CSS scroll-target-group एक मौजूदा नेविगेशन कंटेनर को स्क्रॉल मार्कर समूह के रूप में घोषित कर सकता है, जो फ्रैगमेंट लक्ष्यों को दृश्य सामग्री से जोड़ता है। IntersectionObserver, पारंपरिक एंकर और scroll-marker-group के साथ इसकी सीमा समझाएं, फिर प्रोग्रेसिव एन्हांसमेंट डिज़ाइन करें।
इंटरव्यूअर्स क्या मूल्यांकन करते हैं
इंटरव्यूअर्स ऐसे वास्तविक लिंक देखते हैं जो दृश्य स्थिति (visual state) जोड़े जाने से पहले काम करते हैं। एक मजबूत उत्तर स्क्रॉल स्थिति, फ़ोकस स्थिति और करंट-आइटम स्टाइलिंग में अंतर करता है; डुप्लिकेट लक्ष्यों, डायनेमिक सामग्री, क्षैतिज स्क्रॉलिंग और रिड्यूस्ड मोशन को संभालता है; और प्रयोगात्मक प्रॉपर्टी उपलब्ध न होने पर फ़ॉलबैक की व्याख्या करता है। केवल एक CSS डिक्लेरेशन एक संचालन योग्य नेविगेशन प्रणाली को प्रदर्शित नहीं करता है।
उत्तर देने से पहले स्पष्ट करने योग्य प्रश्न
नेविगेशन लक्ष्य क्या हैं?
पुष्टि करें कि क्या प्रत्येक लिंक एक स्थिर अनुभाग ID, एक कैरोसेल कार्ड, या एक वर्चुअल-लिस्ट आइटम को लक्षित करता है। लक्ष्यों को ब्राउज़र द्वारा पता लगाने योग्य (addressable) होना चाहिए और सूची को पुनर्व्यवस्थित करने पर भी उनका अर्थ बना रहना चाहिए।
"वर्तमान" (current) को कैसे परिभाषित किया जाता है?
स्पष्ट करें कि क्या इसका अर्थ व्यूपोर्ट में प्रवेश करना, एक सीमा (threshold) पार करना, फ़ोकस प्राप्त करना या अंतिम क्लिक किया गया आइटम होना है। स्क्रॉल और फ़ोकस स्थिति भिन्न हो सकती हैं, इसलिए एक ही रंग नियम दोनों का प्रतिनिधित्व नहीं कर सकता है।
समर्थन और विकल्प
लक्षित ब्राउज़र, स्क्रीन रीडर और कीबोर्ड आवश्यकताओं की सूची बनाएं। scroll-target-group प्रयोगात्मक है; पारंपरिक एंकर और किसी भी आवश्यक ऑब्जर्वेशन लॉजिक को अभी भी स्वतंत्र रूप से काम करना चाहिए।
30-सेकंड उत्तर फ्रेमवर्क
"मैं बुनियादी जंप के लिए पहले सिमेंटिक नेविगेशन और स्थिर एंकर का उपयोग करता हूं, फिर नेविगेशन कंटेनर को scroll-target-group के रूप में घोषित करता हूं ताकि कोई लक्ष्य व्यूपोर्ट में प्रवेश करने पर करंट स्टाइलिंग प्राप्त कर सके। स्क्रॉल मार्कर फ़ोकस प्रबंधित नहीं करते हैं, इसलिए मैं Tab क्रम, जंप के बाद फ़ोकस और रिटर्न पाथ का अलग से परीक्षण करता हूं। डायनेमिक सामग्री द्वारा लक्ष्य बनाए जाने के बाद, मैं संबंधों की पुन: जांच करता हूं। असमर्थित ब्राउज़रों में मैं सामान्य लिंक बनाए रखता हूं और केवल आवश्यक IntersectionObserver संवर्द्धन जोड़ता हूं, फिर कीबोर्ड, स्क्रीन रीडर, क्षैतिज स्क्रॉलिंग और रिड्यूस्ड-मोशन सेटिंग्स का शुरू से अंत तक परीक्षण करता हूं।"
चरण-दर-चरण विस्तृत उत्तर
चरण 1: स्थिर एंकर बनाएं
प्रत्येक अनुभाग या आइटम के लिए एक अद्वितीय, पूर्वानुमेय (predictable) ID उत्पन्न करें और नेविगेशन लिंक में वास्तविक फ्रैगमेंट लक्ष्यों का उपयोग करें। केवल सरणी सूचकांकों (array indexes) पर निर्भर न रहें क्योंकि फ़िल्टरिंग, पेजिनेशन और सर्वर रेंडरिंग उन्हें बदल सकते हैं।
चरण 2: स्क्रॉल मार्कर समूह घोषित करें
समर्थित ब्राउज़रों में, सामग्री सूची या कैरोसेल-कंट्रोल कंटेनर पर scroll-target-group: auto सेट करें। यह फ्रैगमेंट लिंक को स्क्रॉल-मार्कर संबंध में भाग लेने की अनुमति देता है, लेकिन यह आपके लिए फ़ोकस या सेमेंटिक्स डिज़ाइन नहीं करता है।
चरण 3: करंट और फ़ोकस स्टाइलिंग को अलग करें
स्क्रॉल स्थिति को व्यक्त करने के लिए करंट-टारगेट स्थिति या समकक्ष का उपयोग करें, और कीबोर्ड फ़ोकस को व्यक्त करने के लिए :focus-visible का उपयोग करें। जब दोनों मौजूद हों, तो कंट्रास्ट, समझने योग्य लेबल और नियंत्रित बदलाव (transitions) बनाए रखें।
चरण 4: डायनेमिक और एकाधिक कंटेनरों को संभालें
अनुभाग लोड होने, कैरोसेल लूप होने, या नेस्टेड स्क्रॉल कंटेनर बदलने के बाद, लक्ष्य विशिष्टता और करंट-आइटम स्थिरता की पुन: जांच करें। एक लिंक को एकाधिक स्क्रॉल कंटेनरों द्वारा व्याख्यायित न होने दें; आवश्यकता पड़ने पर समूहों को विभाजित करें।
चरण 5: फ़ॉलबैक और सत्यापन डिज़ाइन करें
जब प्रॉपर्टी असमर्थित हो, तो सामान्य एंकर को फिर भी जंप करना चाहिए। केवल करंट-आइटम संकेत के संवर्द्धन के रूप में IntersectionObserver जोड़ें। कीबोर्ड, स्क्रीन रीडर, ब्राउज़र बैक, ज़ूम, क्षैतिज स्क्रॉल और prefers-reduced-motion का परीक्षण करें।
उच्च-गुणवत्ता वाला नमूना उत्तर
मैं पहले लेख अनुभागों के लिए स्थिर ID उत्पन्न करूंगा और वास्तविक सामग्री सूची लिंक का उपयोग करूंगा ताकि जंप बिना CSS के काम करें। यदि लक्षित ब्राउज़र इसका समर्थन करता है, तो मैं नेविगेशन कंटेनर पर scroll-target-group: auto सेट करूंगा और :focus-visible के साथ कीबोर्ड फ़ोकस को दृश्यमान रखते हुए वर्तमान लक्ष्य को हाइलाइट करूंगा। स्क्रॉल मार्कर फ़ोकस को सामग्री में स्थानांतरित नहीं करते हैं, इसलिए मैं जानबूझकर लिंक सक्रियण के बाद फ़ोकस व्यवहार और रिटर्न पाथ को सत्यापित करूंगा। अनंत लोडिंग या कैरोसेल के लिए, जब भी कोई लक्ष्य जोड़ा जाता है तो मैं ID विशिष्टता और करंट-आइटम स्थिरता की जांच करूंगा। असमर्थित ब्राउज़र स्थिति के लिए एक ऑब्जर्वर संवर्द्धन के साथ एंकर बनाए रखेंगे; मैं डेस्कटॉप, मोबाइल, स्क्रीन रीडर और रिड्यूस्ड-मोशन सेटिंग्स पर कार्य परीक्षणों के साथ समाप्त करूंगा।
सामान्य गलतियाँ
- गलती: वास्तविक एंकर लिंक के बिना CSS स्थिति प्रदान करना। → यह विफल क्यों होता है: असमर्थित ब्राउज़र और सहायक तकनीकें नेविगेशन खो देती हैं। → समाधान: ऐसे सिमेंटिक लिंक बनाएं जो स्वतंत्र रूप से काम करते हैं।
- गलती: दृश्यमान आइटम को कीबोर्ड फ़ोकस के रूप में मानना। → यह विफल क्यों होता है: एक उपयोगकर्ता सामग्री को स्क्रॉल किए बिना नेविगेशन पर फ़ोकस कर सकता है, इसलिए स्थितियां टकराती हैं। → समाधान: करंट स्थिति और
:focus-visibleको अलग से डिज़ाइन करें। - गलती: सरणी सूचकांकों से लक्ष्य ID उत्पन्न करना। → यह विफल क्यों होता है: फ़िल्टरिंग और लूपिंग लोड डुप्लिकेट या विचलन (drift) बनाते हैं। → समाधान: स्थिर व्यावसायिक पहचानकर्ताओं का उपयोग करें और अपडेट के बाद विशिष्टता की जांच करें।
- गलती: प्रयोगात्मक प्रॉपर्टी को एक आवश्यकता के रूप में शिप करना। → यह विफल क्यों होता है: ब्राउज़र समर्थन और नेस्टेड-स्क्रॉल व्यवहार भिन्न होते हैं। → समाधान: एंकर बनाए रखें, क्षमता के अनुसार संवर्द्धित करें, और कार्य पूर्णता की निगरानी करें।
फॉलो-अप और उत्तर
फॉलो-अप 1: केवल IntersectionObserver का उपयोग क्यों न करें?
Observer मौजूदा-ब्राउज़र समर्थन या जटिल व्यावसायिक सीमाओं (thresholds) के लिए उपयोगी है; scroll-target-group इस स्थिति कोड को कम कर सकता है। उन्हें स्तरित (layered) किया जा सकता है: पहले लिंक और फ़ोकस को सुरक्षित रखें, फिर रखरखाव लागत की तुलना करें।
फॉलो-अप 2: क्या एक क्षैतिज कैरोसेल और लंबवत सामग्री सूची एक ही समूह साझा कर सकते हैं?
आमतौर पर नहीं। उनके स्क्रॉल अक्ष (axes), लक्ष्य दृश्यता और कीबोर्ड मॉडल भिन्न होते हैं, इसलिए एक करंट-आइटम का अर्थ अस्पष्ट हो जाता है। स्क्रॉल कंटेनर द्वारा समूहों को विभाजित करें और उन्हें स्वतंत्र रूप से लेबल करें।
फॉलो-अप 3: क्या वर्तमान अनुभाग बदलने पर फ़ोकस स्वचालित रूप से स्थानांतरित होना चाहिए?
पैसिव स्क्रॉलिंग के लिए फ़ोकस स्थानांतरित न करें क्योंकि यह कीबोर्ड उपयोगकर्ताओं को बाधित करता है। घटक अनुबंध के अनुसार, केवल जानबूझकर नेविगेशन सक्रियण के बाद फ़ोकस स्थानांतरित करें, और स्क्रीन रीडर को एक स्पष्ट परिणाम दें।
फॉलो-अप 4: आप रिड्यूस्ड मोशन को कैसे संभालते हैं?
स्पष्ट करंट स्थिति और फ़ोकस संकेतक को बनाए रखते हुए स्मूथ स्क्रॉलिंग और मार्कर ट्रांज़िशन को कम या हटा दें। बिना एनीमेशन के नेविगेशन समझने योग्य बना रहना चाहिए।