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

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 और ऐरो बटन का इस्तेमाल कर सकते हैं. स्क्रीन रीडर के लिए, यह सिर्फ़ एक फ़ॉर्म है.

ScrollSnapChange का इस्तेमाल, स्नैप किए गए आइटम को स्थिति के साथ तेज़ी से सिंक करने के लिए किया जाता है, जबकि 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 ट्रैकिंग
स्क्रोल करके पढ़ने लायक कॉन्टेंट
व्हील ऑफ़ फ़ॉर्चून यूआई/यूएक्स
स्नैप टारगेट को ऐंकर किया गया टूलटिप मिलता है.
स्नैप करने के लिए टैप करें
स्नैप करके दिखाना
स्नैप में आवाज़ें
स्वाइप यूज़र इंटरफ़ेस (यूआई)
स्वाइप किए जा सकने वाले टैब या कैरसेल

अन्य अध्ययन

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