लेआउट में बदलाव करने के बाद स्नैप करना स्क्रोल करें

Chrome 81 से, अब आपको ज़बरदस्ती फिर से स्नैप करने के लिए इवेंट लिसनर को जोड़ने की ज़रूरत नहीं है.

Adam Argyle

Kaan Alsan

Yi Gu

CSS Scroll Snap की मदद से वेब डेवलपर, स्क्रोल करने की पोज़िशन बताते हैं और इससे स्क्रोल करने के अनुभव को बेहतर तरीके से कंट्रोल किया जा सकता है. मौजूदा तरीके की एक कमी यह है कि लेआउट में बदलाव होने पर, जैसे कि व्यूपोर्ट का साइज़ बदलने या डिवाइस को घुमाने पर, स्क्रोल स्नैप करने की सुविधा ठीक से काम नहीं करती. इस समस्या को Chrome 81 में ठीक कर दिया गया है.

इंटरोऑपरेबिलिटी

कई ब्राउज़र में CSS Scroll Snap के लिए बुनियादी सहायता मौजूद है. ज़्यादा जानकारी के लिए, क्या सीएसएस स्क्रोल Snap का इस्तेमाल किया जा सकता है? देखें.

फ़िलहाल, लेआउट में बदलाव के बाद स्क्रोल स्नैप करने की सुविधा लागू करने के लिए, Chrome इकलौता ब्राउज़र है. इसे लागू करने के लिए, Firefox का एक टिकट खुला है. वहीं, Safari के कॉन्टेंट में बदलाव होने पर, फिर से स्नैप करने के लिए, एक ओपन टिकट भी खुला है. फ़िलहाल, ऐसा करने के लिए इवेंट लिसनर में यह कोड जोड़ा जा सकता है, ताकि स्नैपिंग लागू किया जा सके: javascript scroller.scrollBy(0,0); हालांकि, इससे यह गारंटी नहीं मिलती कि स्क्रोलर उसी एलिमेंट पर वापस स्नैप करता है.

बैकग्राउंड

सीएसएस स्क्रोल स्नैप

सीएसएस Scroll Snap सुविधा की मदद से वेब डेवलपर अच्छी तरह से कंट्रोल की गई स्क्रोल अनुभव बना सकते हैं. इसके लिए उन्हें स्क्रोल स्नैप करने की पोज़िशन का एलान करना होता है. इन पोज़िशन से यह पक्का किया जाता है कि स्क्रोल किए जा सकने वाले कॉन्टेंट को उसके कंटेनर के साथ सही तरीके से अलाइन किया गया है, ताकि सटीक स्क्रोलिंग की समस्याओं को हल किया जा सके. दूसरे शब्दों में, स्क्रोल स्नैप करना:

• स्क्रोल करते समय, स्क्रोल करने की खराब पोज़िशन से बचाता है.
• कॉन्टेंट पर पेजिंग की प्रक्रिया को बेहतर बनाता है.

पेज पर नंबर वाले लेख और इमेज कैरसेल, दो आम तौर पर स्क्रोल स्नैप के लिए इस्तेमाल किए जाते हैं.

कमियां

स्क्रोल स्नैप करने की सुविधा से, उपयोगकर्ता कॉन्टेंट पर आसानी से नेविगेट कर पाते हैं. हालांकि, कॉन्टेंट और लेआउट में होने वाले बदलावों के हिसाब से न हो पाने पर, इसके कुछ संभावित फ़ायदे ब्लॉक हो जाते हैं. जैसा कि ऊपर दिए गए उदाहरण में दिखाया गया है, पहले जोड़े गए एलिमेंट को ढूंढने के लिए, उपयोगकर्ताओं को विंडो का साइज़ बदलने पर स्क्रोल की पोज़िशन को फिर से अडजस्ट करना होगा. लेआउट में बदलाव करने वाली कुछ सामान्य स्थितियां ये हैं:

• विंडो का साइज़ बदलना
• डिवाइस को घुमाना
• DevTools खोला जा रहा है

पहले दो स्थितियों में, उपयोगकर्ताओं के लिए CSS Scroll Snap को कम दिलचस्प बनाया जाता है और तीसरी स्थिति, डीबग करते समय डेवलपर के लिए डरावना अनुभव है. डेवलपर को इन कमियों को ध्यान में रखकर ऐसा डाइनैमिक अनुभव बनाना होगा जिसमें कॉन्टेंट जोड़ने, हटाने या एक जगह से दूसरी जगह ले जाने जैसी कार्रवाइयां की जा सकें.

इसे ठीक करने के लिए, आम तौर पर लिसनर को जोड़ना होता है, जो JavaScript के ज़रिए प्रोग्राम के हिसाब से स्क्रोल करते हैं. इससे लेआउट में होने वाले किसी भी बदलाव पर, स्नैप करने की सुविधा लागू हो जाती है. यह तरीका तब काम का नहीं हो सकता, जब उपयोगकर्ता को उम्मीद हो कि स्क्रोल करने वाला व्यक्ति पहले की तरह उसी कॉन्टेंट पर वापस चला जाएगा. ऐसा लगता है कि JavaScript का इस्तेमाल किसी भी अन्य तरीके से करने पर, यह सीएसएस सुविधा का मकसद भी करीब-करीब उल्लंघन ही हो जाता है.

Chrome 81 में लेआउट में बदलाव होने के बाद, फिर से स्नैप करने के लिए पहले से मौजूद सहायता

बताई गई कमियां अब Chrome 81 में मौजूद नहीं हैं: लेआउट बदलने के बाद भी स्क्रोलर स्नैप होते रहेंगे. वे अपना लेआउट बदलने के बाद स्क्रोल की पोज़िशन का फिर से मूल्यांकन करेंगे और ज़रूरत पड़ने पर उन्हें सबसे नज़दीकी स्नैप पोज़िशन पर फिर से स्नैप करेंगे. अगर स्क्रोलर को पहले किसी ऐसे एलिमेंट पर स्नैप किया गया था जो लेआउट में बदलाव के बाद भी मौजूद है, तो स्क्रोलर उस एलिमेंट पर वापस स्नैप करने की कोशिश करेगा. इस उदाहरण में देखें कि लेआउट बदलने पर क्या होता है.

ज़्यादा जानकारी के लिए, लेआउट में बदलाव के बारे में जानकारी को फिर से स्नैप करना देखें.

उदाहरण: स्टिकी स्क्रोलबार

"लेआउट में बदलाव के बाद स्नैप करें" सुविधा की मदद से, डेवलपर सीएसएस की कुछ लाइनों का इस्तेमाल करके, स्टिकी स्क्रोलबार लागू कर सकते हैं:

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

क्या आपको ज़्यादा जानकारी चाहिए? विज़ुअल के लिए, यह डेमो चैट का यूज़र इंटरफ़ेस (यूआई) देखें.

आने वाले समय में किए जाने वाले काम

फ़िलहाल, री-स्नैपिंग किए गए सभी स्क्रोल इफ़ेक्ट तुरंत मिलते हैं. स्नैप करने की सुविधा के साथ एक बार इसे फिर से स्नैप करने की सुविधा को फ़ॉलो-अप किया जा सकता है. ज़्यादा जानकारी के लिए खास तौर पर बताई गई समस्या देखें.

सुझाव/राय दें या शिकायत करें

लेआउट में बदलावों के बाद फिर से स्नैप करने के लिए आपके सुझाव, शिकायत या राय बहुत अहम हैं. इसलिए, आगे बढ़ें और इसे आज़माकर देखें और Chromium इंजीनियर को बताएं कि आपको क्या करना है.