फ्रंटएंड इंटरव्यू: CSS scroll-state क्वेरीज़ JavaScript स्क्रॉल डिटेक्शन की जगह कब ले सकती हैं?

प्रॉम्प्ट और यह कब लागू होता है

इंटरव्यू प्रॉम्प्ट: एक पेज में sticky हेडिंग, हॉरिजॉन्टल स्नैप कार्ड्स और एक संकेत है कि अधिक कंटेंट स्क्रॉल किया जा सकता है। आप स्टाइल कब बदलना है इसका निर्णय कैसे लेंगे? CSS scroll-state क्वेरीज़ की JavaScript स्क्रॉल लिसनर्स से तुलना करें, और बताएं कि जब ब्राउज़र में सपोर्ट न हो तो आप क्या करेंगे।

सीमा डिक्लेरेटिव स्टाइलिंग की है: जब हेडिंग स्टिक हो तो शैडो जोड़ना, स्नैप किए गए कार्ड को हाइलाइट करना, या जब अधिक कंटेंट स्क्रॉलेबल हो तो एक संकेत दिखाना। बिज़नेस स्टेट, जटिल जेस्चर, सटीक स्क्रॉल प्रोग्रेस और सर्वर रिपोर्टिंग अभी भी JavaScript से संबंधित हैं। MDN चार scroll-state क्वेरी फ़ैमिलीज़ का वर्णन करता है: scrollable, scrolled, snapped, और stuck।

इंटरव्यूअर क्या आकलन कर रहा है

इंटरव्यूअर यह देखना चाहता है कि क्या आप स्टेट के प्रकार के अनुसार API का चयन करते हैं और फिर सपोर्ट व एक्सेसिबिलिटी की सीमाओं को संभालते हैं। एक मजबूत उत्तर यह बताता है कि क्वेरी कंटेनर को container-type की आवश्यकता होती है और प्रतिक्रिया देने वाली स्टाइल्स डिसेंडेंट्स को टारगेट करती हैं; यह CSS स्टेट क्वेरी को एक सामान्य इवेंट सिस्टम मानने से भी बचता है।

एक कमजोर उत्तर @container सिंटैक्स को रटता है। एक मजबूत उत्तर यह समझाता है कि JavaScript कब आवश्यक बनी रहती है, प्रोग्रेसिव एन्हांसमेंट के लिए @supports का उपयोग कैसे करें, prefers-reduced-motion का सम्मान कैसे करें, और वास्तविक sticky, snap, overflow, और असमर्थित-ब्राउज़र मामलों का परीक्षण कैसे करें।

उत्तर देने से पहले स्पष्टीकरण प्रश्न

पहले पूछें कि क्या आवश्यकता विज़ुअल फीडबैक है या बिज़नेस लॉजिक। शैडो, रंग और हिंट विजिबिलिटी CSS के लिए उपयुक्त हैं; स्क्रॉल दिशा रिकॉर्ड करना, नेटवर्क रिक्वेस्ट करना या स्टेट मशीन चलाना JavaScript की मांग करता है।

इसके बाद स्टेट के स्रोत की पुष्टि करें: क्या एलिमेंट वास्तव में position: sticky है, क्या लिस्ट scroll-snap-type सेट करती है, और क्या स्क्रॉल कंटेनर में विजिबल ओवरफ्लो है? उन पूर्व-आवश्यकताओं के बिना, प्रासंगिक क्वेरी false बनी रहती है।

अंत में ब्राउज़र बेसलाइन और मोशन आवश्यकताओं की पुष्टि करें। Chrome for Developers Chrome 133 में scroll-state कंटेनर क्वेरीज़ का दस्तावेज़ीकरण करता है; एक प्रोडक्शन डिज़ाइन को उन स्टाइल्स से शुरू होना चाहिए जो इस फीचर पर निर्भर नहीं करती हैं, एन्हांसमेंट्स को supports में लपेटना चाहिए, और रिड्यूस्ड मोशन का सम्मान करना चाहिए।

30-सेकंड का उत्तर ढांचा

कुछ इस तरह कहें:

