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

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

Robert Flack

Majid Valipour

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

बैकग्राउंड

स्क्रोल स्नैपिंग का केस

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

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

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

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

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

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

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

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

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

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

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

स्क्रोल स्नैप करने की सुविधा का इस्तेमाल आम तौर पर, इमेज कैरसेल के तौर पर किया जाता है. उदाहरण के लिए, स्क्रोल करने पर हर इमेज से स्नैप करने वाला हॉरिज़ॉन्टल इमेज कैरसेल बनाने के लिए, हम हॉरिज़ॉन्टल ऐक्सिस पर स्क्रोल करने वाले कंटेनर के लिए एक ज़रूरी 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() ऑपरेशन के लिए स्क्रोल की रकम का हिसाब लगाते समय भी Chrome इनका ध्यान रखता है.

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

DOM स्क्रोलिंग एपीआई

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

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

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

ओवरस्क्रोल की कार्रवाई

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

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

जब लक्ष्य एलीमेंट बहुत ज़्यादा दूरी पर हों, तो ज़रूरी स्नैपिंग का इस्तेमाल करने से बचें. इसके कारण स्नैप स्थितियों के बीच में मौजूद सामग्री पहुंच योग्य हो सकती है.

कई मामलों में स्क्रोल-स्नैपिंग को सुविधा के तौर पर जोड़ा जा सकता है. इसके लिए, सुविधा का पता लगाने की ज़रूरत भी नहीं होती. अगर ज़रूरी हो, तो CSS Scroll Snap के लिए सहायता पाने के लिए @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 जैसे नए सीएसएस एपीआई पर काम करें.
3. snapChanged() जैसे नए JS इवेंट पर काम करें.