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

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

Adam Argyle

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

पहले

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

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

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

बाद में

document.onscrollend = event => {…}

यह तो बहुत अच्छी बात है. यह सही समय पर और काम की शर्तों के साथ रिलीज़ किया जाता है.

Browser Support

• 114
• 114
• 109
• 26.2

Source

इसे आज़माएं!

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

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

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

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

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

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

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

aScrollingElement.addEventListener("scroll>end", (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 इवेंट उपलब्ध है, तो polyfill का इस्तेमाल करके उसे बेहतर बनाया जाएगा. अगर यह उपलब्ध नहीं है, तो स्क्रिप्ट पॉइंटर इवेंट और स्क्रोल को मॉनिटर करती है, ताकि इवेंट के खत्म होने का सटीक अनुमान लगाया जा सके.

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

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

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

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

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

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

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