Google I/O से जुड़े रहने के लिए धन्यवाद! मांग पर वीडियो देखें.

इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

Adam Argyle

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

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

हालांकि, scrollSnapChanging से पहले यह जानना असंभव था कि स्नैप टारगेट कब बदल रहा है या उसे किसमें बदला जा रहा है. जैसे, स्क्रोल फ़्लिंग.

स्नैप टारगेट के तौर पर, नंबर वाले बॉक्स के साथ एक हॉरिज़ॉन्टल स्क्रोलर दिखाया गया है. बाईं ओर, scrollSnapChange इवेंट का रीयल टाइम लॉग है. इसमें snapTargetInline को नीले रंग से हाइलाइट किया गया है. दाईं ओर, scrollSnapChanging इवेंट का रीयल टाइम लॉग है. इसमें, snapTargetInline को स्लेटी रंग से हाइलाइट किया गया है.

इसे आज़माएं
https://codepen.io/web-dot-dev/pen/jOjaaEP

अच्छी खबर है कि इन नए इवेंट की मदद से, यह जानकारी तुरंत और आसानी से उपलब्ध हो जाती है. इससे स्क्रोल स्नैप इंटरैक्शन की मौजूदा क्षमता से परे पहुंचने में मदद मिलती है. साथ ही, स्क्रोल स्नैप के रिलेशनशिप और नए यूज़र इंटरफ़ेस (यूआई) के सुझावों को ऑर्केस्ट्रेट करने में भी मदद मिलती है.

scrollSnapChange

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

स्क्रोल करने के बाद.
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 होगी. प्रॉपर्टी की वैल्यू, एलिमेंट नोड होगी.

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

स्क्रोल जेस्चर के दौरान, जल्दी और बार-बार ट्रिगर होता है

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

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

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

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

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

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

किसी प्रशंसापत्र को हाइलाइट करना

इस उदाहरण में, स्नैप किए गए प्रशंसापत्र को प्रमोट किया गया है या उस पर फ़ोकस किया गया है.

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

https://codepen.io/web-dot-dev/pen/dyBZZPe

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

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

स्नैप बदलना
https://codepen.io/web-dot-dev/pen/wvLPPBL

स्नैप बदलाव करें
https://codepen.io/web-dot-dev/pen/QWXOObw

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

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

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

https://codepen.io/web-dot-dev/pen/rNEYYVj

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

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

हॉरिज़ॉन्टल और वर्टिकल स्क्रोलर में स्क्वेयर का ग्रिड दिखाया गया है. डैश वाला बॉर्डर, scrollSnapChanging टारगेट को दिखाता है और सॉलिड बॉर्डर, scrollSnapChange टारगेट को दिखाता है. लाल रंग, snapTargetInline को दिखाता है और नीला रंग, snapTargetBlock को दिखाता है.

https://codepen.io/web-dot-dev/pen/qBzVVdp

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

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

https://codepen.io/web-dot-dev/pen/YzoEEXj

OKLCH कलर पिकर

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

scrollSnapChanging का इस्तेमाल, स्नैप किए गए आइटम को स्टेटस के साथ सिंक करने के लिए किया जाता है. वहीं, scrollSnapChange का इस्तेमाल, उस कलर चैनल हेडर को ऐनिमेट करने के लिए किया जाता है जिस पर उपयोगकर्ता का इनपुट लागू किया गया था.

https://codepen.io/web-dot-dev/pen/OJeOOVG

शानदार ऐनिमेशन वाले हब

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

इस JavaScript के साथ इवेंट की सुविधा उपलब्ध है या नहीं, यह देखें:

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

https://codepen.io/web-dot-dev/pen/MWMOOae

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

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

https://codepen.io/web-dot-dev/pen/LYKOOpd

कवर फ़्लो

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

https://codepen.io/web-dot-dev/pen/Bagmmog

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

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

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

अन्य अध्ययन

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