स्क्रॉलबार के कारण होने वाले लेआउट शिफ्ट को रोकने के लिए आप scrollbar-gutter का उपयोग कैसे करेंगे?

प्रश्न और परिदृश्य

पेज overflow: auto का उपयोग करता है: इंटरैक्शन से पहले कोई ओवरफ़्लो नहीं होता है, फिर एक क्लासिक स्क्रॉलबार दिखाई देता है। चूंकि यह इनलाइन स्पेस की खपत करता है, इसलिए केंद्रित सामग्री (centered content) खिसक जाती है। CSS डिज़ाइन, इसकी सीमाओं, फ़ॉलबैक व्यवहार और मापने योग्य सत्यापन की व्याख्या करें।

साक्षात्कारकर्ता क्या परीक्षण कर रहा है

• क्या आप जानते हैं कि scrollbar-gutter एक स्क्रॉलिंग बॉक्स पर लागू होता है और इनहेरिट नहीं होता है।
• क्या आप क्लासिक और ओवरले स्क्रॉलबार के बीच अंतर कर सकते हैं और stable बनाम both-edges की व्याख्या कर सकते हैं।
• क्या आप रूट, body और नेस्टेड स्क्रॉलर्स के बीच स्कोप के अंतर को समझते हैं।
• क्या योजना में मोडल लॉकिंग, RTL, पुराने ब्राउज़र और CLS मॉनिटरिंग शामिल हैं।

पहले पूछे जाने वाले स्पष्टीकरण प्रश्न

पुष्टि करें कि क्या जंप व्यूपोर्ट में है या किसी आंतरिक स्क्रॉलर में, क्या ऑपरेटिंग सिस्टम ओवरले स्क्रॉलबार का उपयोग करता है, क्या RTL आवश्यक है, मोडल पेज स्क्रॉलिंग को कैसे लॉक करता है, और कौन से ब्राउज़र और एक्सेसिबिलिटी लक्ष्य मायने रखते हैं। पूछें कि क्या लेआउट को ज्यामितीय रूप से केंद्रित रहना चाहिए या ओवरफ़्लो शुरू होने पर केवल एकतरफा हलचल से बचना चाहिए।

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

मैं वास्तविक स्क्रॉलिंग बॉक्स पर scrollbar-gutter: stable लगाऊंगा ताकि ओवरफ़्लो से पहले और बाद में क्लासिक-स्क्रॉलबार स्पेस मौजूद रहे; जब सममित (symmetric) केंद्रीकरण मायने रखता हो तो stable both-edges का उपयोग करें। व्यूपोर्ट स्क्रॉलिंग के लिए रूट और अपने स्वयं के स्क्रॉलिंग के लिए प्रत्येक आंतरिक पैनल को कॉन्फ़िगर करें। ओवरले स्क्रॉलबार आमतौर पर लेआउट स्पेस की खपत नहीं करते हैं, इसलिए रिज़र्व करने के लिए कोई निश्चित चौड़ाई नहीं होती है। मोडल लॉकिंग, RTL और लेगेसी फ़ॉलबैक को स्पष्ट रखें, फिर लेआउट-शिफ्ट इंस्ट्रूमेंटेशन और वास्तविक डिवाइस मैट्रिक्स के साथ सत्यापित करें।

चरण-दर-चरण गहन विश्लेषण

1. स्क्रॉलिंग बॉक्स की पहचान करें। रूट व्यूपोर्ट स्क्रॉलिंग को नियंत्रित करता है; body घोषणा रूट व्यवहार का विकल्प नहीं है। एक स्वतंत्र रूप से स्क्रॉल करने वाले पैनल को अपनी घोषणा की आवश्यकता होती है।
2. मान चुनें। stable क्लासिक स्क्रॉलबार के लिए इनलाइन स्पेस रिज़र्व करता है; both-edges ज्यामितीय केंद्रीकरण बनाए रखने के लिए विपरीत किनारे पर एक समान गटर जोड़ता है।
3. ओवरले को समझें। एक ओवरले स्क्रॉलबार सामग्री के ऊपर बैठता है और सामान्य रूप से कोई लेआउट स्पेस नहीं लेता है। उपयोगकर्ता एजेंट (UA) और ऑपरेटिंग सिस्टम मोड चुनते हैं; CSS क्लासिक स्क्रॉलबार को बाध्य नहीं कर सकता है।
4. मोडल का समन्वय करें। पेज स्क्रॉल को लॉक करने और पुनर्स्थापित करने के लिए एकल स्टेट मशीन का उपयोग करें। ब्राउज़र द्वारा रिज़र्व किए गए गटर के ऊपर बिना शर्त padding-right जोड़ने से बचें। मोडल के आंतरिक स्क्रॉलर को अलग से कॉन्फ़िगर करें।
5. अनुकूलता और RTL को कवर करें। आधुनिक ब्राउज़रों में लॉजिकल इनलाइन किनारों का उपयोग करें, पुराने परिवेशों के लिए न्यूनतम फ़ॉलबैक रखें, और दिशा, स्क्रॉलबार साइड और सेफ़ एरिया का परीक्षण करें।
6. परिणाम मापें। layout-shift प्रदर्शन प्रविष्टियों को रिकॉर्ड करें, उपयोगकर्ता इनपुट से पहले और बाद के शिफ्ट्स में अंतर करें, और लंबी सूचियों, मोडल और धीमे नेटवर्क के लिए लैब परीक्षणों को फ़ील्ड p75 डेटा के साथ संयोजित करें। एक अच्छा CLS लक्ष्य p75 पर 0.1 या उससे कम है।

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