"मैं स्टाइल स्टेट को बिज़नेस इवेंट्स से अलग रखूंगा। Sticky, snap और स्क्रॉलेबिलिटी ब्राउज़र स्टेट्स हैं, इसलिए मैं प्रासंगिक एलिमेंट पर container-type: scroll-state सेट करूंगा और उसके डिसेंडेंट्स को स्टाइल करने के लिए scroll-state के साथ @container का उपयोग करूंगा। एनालिटिक्स, सटीक प्रोग्रेस, या क्रॉस-कंपोनेंट बिज़नेस एक्शन्स के लिए, मैं JavaScript रखूंगा। मैं डिफ़ॉल्ट CSS को उपयोग योग्य बनाऊंगा, @supports के पीछे फीचर जोड़ूंगा, रिड्यूस्ड-मोशन उपयोगकर्ताओं के लिए गैर-जरूरी मोशन को अक्षम करूंगा, और ओवरफ्लो, स्नैप, कीबोर्ड इनपुट व असमर्थित ब्राउज़रों का परीक्षण करूंगा।"

चरण-दर-चरण विस्तृत उत्तर

एक scroll-state क्वेरी कंटेनर स्थापित करें

उस एलिमेंट को scroll-state कंटेनर के रूप में घोषित करें जिसकी स्टेट की क्वेरी की जाएगी। जब कई कंटेनर मेल खा सकते हों तो इसे एक नाम दें:

css

.sticky-heading {
  position: sticky;
  top: 0;
  container-type: scroll-state;
  container-name: heading;
}

प्रतिक्रिया देने वाले नियम को डिसेंडेंट को टारगेट करना चाहिए, न कि उसी एलिमेंट को जिसके पास container-type है। Chrome का मार्गदर्शन इस प्रॉक्सी-लेयर संबंध को स्पष्ट रूप से दिखाता है।

स्टेट के अनुसार डिस्क्रिप्टर चुनें

stuck पूछता है कि क्या कोई sticky एलिमेंट किसी किनारे से जुड़ा हुआ है; snapped पूछता है कि क्या कोई एलिमेंट किसी स्नैप कंटेनर पर स्नैप होने वाला है; scrollable पूछता है कि क्या किसी दिशा में ओवरफ्लो बचा है; scrolled सबसे हालिया स्क्रॉल दिशा के बारे में पूछता है। वे अलग-अलग सवालों के जवाब देते हैं और एक-दूसरे के स्थान पर उपयोग नहीं किए जा सकते।

उदाहरण के लिए, जब नेविगेशन स्टक हो तो उसमें शैडो जोड़ें:

css

@container heading scroll-state(stuck: top) {
  .nav {
    box-shadow: 0 5px 12px rgb(0 0 0 / 18%);
  }
}

स्टाइल टारगेट को कंटेनर के नीचे रखें

container-type वाले एलिमेंट पर सीधे बैकग्राउंड बदलने से सेपरेशन नियम का उल्लंघन करना आसान हो जाता है। प्रतिक्रिया टारगेट के रूप में एक आंतरिक रैपर रखें। कंपोनेंट पुन: प्रयोज्य रहता है और स्टेट ट्रांजिशन का परीक्षण करना आसान होता है।

खोजने की योग्यता (discoverability) के लिए scrollable का उपयोग करें

एक हॉरिजॉन्टल कार्ड लिस्ट के लिए, जब तक लिस्ट अपने इनलाइन एंड की ओर स्क्रॉल हो सकती है, एक ग्रेडिएंट संकेत दिखाएं:

css

