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

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

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

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

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