CSS Scroll Snap के साथ अच्छी तरह से नियंत्रित स्क्रोलिंग

स्क्रोल स्नैप करने की पोज़िशन तय करके, स्क्रोल करने का अनुभव बेहतर तरीके से कंट्रोल करें.

Robert Flack

Majid Valipour

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

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

बैकग्राउंड

स्क्रोल स्नैपिंग की सुविधा के बारे में जानकारी

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

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

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

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

इमेज कैरसेल के साथ सीएसएस स्क्रोल स्नैप का इस्तेमाल करने का उदाहरण. यहां स्क्रोल स्नैपिंग की सुविधा से यह पक्का होता है कि स्क्रोल करने के आखिर में, इमेज का हॉरिज़ॉन्टल केंद्र, स्क्रोल कंटेनर के हॉरिज़ॉन्टल केंद्र के साथ अलाइन हो.

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

स्क्रोल स्नैप करने का मतलब है स्क्रोल कंटेनर के स्क्रोल ऑफ़सेट को इस तरह सेट करना कि स्क्रोल कार्रवाई पूरी हो जाने के बाद, उसे अपनी पसंदीदा स्नैप पोज़िशन पर रखा जा सके.

किसी स्क्रोल कंटेनर को स्क्रोल स्नैप करने की सुविधा के लिए, scroll-snap-type प्रॉपर्टी का इस्तेमाल किया जा सकता है. यह ब्राउज़र को बताता है कि उसे इस स्क्रोल कंटेनर को इसके डिसेंडेंट से बनी स्नैप पोज़िशन पर स्नैप करना चाहिए. scroll-snap-type, उस अक्ष को तय करता है जिस पर स्क्रोलिंग होती है: x, y या both. साथ ही, स्नैप करने की सटीक क्वालिटी भी तय करता है: mandatory, proximity. इनके बारे में ज़्यादा जानकारी बाद में दी जाएगी.

किसी एलिमेंट पर अपनी पसंद का अलाइनमेंट तय करके, स्नैप पोज़िशन बनाई जा सकती है. यह पोज़िशन स्क्रोल ऑफ़सेट होती है जिस पर सबसे नज़दीकी एंसेस्टर स्क्रोल कंटेनर होता है और एलिमेंट दिए गए ऐक्सिस के हिसाब से अलाइन होता है. हर ऐक्सिस पर ये अलाइनमेंट हो सकते हैं: start, end, center.

start अलाइनमेंट का मतलब है कि स्क्रॉल कंटेनर के स्नैपपोर्ट के शुरू होने वाले किनारे को, एलिमेंट के स्नैप एरिया के शुरू होने वाले किनारे के साथ फ़्लश किया जाना चाहिए. इसी तरह, end और center अलाइनमेंट का मतलब है कि स्क्रॉल कंटेनर के स्नैपपोर्ट के आखिरी किनारे या बीच को, एलिमेंट के स्नैप एरिया के आखिरी किनारे या बीच के साथ फ़्लश किया जाना चाहिए.

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

हॉरिज़ॉन्टल स्क्रोलिंग ऐक्सिस पर अलग-अलग अलाइनमेंट का उदाहरण.

नीचे दिए गए उदाहरणों में, इन कॉन्सेप्ट को इस्तेमाल करने का तरीका बताया गया है.

उदाहरण: एक हॉरिज़ॉन्टल गैलरी

इमेज कैरसेल, स्क्रोल स्नैपिंग के इस्तेमाल का एक सामान्य उदाहरण है. उदाहरण के लिए, स्क्रोल करते समय हर इमेज के साथ स्नैप किया जाने वाला हॉरिज़ॉन्टल इमेज कैरसेल बनाने के लिए, हम स्क्रोल कंटेनर में हॉरिज़ॉन्टल ऐक्सिस पर एक ज़रूरी scroll-snap-type तय कर सकते हैं. हर इमेज को scroll-snap-align: center पर सेट करके पक्का करें कि स्नैप करने से इमेज, कैरसेल के अंदर ही मौजूद हो.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

<div id="gallery">
  <img src="cat.jpg">
  <img src="dog.jpg">
  <img src="another_cute_animal.jpg">
</div>

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

डेमो देखें | सोर्स