.carousel {
  container-type: scroll-state;
  container-name: cards;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

@container cards scroll-state(scrollable: inline-end) {
  .next-hint {
    opacity: 1;
  }
}

यह संकेत पूरक (supplementary) है। केवल रंग के माध्यम से "अधिक कंटेंट" का संचार न करें; कीबोर्ड स्क्रॉलिंग, विजिबल फोकस और टेक्स्ट लेबल बनाए रखें।

वर्तमान-कार्ड फीडबैक के लिए snapped का उपयोग करें

snapped केवल तभी सार्थक होता है जब एक स्नैप पूर्वज और एक मान्य स्नैप अक्ष मौजूद हो। वर्तमान कार्ड को हाइलाइट करने से विज़ुअल फीडबैक में सुधार हो सकता है, लेकिन यह एक विश्वसनीय बिज़नेस-सिलेक्शन कमिट सिग्नल नहीं है। एक वास्तविक चयन के लिए अभी भी एक एक्सेसिबल कंट्रोल और JavaScript स्टेट की आवश्यकता होती है।

दिशात्मक फीडबैक के लिए scrolled का उपयोग करें

एक शीर्ष टूलबार नवीनतम स्क्रॉल दिशा पर प्रतिक्रिया कर सकता है, लेकिन दिशात्मक हलचल संज्ञानात्मक भार (cognitive load) बढ़ा सकती है। इसे डिफ़ॉल्ट रूप से एक्सेसिबल रखें; scrolled: block-start या block-end का उपयोग केवल तभी करें जब लाभ स्पष्ट हो, और एक ट्रांजिशन जोड़ें।

प्रोग्रेसिव एन्हांसमेंट और फॉलबैक

जब scroll-state असमर्थित हो तब भी बेस स्टाइल उपयोग योग्य रहनी चाहिए:

css

.nav {
  box-shadow: none;
}

@supports (container-type: scroll-state) {
  .sticky-heading {
    container-type: scroll-state;
  }

  @container scroll-state(stuck: top) {
    .nav {
      box-shadow: 0 5px 12px rgb(0 0 0 / 18%);
    }
  }
}

यदि किसी पुराने ब्राउज़र को समान संकेत प्राप्त होना चाहिए, तो एक संकीर्ण IntersectionObserver या ResizeObserver फॉलबैक का उपयोग करें। फॉलबैक में पूर्ण स्क्रॉल-इवेंट लूप फिर से न बनाएं।

मोशन और सत्यापन

Chrome गैर-जरूरी मोशन को prefers-reduced-motion: no-preference के पीछे रखने की अनुशंसा करता है। शीर्ष और निचले किनारों, कोई ओवरफ्लो नहीं, कीबोर्ड संचालन, टच स्क्रॉलिंग, स्नैप मध्यवर्ती अवस्थाओं, ज़ूम और असमर्थित ब्राउज़र का परीक्षण करें। पुष्टि करें कि स्टेट परिवर्तन कभी भी फोकस या कंटेंट को छिपाते नहीं हैं।

उच्च गुणवत्ता वाला नमूना उत्तर

"मैं पहले पूछूंगा कि क्या यह विज़ुअल फीडबैक है या कोई बिज़नेस इवेंट। Sticky शैडो, स्नैप हाइलाइट या स्क्रॉल हिंट के लिए, मैं sticky या snapping एलिमेंट पर container-type: scroll-state सेट करूंगा और stuck, snapped, या scrollable क्वेरीज़ का उपयोग करूंगा ताकि डिसेंडेंट प्रतिक्रिया दे सके। एनालिटिक्स, प्रोग्रेस गणना और सिलेक्शन सबमिशन JavaScript में रहेंगे। मैं उपयोग योग्य डिफ़ॉल्ट CSS शिप करूंगा, @supports के पीछे एन्हांसमेंट जोड़ूंगा, एक स्थिर फॉलबैक रखूंगा, और अनुरोध किए जाने पर मोशन कम करूंगा। मैं वास्तविक ओवरफ्लो, स्नैप, कीबोर्ड इनपुट और पुराने ब्राउज़रों का परीक्षण करूंगा।"

सामान्य गलतियां

scroll-state को स्क्रॉल इवेंट मानना

विफलता पैटर्न: एनालिटिक्स, एक रिक्वेस्ट, या बिज़नेस सबमिशन को ट्रिगर करने के लिए क्वेरी का उपयोग करना। यह विफल क्यों होता है: CSS एक स्टाइल कंडीशन व्यक्त करता है, कोई इवेंट पेलोड या विश्वसनीय बिज़नेस टाइमिंग नहीं। समाधान: स्टाइलिंग को CSS में और बिज़नेस एक्शन्स को सिमेंटिक कंट्रोल्स प्लस JavaScript में रखें।

क्वेरी कंटेनर को भूल जाना

विफलता पैटर्न: container-type: scroll-state के बिना @container scroll-state(stuck: top) लिखना। यह विफल क्यों होता है: ब्राउज़र के पास मूल्यांकन करने के लिए कोई स्टेट स्रोत नहीं होता है। समाधान: sticky, snap, या ओवरफ्लो पूर्व-आवश्यकता को सत्यापित करें, फिर एक नामित कंटेनर घोषित करें।

कंटेनर को ही स्टाइल करना

विफलता पैटर्न: एक ही एलिमेंट को कंटेनर और स्टेट-स्टाइल टारगेट दोनों बनाना। यह विफल क्यों होता है: क्वेरी डिसेंडेंट्स को टारगेट करती है, और संरचना नाजुक हो जाती है। समाधान: एक आंतरिक रैपर जोड़ें और स्टेट फीडबैक वहां लागू करें।

एक्सेसिबल फीडबैक को केवल रंग से बदलना

विफलता पैटर्न: वर्तमान स्नैप कार्ड या अधिक कंटेंट दिखाने के लिए केवल रंग बदलना। यह विफल क्यों होता है: केवल रंग स्टेट को विश्वसनीय रूप से नहीं बताता है और कम दृष्टि वाले उपयोगकर्ताओं को बाहर कर सकता है। समाधान: टेक्स्ट, फोकस, कंट्रोल्स, या एक क्रियाशील स्क्रॉल संकेत प्रदान करें।

सपोर्ट और मोशन सीमाओं को अनदेखा करना

विफलता पैटर्न: यह मान लेना कि प्रत्येक ब्राउज़र फीचर का समर्थन करता है और स्क्रॉल के दौरान मोशन के लिए बाध्य करना। यह विफल क्यों होता है: पुराने ब्राउज़रों में गिरावट आती है और मोशन असुविधा पैदा कर सकता है। समाधान: @supports का उपयोग करें, डिफ़ॉल्ट को उपयोग योग्य रखें, और reduced-motion का सम्मान करें।

फॉलो-अप और उत्तर

क्या होगा यदि आपको सटीक स्क्रॉल प्रतिशत की आवश्यकता हो?

scroll-state असतत (discrete) स्टेट्स को प्रदर्शित करता है, न कि निरंतर प्रतिशत को। स्क्रॉल रेंज को पढ़ने और अपडेट को थ्रॉटल करने के लिए JavaScript का उपयोग करें, रीड्स, कंप्यूटेशन और राइट्स को अलग करें ताकि प्रत्येक स्क्रॉल इवेंट समकालिक रूप से लेआउट को ट्रिगर न करे।

क्या होगा यदि sticky क्वेरी हमेशा false हो?

Sticky एलिमेंट के कंटेनिंग ब्लॉक, top या inset, पूर्वज ओवरफ्लो, और क्या एलिमेंट वास्तव में अपनी sticky रेंज में प्रवेश करता है, इसकी जांच करें। केवल तभी container-type और डिसेंडेंट चयनकर्ता का निरीक्षण करें।

क्या होगा यदि स्नैप हाइलाइट झिलमिलाता (flickers) है?

स्नैप अक्ष, scroll-snap-align, और टारगेट आयामों की जांच करें। उन प्रॉपर्टीज़ पर ट्रांजिशन से बचें जो बार-बार लेआउट बदलती हैं। फोकस और सिलेक्शन स्टेट को स्पष्ट रखें; हाइलाइटिंग केवल विज़ुअल स्टेट है।

क्या होगा यदि पुराने ब्राउज़र बिल्कुल समान दिखने चाहिए?

पहले एक उपयोग योग्य स्थिर स्टाइल को परिभाषित करें, फिर मुख्य संकेत के लिए एक छोटा IntersectionObserver या ResizeObserver फॉलबैक जोड़ें। एक जटिल स्क्रॉल-लिसनर सिस्टम की नकल न करें; यदि एन्हांसमेंट में मदद से अधिक लागत आती है, तो एक स्थिर शैडो या हमेशा दिखने वाला संकेत स्वीकार करें।

क्या होगा यदि उपयोगकर्ता रिड्यूस्ड मोशन पसंद करता है?

बिना जबरन ट्रांसलेशन या स्केलिंग के सूचना पदानुक्रम (hierarchy) बनाए रखें। केवल शैडो, बॉर्डर, या स्थिर रंग बदलें, और prefers-reduced-motion को ट्रांजिशन और एनिमेशन को ओवरराइड करने दें।