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 इवेंट उपलब्ध हो, तब उसे बेहतर बनाने के लिए यह एक अच्छा तरीका है. इसके अलावा, मेरी बनाई गई पॉलीफ़िल (NPM) का इस्तेमाल करके भी देखा जा सकता है. यह ब्राउज़र के लिए सबसे सही काम करती है:

import {scrollend} from "scrollyfills"

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

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

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

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

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

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

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

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

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