Scrollend, एक नया JavaScript इवेंट

टाइम आउट फ़ंक्शन मिटाएं और उनसे जुड़ी गड़बड़ियों को हटाएं. यहां वह इवेंट दिया गया है जिसकी आपको ज़रूरत है: scrollend.

Adam Argyle

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

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

setTimeout() की इस रणनीति से यह पता चल सकता है कि 100ms के लिए स्क्रोल करना बंद हो गया है या नहीं. इससे यह स्क्रोल खत्म होने के बजाय, स्क्रोल रोके जाने के इवेंट की तरह लगता है.

scrollend इवेंट के बाद, ब्राउज़र आपके लिए यह मुश्किल आकलन करता है.

document.onscrollend = event => {…}

यह बहुत बढ़िया है. इन्हें सही समय पर भेजा जाता है और इन्हें भेजने से पहले, इनमें काम की शर्तें शामिल की जाती हैं.

इसे आज़माएं!

इवेंट की जानकारी

scrollend इवेंट तब ट्रिगर होता है, जब: - ब्राउज़र अब स्क्रोल को ऐनिमेट या ट्रांसलेट नहीं कर रहा है. - उपयोगकर्ता ने टच छोड़ दिया है. - उपयोगकर्ता के पॉइंटर ने स्क्रोल थंब को छोड़ दिया है. - उपयोगकर्ता ने बटन को छोड़ दिया है. - फ़्रैगमेंट तक स्क्रोल करने की प्रोसेस पूरी हो गई है. - स्क्रोल स्नैप पूरा हो गया है. - scrollTo() पूरा हो गया है. - उपयोगकर्ता ने विज़ुअल व्यूपोर्ट को स्क्रोल किया है.

scrollend इवेंट तब ट्रिगर नहीं होता, जब: - उपयोगकर्ता के जेस्चर की वजह से स्क्रोल की पोज़िशन में कोई बदलाव नहीं होता (ट्रांसलेशन नहीं होता). - scrollTo() का कोई अनुवाद नहीं मिला.

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

इवेंट का इस्तेमाल करना

अन्य स्क्रोल इवेंट की तरह, लिसनर को कई तरीकों से रजिस्टर किया जा सकता है.

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

इसके अलावा, इवेंट प्रॉपर्टी का इस्तेमाल करें:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

पॉलीफ़िल और प्रोग्रेसिव एन्हैंसमेंट

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

'onscrollend' in window
// true, if available

ब्राउज़र के इवेंट उपलब्ध कराने पर, यह सही या गलत के तौर पर रिपोर्ट करेगा. इस जांच की मदद से, कोड को अलग-अलग हिस्सों में बांटा जा सकता है:

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

यह scrollend इवेंट उपलब्ध होने पर, उसे बेहतर बनाने के लिए एक अच्छी शुरुआत है. मैंने एक ऐसा polyfill (NPM) भी बनाया है जिससे ब्राउज़र बेहतर तरीके से काम करता है:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

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

उपयोग के उदाहरण

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

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

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

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

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

इस सुविधा को इंजीनियर करने के लिए मेहदी काज़मी और एपीआई और लागू करने के दिशा-निर्देश देने के लिए रॉबर्ट फ़्लैक को धन्यवाद.