उदाहरण: प्रॉडक्ट का ऐसा पेज जिस पर खरीदार ने पहले भी विज़िट किया हो

एक अन्य सामान्य स्थिति है जिसे स्क्रोल स्नैप करने से फ़ायदा हो सकता है. वह है ऐसे पेज जिनमें वर्टिकल स्क्रोल करने के लिए कई लॉजिकल सेक्शन होते हैं. उदाहरण के लिए, एक सामान्य प्रॉडक्ट पेज. scroll-snap-type: y proximity;, इस तरह के मामलों के लिए ज़्यादा सही है. जब कोई उपयोगकर्ता किसी सेक्शन के बीच में स्क्रोल करता है, तो यह सुविधा उसमें रुकावट नहीं डालती. हालांकि, जब उपयोगकर्ता किसी सेक्शन के करीब स्क्रोल करता है, तो यह सुविधा उस सेक्शन पर स्नैप हो जाती है और उपयोगकर्ता का ध्यान उस पर खींच लेती है.

ऐसा करने का तरीका यहां बताया गया है:

article {
  scroll-snap-type: y proximity;
  /* Reserve space for header plus some extra space for sneak peeking. */
  scroll-padding-top: 15vh;
  overflow-y: scroll;
}
section {
  /* Snap align start. */
  scroll-snap-align: start;
}
header {
  position: fixed;
  height: 10vh;
}

<article>
  <header> Header </header>
  <section> Section One </section>
  <section> Section Two </section>
  <section> Section Three </section>
</article>

स्क्रोल पैडिंग और मार्जिन

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

scroll-padding प्रॉपर्टी एक नई सीएसएस प्रॉपर्टी है. इसका इस्तेमाल स्क्रोल कंटेनर या स्नैपपोर्ट के दिखने वाले इलाके में बदलाव करने के लिए किया जा सकता है. इसका इस्तेमाल स्नैप अलाइनमेंट का हिसाब लगाते समय किया जाता है. प्रॉपर्टी, स्क्रोल कंटेनर के पैडिंग बॉक्स के सामने इनसेट को तय करती है. हमारे उदाहरण में, सबसे ऊपर 15vh अतिरिक्त इनसेट जोड़ा गया था. यह ब्राउज़र को स्क्रोल कंटेनर के ऊपरी किनारे के नीचे, 15vh को स्क्रोल कंटेनर के ऊपरी किनारे के नीचे, स्क्रोल स्नैप करने के लिए इसके वर्टिकल स्टार्ट एज के तौर पर निर्देश देता है. स्नैप करते समय, स्नैप लक्ष्य तत्व का शुरुआती किनारे इस नई स्थिति से फ़्लश हो जाएगा, जिससे ऊपर स्थान छूट जाएगा.

scroll-margin प्रॉपर्टी से, स्नैप टारगेट के असरदार बॉक्स में बदलाव करने के लिए इस्तेमाल होने वाली शुरुआती रकम के बारे में पता चलता है. यह ठीक उसी तरह काम करती है जिस तरह scroll-padding, स्नैप स्क्रोल कंटेनर पर काम करती है.

आपको पता चल सकता है कि इन दोनों प्रॉपर्टी में "snap" शब्द मौजूद नहीं है. यह जान-बूझकर ऐसा किया जाता है, क्योंकि वे सभी ज़रूरी स्क्रोल कार्रवाइयों के लिए बॉक्स में बदलाव करते हैं. वे सिर्फ़ स्क्रोल स्नैप नहीं करते. उदाहरण के लिए, Chrome पेज को स्क्रोल करने से जुड़ी कार्रवाइयों, जैसे कि PageDown और PageUp के लिए पेज साइज़ का हिसाब लगाते समय और Element.scrollIntoView() कार्रवाई के लिए स्क्रोल की संख्या का हिसाब लगाते समय भी इन बातों का ध्यान रखता है.

डेमो देखें | सोर्स

स्क्रोल करने के लिए अन्य एपीआई के साथ इंटरैक्शन

DOM Scrolling API

