Snap इवेंट के पेज स्क्रोल करें

Chrome 129 में, JavaScript से scrollSnapChange और scrollSnapChanging इवेंट इस्तेमाल किए जा सकते हैं. बिल्ट-इन स्नैप इवेंट लागू करने से, पहले न दिखने वाली स्नैप स्थिति सही समय पर कार्रवाई करने लायक बन जाती है और हमेशा सही हो जाती है. इन इवेंट के बिना आपको यह सुविधा नहीं मिली.

scrollSnapChange से पहले, इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल करके यह पता लगाया जा सकता था कि कौनसा एलिमेंट स्क्रोल पोर्ट को पार कर रहा था. हालांकि, यह तय करना कुछ ही स्थितियों तक सीमित था कि क्या स्नैप किया गया था. उदाहरण के लिए, यह पता लगाया जा सकता है कि स्नैप आइटम, स्क्रोल पोर्ट को भर रहे हैं या स्क्रोल पोर्ट के ज़्यादातर हिस्से को. ऐसा करने के लिए, आपको स्क्रोल एरिया के इंटरसेक्ट करने वाले एलिमेंट दिखेंगे. इसके बाद, यह देखें कि कौनसा आइटम स्क्रोल किए गए ज़्यादातर हिस्से का इस्तेमाल कर रहा है. मान लें कि यह स्नैप टारगेट था. इसके बाद, scrollend तक इंतज़ार करें और स्नैप किए गए आइटम (स्नैप टारगेट) पर कार्रवाई करें.

हालांकि, scrollSnapChanging से पहले, यह पता नहीं चल पा रहा था कि स्नैप टारगेट कब बदल रहा है या उसे किस तरह बदला जा रहा है (जैसे कि स्क्रोल फ़्लिंग करना).

खुशखबरी, ये नए इवेंट इस जानकारी को जल्दी और आसानी से उपलब्ध कराते हैं. इसकी मदद से, स्क्रोल स्नैप इंटरैक्शन की सुविधा को चालू किया जा सकता है. इससे, स्क्रोल स्नैप इंटरैक्शन की नई सुविधाओं को इस्तेमाल किया जा सकता है.

scrollSnapChange

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

1. स्क्रोल करना बंद करने के बाद.
2. scrollend से पहले.

यह इवेंट स्क्रोलिंग पूरी होने पर scrollend से पहले सक्रिय होता है, और यह तभी फ़ायर होता है, जब किसी नए स्नैप टारगेट पर आराम किया गया हो. जब स्क्रोल करने का जेस्चर पूरा हो जाता है, तब इवेंट को लेज़ी या टाइम-इन-टाइम का एहसास होता है.

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

इवेंट, स्नैप किए गए आइटम को इवेंट ऑब्जेक्ट पर snapTargetBlock और snapTargetInline के रूप में दिखाता है. अगर स्क्रोलर सिर्फ़ हॉरिज़ॉन्टल है, तो snapTargetBlock प्रॉपर्टी null होगी. प्रॉपर्टी की वैल्यू, एलिमेंट नोड होगी.

ScrollSnapChange के लिए खास जानकारी

तब तक सक्रिय नहीं होता है, जब तक उपयोगकर्ता अपना जेस्चर रिलीज़ नहीं करता

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

स्नैप टारगेट न बदलने पर सक्रिय नहीं होता है

यह इवेंट स्नैप बदलने के लिए है और अगर स्नैप टारगेट में बदलाव नहीं हुआ है, तो इवेंट ट्रिगर नहीं होगा. भले ही, उपयोगकर्ता ने स्क्रोलर के साथ इंटरैक्ट किया हो. हालांकि, उपयोगकर्ता ने स्क्रोल किया, इसलिए स्क्रोल पूरा होने पर scrollend इवेंट अब भी ट्रिगर होता है.

scrollSnapChanging

यह इवेंट जैसे ही ब्राउज़र यह तय करता है कि स्क्रोल करने का जेस्चर एक नया स्नैप टारगेट है या नतीजे देता है, वैसे ही यह इवेंट ट्रिगर होता है. यह तेज़ी से और स्क्रोल करने के दौरान ट्रिगर होता है.

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

इवेंट, स्नैप किए गए आइटम को इवेंट ऑब्जेक्ट पर snapTargetBlock और snapTargetInline के रूप में दिखाता है. अगर स्क्रोलर सिर्फ़ वर्टिकल है, तो snapTargetInline प्रॉपर्टी null होगी. प्रॉपर्टी की वैल्यू, एलिमेंट नोड होगी.

