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

Chrome 81 और उसके बाद के वर्शन में, रीस्नैप करने के लिए इवेंट लिसनर जोड़ने की ज़रूरत नहीं है.

Adam Argyle

Kaan Alsan

Yi Gu

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

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

कई ब्राउज़र में, सीएसएस स्क्रोल स्नैप की बुनियादी सुविधा होती है. ज़्यादा जानकारी के लिए, क्या CSS स्क्रॉल स्नैप का इस्तेमाल किया जा सकता है? देखें.

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

बैकग्राउंड

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

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

• स्क्रोल करते समय, स्क्रोल करने की जगहों को अजीब होने से रोकता है.
• कॉन्टेंट को अलग-अलग पेजों में दिखाने की सुविधा लागू करता है.

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

कमियां

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

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

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

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

Chrome 81 में लेआउट में बदलाव होने के बाद, स्क्रीन को फिर से स्नैप करने की सुविधा

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

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

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

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

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

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

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

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

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

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

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