स्क्रोल स्नैपिंग, स्क्रोल करने के सभी ऑपरेशन के बाद होती है. इनमें स्क्रिप्ट से शुरू किए गए ऑपरेशन भी शामिल हैं. Element.scrollTo जैसे एपीआई का इस्तेमाल करने पर, ब्राउज़र ऑपरेशन के लिए स्क्रोल की सही जगह का हिसाब लगाएगा. इसके बाद, स्नैप की गई आखिरी जगह का पता लगाने के लिए, सही स्नैपिंग लॉजिक लागू करेगा. इसलिए, स्नैप करने के लिए, उपयोगकर्ता स्क्रिप्ट को मैन्युअल तरीके से कोई कैलकुलेशन करने की ज़रूरत नहीं होती.

स्मूद स्क्रोलिंग

स्मूद स्क्रोलिंग, प्रोग्राम के हिसाब से स्क्रोल करने की प्रोसेस के व्यवहार को कंट्रोल करती है. वहीं, स्क्रोल स्नैप से डेस्टिनेशन तय होता है. ये स्क्रोलिंग के ऑर्थोगोनल पहलुओं को कंट्रोल करते हैं. इसलिए, इनका एक साथ इस्तेमाल किया जा सकता है और एक-दूसरे को बेहतर बनाया जा सकता है.

ओवरस्क्रोल व्यवहार

ओवरस्क्रोल व्यवहार एपीआई यह कंट्रोल करता है कि कई एलिमेंट में स्क्रोल कैसे चेन किया जाता है. साथ ही, स्क्रोल स्नैप से इसका कोई असर नहीं पड़ता.

सावधानियां और सबसे सही तरीके

जब टारगेट एलिमेंट के बीच का फ़ासला ज़्यादा हो, तो ज़रूरी स्नैपिंग का इस्तेमाल न करें. इस वजह से, स्नैप पोज़िशन के बीच मौजूद कॉन्टेंट को ऐक्सेस नहीं किया जा सकता.

कई मामलों में, स्क्रोल-स्नैपिंग को बेहतर बनाने की सुविधा के तौर पर जोड़ा जा सकता है. इसके लिए, किसी सुविधा का पता लगाने की ज़रूरत नहीं होती. अगर ज़रूरी हो, तो सीएसएस स्क्रॉल स्नैप की सुविधा के काम करने की जानकारी पाने के लिए, @supports या CSS.supports का इस्तेमाल करें. scroll-snap-type का इस्तेमाल करने से बचें जो अब काम नहीं करने वाली स्पेसिफ़िकेशन में भी मौजूद है.

सीएसएस में सुविधा का पता लगाना

@supports (scroll-snap-align: start) {
  article {
    scroll-snap-type: y proximity;
    scroll-padding-top: 15vh;
    overflow-y: scroll;
  }
}

JavaScript में सुविधा की पहचान

if (CSS.supports('scroll-snap-align: start')) {
  // use css scroll snap
} else {
  // use fallback
}

ऐसा न सोचें कि प्रोग्राम के हिसाब से स्क्रोल करने वाले एपीआई, जैसे कि Element.scrollTo हमेशा अनुरोध किए गए स्क्रोल ऑफ़सेट पर पहुंच जाते हैं. प्रोग्राम के हिसाब से स्क्रोल करने की सुविधा पूरी होने के बाद, स्क्रोल स्नैपिंग की सुविधा, स्क्रोल ऑफ़सेट में बदलाव कर सकती है. ध्यान दें कि स्क्रॉल स्नैप से पहले भी, यह एक अच्छी धारणा नहीं थी, क्योंकि स्क्रॉल करने में अन्य वजहों से रुकावट आ सकती थी. हालांकि, ऐसा खास तौर पर स्क्रॉल स्नैपिंग के मामले में होता है.

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

आने वाला काम

Chrome की टीम ने हाल ही में एक सर्वे किया था. इसमें स्क्रोल करने के अनुभव पर फ़ोकस किया गया था. सर्वे के नतीजों से पता चला है कि प्लग इन लाइब्रेरी और सीएसएस के बीच के अंतर को कम करने के लिए, कई चीज़ों पर काम करना ज़रूरी है. आने वाले समय में, scroll-snap पर फ़ोकस किया जाएगा. इसमें ये चीज़ें शामिल हैं:

1. एपीआई की उपलब्धता और अलग-अलग ब्राउज़र के साथ काम करने की सुविधा.
2. scroll-start जैसे नए CSS API पर काम करें.
3. snapChanged() जैसे नए JS इवेंट पर काम करें.