ScrollSnapChange के लिए खास जानकारी

स्क्रोल करने के जेस्चर के दौरान, समय से पहले और अक्सर चालू हो जाता है

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

नए स्नैप टारगेट के दौरान सभी स्नैप टारगेट को ट्रिगर नहीं करता

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

इस्तेमाल के उदाहरण और उदाहरण

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

यहां दिए गए पैटर्न से, इस्तेमाल के कुछ उदाहरण दिए गए हैं. इनसे आपको तुरंत प्रॉडक्टिविटी बढ़ाने में मदद मिलती है.

टेस्टिमोनियल हाइलाइट करें

यह उदाहरण स्नैप किए गए टेस्टिमोनियल का प्रमोशन करता है या उस पर विज़ुअल तौर पर फ़ोकस करता है.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

स्नैप किए गए आइटम के लिए कैप्शन दिखाएं

इस उदाहरण में, स्नैप किए गए आइटम के लिए कैप्शन दिखाया गया है. दोनों इवेंट इस डेमो में शामिल किए गए हैं, ताकि आप scrollSnapChange और scrollSnapChanging के समय और उपयोगकर्ता अनुभव में अंतर देख सकें.

स्नैप की गई प्रेज़ेंटेशन स्लाइड के बच्चों को एक बार ऐनिमेट करें

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

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

स्क्रोलर में x और y, दोनों पर स्नैप करना

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

लिंक किए गए दो स्क्रोलर

इस डेमो में स्क्रोल स्नैप करने वाले दो कंटेनर हैं, जिनमें एक लिंक की हाई लेवल वाली सूची है और दूसरा पेज वाला कॉन्टेंट. नए scrollSnapChanging इवेंट की वजह से, इन दोनों की स्नैप स्थितियों को एक-दूसरे से आसानी से लिंक किया जा सकता है, ताकि ये हमेशा सिंक रहें.

OKLCH रंग पिकर

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

चौंका देने वाले ऐनिमेटेड हब

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

इवेंट से जुड़ी सहायता के लिए, इस JavaScript का इस्तेमाल करें:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

स्क्रोल किया जा सकने वाला रूलर इनपुट

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

कवर फ़्लो

इस डेमो में, macOS के कवर फ़्लो के Bramus Van Danme के शानदार स्क्रोल किए गए ऐनिमेशन रीक्रिएशन को ध्यान में रखा गया है (वीडियो ट्यूटोरियल भी). खास तौर पर, scrollSnapChanging का इस्तेमाल एल्बम के टाइटल को छिपाने के लिए किया जाता है. वहीं, scrollSnapChange का इस्तेमाल टाइटल दिखाने के लिए किया जाता है. इन इवेंट से, पुराने टाइटल को छिपाने और नए टाइटल को मज़ेदार तरीके से दिखाने में मदद मिलती है.

क्रिएटिविटी बढ़ाने के लिए अन्य आइडिया

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

• लेज़ी लोडिंग को ट्रिगर करना, इसे स्नैपचेंज ट्रिगर की गई रेंडरिंग या डेटा फ़ेच करने के नाम से जाना जाता है.
• किसी बड़ी इमेज के साथ लिंक किए गए फ़िल्म स्ट्रिप थंबनेल.
• स्नैप किए गए वीडियो थंबनेल के लिए वीडियो ट्रेलर के लिए चलाएं/रोकें को टॉगल करना.
• Analytics ट्रैकिंग
• स्क्रोलीटेलिंग
• व्हील ऑफ़ फ़ॉर्चून यूआई/यूएक्स
• स्नैप टारगेट को एक ऐंकर टूलटिप मिलता है.
• स्नैप करने के लिए टैप करें
• देखने के लिए स्नैप करें
• स्नैप ऑन
• स्वाइप यूज़र इंटरफ़ेस (यूआई)
• स्वाइप किए जा सकने वाले टैब या कैरसेल

अतिरिक्त अध्ययन

Chrome टीम यह जानने के लिए उत्साहित है कि आपने इन नए एपीआई का इस्तेमाल करके क्या बनाया है. हमें उम्मीद है कि इससे स्क्रोल किए जा सकने वाले आपके अनुभव को बेहतर बनाने में मदद मिलेगी.

रिसॉर्स:

• सीएसएस की खास बातें
• स्क्रोल करके Snap के बारे में जानकारी देने वाले वीडियो
• CodePen कलेक्शन