मैं इसे उन बॉक्सों पर घोषित करूंगा जो वास्तव में स्क्रॉल करते हैं:

html {
  scrollbar-gutter: stable both-edges;
}

.results-pane {
  overflow: auto;
  scrollbar-gutter: stable;
}

stable बिना ओवरफ़्लो के क्लासिक-स्क्रॉलबार स्पेस को बनाए रखता है; both-edges व्यूपोर्ट-केंद्रित लेआउट को सममित रखता है। यदि सिस्टम ओवरले स्क्रॉलबार का उपयोग करता है, तो वे पहले से ही कोई लेआउट स्पेस नहीं लेते हैं, इसलिए मैं एक निश्चित पिक्सेल रिज़र्वेशन का वादा नहीं करूंगा। मोडल खोलते समय, मैं बिना शर्त दूसरा स्क्रॉलबार-चौड़ाई मुआवज़ा (compensation) नहीं जोड़ूंगा; लॉकिंग स्टेट मशीन और गटर नीति एकमत होनी चाहिए, जबकि मोडल के आंतरिक स्क्रॉलर को स्वतंत्र रूप से कॉन्फ़िगर किया जाना चाहिए।

मैं रूट बनाम body, नेस्टेड स्क्रॉलर्स, RTL, बंद करने के बाद बहाली, पुराने-ब्राउज़र फ़ॉलबैक और रिड्यूस्ड-मोशन प्राथमिकताओं को सत्यापित करूंगा। मैं layout-shift प्रविष्टियों और फ़ील्ड p75 CLS को एकत्र करूंगा, जिसका लक्ष्य 0.1 या उससे कम p75 CLS होगा। MDN और W3C विनिर्देश प्रॉपर्टी सिमेंटिक्स को परिभाषित करते हैं; web.dev CLS मापन मॉडल प्रदान करता है।

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

• यह जांचे बिना कि कौन सा तत्व वास्तव में स्क्रॉल करता है, एक सामान्य पैरेंट पर scrollbar-gutter लगाना।
• यह मान लेना कि body घोषणा आवश्यक रूप से व्यूपोर्ट को नियंत्रित करती है और रूट व्यवहार को अनदेखा करना।
• ओवरले स्क्रॉलबार के लिए एक निश्चित पिक्सेल रिज़र्वेशन का वादा करना।
• बिना शर्त padding-right जोड़ते हुए stable को भी सक्षम करना, जिससे मोडल खुलने पर दोहरा स्पेस बन जाता है।
• CLS या आंतरिक पैनल को मापे बिना केवल एक ऑपरेटिंग सिस्टम और बिना-RTL वाले स्क्रीनशॉट का परीक्षण करना।

अनुवर्ती प्रश्न और उत्तर

both-edges का उपयोग क्यों करें?

एकतरफा stable उस इनलाइन किनारे को रिज़र्व करता है जहाँ क्लासिक स्क्रॉलबार दिखाई दे सकता है। यदि सामग्री व्यूपोर्ट में केंद्रित है, तो विपरीत किनारे पर एक समान गटर ज्यामितीय समरूपता को बनाए रखता है; फिर भी RTL और विभिन्न स्क्रॉलबार प्लेसमेंट का परीक्षण करें।

क्या scrollbar-gutter हर मोडल स्क्रॉल-लॉक समस्या को हल करता है?

नहीं। यह स्क्रॉलिंग-बॉक्स लेआउट स्पेस को रिज़र्व करता है; यह फ़ोकस ट्रैपिंग, बैकग्राउंड इनर्टनेस, स्क्रॉल-स्थिति पुनर्स्थापना, या स्टैकिंग ऑर्डर को लागू नहीं करता है। वे अलग जिम्मेदारियां बनी रहती हैं, और लॉक को चौड़ाई के मुआवज़े की नकल नहीं करनी चाहिए।

आप ओवरले और क्लासिक स्क्रॉलबार का परीक्षण कैसे करते हैं?

कम से कम एक क्लासिक-स्क्रॉलबार परिवेश और एक ओवरले-स्क्रॉलबार परिवेश का उपयोग करें। बिना ओवरफ़्लो, ओवरफ़्लो की शुरुआत, मोडल खोलने और बंद करने, आंतरिक-पैनल स्क्रॉलिंग, RTL और ज़ूम का परीक्षण करें। केवल स्क्रीनशॉट पर निर्भर रहने के बजाय मुख्य-तत्व ज्यामिति और layout-shift प्रविष्टियों को रिकॉर्ड करें।