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

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

एडम आर्गाइल

Twitter GitHub

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 पर यह कैरसेल कैसे बनाया. साथ ही, लाइव डेमो आज़माएं.

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